# منتقي الألوان

> منتقي ألوان أونلاين بثلاث عجلات HSV وHSL وRYB، توافقات جاهزة، سبع صيغ تحويل بينها HEX وOKLCH، وأقرب رمز Tailwind. مجاني بالكامل داخل المتصفح.

URL: https://acrafto.com/ar/muntaky-al-alwan-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

اختر لونًا على العجلة، اضبطه بدقة على لوحة التشبع والسطوع، واقرأه بكل صيغة تستخدمها أدواتك: من `#RRGGBB` إلى `oklch()`. المنتقي يقدّم أيضًا ما تتجاهله أدوات مشابهة: ثلاث هندسات للعجلة من بينها عجلة الرسامين RYB التقليدية، توافقات ألوان تبني لك لوحة جاهزة، قناة شفافية، وتصدير اللوحة كاملة بنقرة واحدة كمتغيرات CSS أو SCSS أو JSON. كل هذا يُحسب داخل متصفحك فقط.

## RYB أم RGB؟ ثلاث عجلات ألوان بدل عجلة واحدة

قائمة **وضع العجلة** تغيّر ترتيب درجات الألوان على العجلة:

- **HSV** و**HSL** عجلتان رقميتان. درجات الألوان مرتبة بالطريقة التي تمزج بها الشاشة الضوء. يختلفان في لوحة المربع: في HSV أكثر زاوية سطوعًا هي درجة اللون الصافية، بينما HSL يضع درجات الألوان الصافية عند إضاءة متوسطة مع الأبيض فوقها.
- **RYB (الرسامين)** يرتب درجات الألوان بالطريقة التي تعلّمها الفنانون: الأحمر والأصفر والأزرق كألوان أساسية، مع البرتقالي والأخضر والبنفسجي بينها (انظر [النموذج اللوني RYB على ويكيبيديا](https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%86%D9%85%D9%88%D8%B0%D8%AC_%D8%A7%D9%84%D9%84%D9%88%D9%86%D9%8A_%D8%A3%D8%AD%D9%85%D8%B1_%D8%A3%D8%B5%D9%81%D8%B1_%D8%A3%D8%B2%D8%B1%D9%82)). يظهر الفرق أساسًا في التوافقات. على عجلة RYB لون الأحمر المتكامل هو **الأخضر** ولون الأزرق المتكامل هو **البرتقالي**، وهما الزوجان الكلاسيكيان اللذان يعرفهما كل رسام. العجلة الرقمية تقرن الأحمر بالسماوي (Cyan) بدلًا من ذلك. إن بدت لك لوحة “متكاملة” من منتقي ألوان عادي غريبة يومًا، فهذا هو السبب.

## توافقات الألوان: لوحة تُبنى وحدها

اختر قاعدة في حقل **توافق الألوان**. تُحدَّد على العجلة الألوان المرافقة وتظهر تحتها لوحة جاهزة:

- **متكامل:** لون مقابل واحد. أقوى تباين، يناسب لمسة إبراز واحدة بجانب لون العلامة التجارية الأساسي.
- **متكامل منقسم:** الجاران المباشران للون المقابل. تباين قريب من السابق لكن أسهل في الموازنة.
- **ثلاثي:** ثلاث درجات ألوان متباعدة بالتساوي على العجلة. حيوي ومتزن في آن واحد إذا هيمنت واحدة واستُخدمت الأخريان بحذر.
- **رباعي (مربع):** أربع درجات ألوان. مخططات غنية للرسوم التوضيحية والرسوم البيانية، ويصعب موازنتها في واجهة تطبيق.
- **متجاور:** الجيران المباشرون. مزيج هادئ للخلفيات والتدرجات.
- **أحادي اللون:** درجة لون واحدة بعدة مستويات إضاءة. الخيار الأكثر أمانًا لحالات الأزرار (تحويم، نشط، معطّل).

تُنسخ اللوحة كاملة بنقرة واحدة بالصيغة التي تختارها: **HEX** عادي، **RGB**، **HSL**، **OKLCH**، **خصائص CSS المخصصة** الجاهزة للصق (`--color-1: …`)، متغيرات **SCSS** أو **JSON** للكود. للتحقق سريعًا من أن ألوان اللوحة تحافظ على تباين واضح لمن يصعب عليهم تمييز درجات الألوان، التقط لقطة شاشة بعد [تحويلها إلى تدرج رمادي](https://acrafto.com/ar/tahwil-al-suwar-ila-tadarruj-ramadi-online/).

## تحويل HEX وRGB وHSL وOKLCH وCMYK: الصق أي شيء، اقرأ كل شيء

حقول الإدخال تقبل تقريبًا أي صيغة لون: `#f80`، `#ff8800`، صيغة HEX من 8 خانات مع شفافية، `rgb()` و`rgba()`، `hsl()`، `hwb()`، `lch()`، `oklch()`، `oklab()`، `cmyk()`، `0xFF8800` وأسماء ألوان CSS مثل `rebeccapurple`. مهما كتبت، تحصل على سبع مخرجات متزامنة: **HEX وRGB وHSL وHSV وLCH وOKLCH وCMYK**، لكل منها زر نسخ خاص بها.

مُنزلق **العتامة (ألفا)** أسفل المعاينة يحوّل المخرجات إلى صيغها الشفافة `#RRGGBBAA` وrgba() وhsla(). المعاينة تُرسم فوق خلفية شطرنجية، لذا ترى الشفافية فورًا.

## أقرب رمز Tailwind CSS لأي لون

شارتان تحت المعاينة تسمّيان اللون: **أقرب لون CSS مسمّى** (مفيد للنماذج الأولية السريعة) و**أقرب رمز Tailwind**، مثل `orange-500`. هكذا تبقى داخل نظام التصميم الخاص بك بدل ابتكار قيم منفردة. انقر على الشارة لنسخها.

هذا يجيب عن سؤال يتكرر عند كل تسليم تصميم: المصمم أرسل كود hex، فأي فئة Tailwind هي الأقرب له؟ تُحسب المطابقة مقابل لوحة الألوان الافتراضية لـ Tailwind CSS 4 (انظر [توثيق ألوان Tailwind](https://tailwindcss.com/docs/colors)، بالإنجليزية)، لذا يمكنك لصق الرمز مباشرة داخل اسم الفئة.

## أي صيغة لون تستخدم؟

| الصيغة | الاسم الكامل | متى تستخدمها؟ |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **الخيار الافتراضي للويب.** قصيرة، مدعومة في كل مكان، سهلة النسخ. ثماني خانات تضيف الشفافية. |
| **RGB** | Red, Green, Blue | **هكذا تفكّر الشاشات.** ثلاث قنوات ضوئية من 0 إلى 255. الصيغة التي تتوقعها معظم واجهات البرمجة وكود الكانفاس. |
| **HSL** | Hue, Saturation, Lightness | **للتعديل بالعين.** “أفتح قليلًا” أو “أقل تشبعًا” يعني تغيير رقم واحد فقط. |
| **HSV** | Hue, Saturation, Value | **برامج التصميم الجرافيكي.** النموذج الذي يقوم عليه منتقي الألوان في Photoshop وGIMP. |
| **LCH** | Lightness, Chroma, Hue | **تجانس إدراكي.** خطوات رقمية متساوية تبدو كخطوات بصرية متساوية، وهو ما تدّعيه HSL دون تحقيقه فعلًا. |
| **OKLCH** | OK Lightness, Chroma, Hue | **الخيار الحديث في CSS.** يصلح انحراف درجة اللون في الأزرق الذي يصيب LCH. مدعوم في كل المتصفحات الحالية ومثالي لرموز التصميم. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **موجّه للطباعة.** تحويل تقريبي للتواصل مع مطبعتك، والقيم النهائية يحددها ملفها اللوني. |

لماذا OKLCH أكثر تجانسًا إدراكيًا من النماذج الأقدم يشرحه مصمم فضاء Oklab بيورن أوتوسون في [مقاله الأصلي](https://bottosson.github.io/posts/oklab/) (بالإنجليزية). التركيب والدعم في المتصفحات يلخصهما [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (بالإنجليزية). كيف يعمل نموذج الطباعة تشرحه [ويكيبيديا في مقالة CMYK](https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%86%D9%85%D9%88%D8%B0%D8%AC_%D8%A7%D9%84%D9%84%D9%88%D9%86%D9%8A_%D8%B3%D9%8A%D8%A7%D9%86_%D9%85%D8%A7%D8%AC%D9%86%D8%AA%D8%A7_%D8%A3%D8%B5%D9%81%D8%B1_%D8%A3%D8%B3%D9%88%D8%AF).

## تفاصيل صغيرة توفّر لك الوقت

- **السجل يُحفظ من تلقاء نفسه.** آخر 24 لونًا تبقى بعد تحديث الصفحة. تظل فقط في تخزين متصفحك ولا تُرفع إلى أي مكان.
- **قطارة الألوان.** في المتصفحات التي تدعم EyeDropper API (Chrome وEdge) تلتقط لونًا من أي مكان على شاشتك، حتى خارج نافذة المتصفح. للون من صورة أو ملف شعار بدلًا من الشاشة، استخدم [قطارة الألوان](https://acrafto.com/ar/image-color-picker/).
- **التحكم بلوحة المفاتيح.** العجلة ولوحة التشبع والسطوع تستجيبان لمفاتيح الأسهم، فتضبط اللون بخطوات دقيقة.
- **الإعدادات المسبقة** تغطي الألوان الأساسية الشائعة عندما تحتاج فقط نقطة انطلاق سريعة.

## الأسئلة الشائعة

### كيف أحوّل OKLCH إلى HEX؟

الصق قيمة `oklch()` في حقل OKLCH وتتحدث كل المخرجات الأخرى فورًا، بما فيها HEX. الأمر يعمل بالاتجاه المعاكس أيضًا: اكتب كود HEX واقرأ ما يقابله بصيغة `oklch()`. تنبيه واحد: OKLCH يستطيع وصف ألوان خارج نطاق sRGB، وهذه تُقصّ إلى ما يستطيع sRGB عرضه. لذلك لون `oklch()` عالي التشبع لن يبدو مطابقًا لصورته بصيغة HEX على شاشة بنطاق ألوان واسع.

### هل استخدام oklch() آمن في CSS الإنتاجي؟

نعم. كل الإصدارات الحالية من Chrome وEdge وFirefox وSafari تدعم `oklch()`، وأصبحت صيغة شائعة لرموز التصميم (Tailwind CSS 4 يعرّف لوحة ألوانه كاملة بها). للمتصفحات القديمة جدًا، ضع قيمة HEX احتياطية في السطر السابق. هذه الأداة تعطيك القيمتين معًا.

### لماذا تتغير التوافقات عندما أنتقل إلى عجلة RYB؟

لأن ما يُعتبر "مقابلًا" يعتمد على كيفية توزيع درجات الألوان حول الدائرة. عجلة RYB توزّع الألوان الأساسية للأصباغ بالتساوي، فتطابق الأزواج المتكاملة ما يعرفه الرسامون: الأحمر والأخضر، الأزرق والبرتقالي، الأصفر والبنفسجي. عجلتا HSV وHSL توزّعان درجات الألوان حسب مزج الضوء، فتقرنان الأحمر بالسماوي. لا خطأ في أي منهما: RYB يوافق تعليم الفن التقليدي، وHSV وHSL يوافقان ما تفعله الشاشات.

### هل يمكنني الوثوق بقيم CMYK للطباعة؟

اعتبرها توجيهًا لا حقيقة مطلقة. التحويل الفعلي للطباعة يعتمد على [الملف اللوني ICC](https://en.wikipedia.org/wiki/ICC_profile) (ويكيبيديا، بالإنجليزية) الخاص بالطابعة والورق والحبر. نفس لون RGB يظهر مختلفًا على ورق مطلي وآخر غير مطلي. القيم هنا تستخدم معادلة قياسية تقرّبك من النتيجة، لكن المراجعة النهائية تبقى مسؤولية المطبعة.

### أين زر القطارة في Firefox أو Safari؟

إنه مخفي عمدًا. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN، بالإنجليزية) الذي يعتمد عليه الزر متاح حاليًا فقط في المتصفحات المبنية على Chromium (Chrome وEdge وOpera). باقي ميزات الأداة تعمل في كل مكان، وما ينقص فقط هو التقاط اللون من الشاشة. إذا احتجت لونًا من صورة، استخدم [قطارة الألوان](https://acrafto.com/ar/image-color-picker/)، وهي تعمل في كل المتصفحات.

### هل يبقى سجل ألواني خاصًا؟

نعم. السجل مخزَّن في localStorage الخاص بمتصفحك على جهازك. لا شيء تختاره أو تلصقه أو تنسخه يُرسل إلى أي مكان. الأداة كاملة تعمل كـ JavaScript داخل المتصفح، ويمكنك التحقق من ذلك في تبويب الشبكة (Network) بأدوات المطورين.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))