منتقي الألوان
اختر لونًا على العجلة، اضبطه بدقة على لوحة التشبع والسطوع، واقرأه بكل صيغة تستخدمها أدواتك: من #RRGGBB إلى oklch(). المنتقي يقدّم أيضًا ما تتجاهله أدوات مشابهة: ثلاث هندسات للعجلة من بينها عجلة الرسامين RYB التقليدية، توافقات ألوان تبني لك لوحة جاهزة، قناة شفافية، وتصدير اللوحة كاملة بنقرة واحدة كمتغيرات CSS أو SCSS أو JSON. كل هذا يُحسب داخل متصفحك فقط.
RYB أم RGB؟ ثلاث عجلات ألوان بدل عجلة واحدة
قائمة وضع العجلة تغيّر ترتيب درجات الألوان على العجلة:
- HSV وHSL عجلتان رقميتان. درجات الألوان مرتبة بالطريقة التي تمزج بها الشاشة الضوء. يختلفان في لوحة المربع: في HSV أكثر زاوية سطوعًا هي درجة اللون الصافية، بينما HSL يضع درجات الألوان الصافية عند إضاءة متوسطة مع الأبيض فوقها.
- RYB (الرسامين) يرتب درجات الألوان بالطريقة التي تعلّمها الفنانون: الأحمر والأصفر والأزرق كألوان أساسية، مع البرتقالي والأخضر والبنفسجي بينها (انظر النموذج اللوني RYB على ويكيبيديا). يظهر الفرق أساسًا في التوافقات. على عجلة RYB لون الأحمر المتكامل هو الأخضر ولون الأزرق المتكامل هو البرتقالي، وهما الزوجان الكلاسيكيان اللذان يعرفهما كل رسام. العجلة الرقمية تقرن الأحمر بالسماوي (Cyan) بدلًا من ذلك. إن بدت لك لوحة “متكاملة” من منتقي ألوان عادي غريبة يومًا، فهذا هو السبب.
توافقات الألوان: لوحة تُبنى وحدها
اختر قاعدة في حقل توافق الألوان. تُحدَّد على العجلة الألوان المرافقة وتظهر تحتها لوحة جاهزة:
- متكامل: لون مقابل واحد. أقوى تباين، يناسب لمسة إبراز واحدة بجانب لون العلامة التجارية الأساسي.
- متكامل منقسم: الجاران المباشران للون المقابل. تباين قريب من السابق لكن أسهل في الموازنة.
- ثلاثي: ثلاث درجات ألوان متباعدة بالتساوي على العجلة. حيوي ومتزن في آن واحد إذا هيمنت واحدة واستُخدمت الأخريان بحذر.
- رباعي (مربع): أربع درجات ألوان. مخططات غنية للرسوم التوضيحية والرسوم البيانية، ويصعب موازنتها في واجهة تطبيق.
- متجاور: الجيران المباشرون. مزيج هادئ للخلفيات والتدرجات.
- أحادي اللون: درجة لون واحدة بعدة مستويات إضاءة. الخيار الأكثر أمانًا لحالات الأزرار (تحويم، نشط، معطّل).
تُنسخ اللوحة كاملة بنقرة واحدة بالصيغة التي تختارها: HEX عادي، RGB، HSL، OKLCH، خصائص CSS المخصصة الجاهزة للصق (--color-1: …)، متغيرات SCSS أو JSON للكود. للتحقق سريعًا من أن ألوان اللوحة تحافظ على تباين واضح لمن يصعب عليهم تمييز درجات الألوان، التقط لقطة شاشة بعد تحويلها إلى تدرج رمادي.
تحويل 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، بالإنجليزية)، لذا يمكنك لصق الرمز مباشرة داخل اسم الفئة.
أي صيغة لون تستخدم؟
| الصيغة | الاسم الكامل | متى تستخدمها؟ |
|---|---|---|
| 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 بيورن أوتوسون في مقاله الأصلي (بالإنجليزية). التركيب والدعم في المتصفحات يلخصهما MDN (بالإنجليزية). كيف يعمل نموذج الطباعة تشرحه ويكيبيديا في مقالة CMYK.
تفاصيل صغيرة توفّر لك الوقت
- السجل يُحفظ من تلقاء نفسه. آخر 24 لونًا تبقى بعد تحديث الصفحة. تظل فقط في تخزين متصفحك ولا تُرفع إلى أي مكان.
- قطارة الألوان. في المتصفحات التي تدعم EyeDropper API (Chrome وEdge) تلتقط لونًا من أي مكان على شاشتك، حتى خارج نافذة المتصفح. للون من صورة أو ملف شعار بدلًا من الشاشة، استخدم قطارة الألوان.
- التحكم بلوحة المفاتيح. العجلة ولوحة التشبع والسطوع تستجيبان لمفاتيح الأسهم، فتضبط اللون بخطوات دقيقة.
- الإعدادات المسبقة تغطي الألوان الأساسية الشائعة عندما تحتاج فقط نقطة انطلاق سريعة.
الأسئلة الشائعة
كيف أحوّل OKLCH إلى HEX؟
الصق قيمةoklch() في حقل OKLCH وتتحدث كل المخرجات الأخرى فورًا، بما فيها HEX. الأمر يعمل بالاتجاه المعاكس أيضًا: اكتب كود HEX واقرأ ما يقابله بصيغة oklch(). تنبيه واحد: OKLCH يستطيع وصف ألوان خارج نطاق sRGB، وهذه تُقصّ إلى ما يستطيع sRGB عرضه. لذلك لون oklch() عالي التشبع لن يبدو مطابقًا لصورته بصيغة HEX على شاشة بنطاق ألوان واسع.
هل استخدام oklch() آمن في CSS الإنتاجي؟
نعم. كل الإصدارات الحالية من Chrome وEdge وFirefox وSafari تدعمoklch()، وأصبحت صيغة شائعة لرموز التصميم (Tailwind CSS 4 يعرّف لوحة ألوانه كاملة بها). للمتصفحات القديمة جدًا، ضع قيمة HEX احتياطية في السطر السابق. هذه الأداة تعطيك القيمتين معًا.