باختصار: تصف HEX وRGB وHSL جميعها الألوان نفسها، لكن بطرق مختلفة. فـ HEX وRGB ترميزان لقيم الأحمر والأخضر والأزرق نفسها؛ أما HSL فيعيد التعبير عنها كصبغة وتشبّع وإضاءة، وهي أسهل بكثير في التعديل يدويًا. ومعرفة أي صيغة تستخدم توفّر كثيرًا من التخمين عند مطابقة الألوان أو تعديلها.
اللون على الويب هو في النهاية ثلاث قنوات — أحمر وأخضر وأزرق — لكن طريقة كتابة هذه القنوات تغيّر مدى سهولة التفكير فيها.
HEX وRGB: الشيء نفسه مكتوبًا مرتين
يسرد RGB القنوات الثلاث مباشرة: rgb(37, 99, 235). ويحزم HEX القيم نفسها في سلسلة ست عشرية: #2563EB، حيث 25 و63 وEB هي بايتات الأحمر والأخضر والأزرق. وهما متبادلان — HEX مضغوط وشائع في أدوات التصميم، وRGB مريح في الشيفرة لأنك تحسب كل قناة. ولا أحدهما «أدقّ»؛ إنهما تهجئتان للون واحد.
HSL: الصيغة المصمّمة للتعديل
يصف HSL اللون بـالصبغة (موضعه على عجلة الألوان، 0–360°) والتشبّع (مدى حيويته، 0–100%) والإضاءة (مدى سطوعه، 0–100%). إنها الصيغة حين تريد تعديل لون لا استبداله: اخفض الإضاءة لحالة تمرير الماوس، أو قلّل التشبّع لنسخة أهدأ، أو انقل الصبغة لإيجاد لون مكمّل. أما إجراء التعديلات نفسها في HEX فيعني تخمين قيم البايتات.
ألفا وHEX من ثماني خانات
تُعبَّر الشفافية بقناة ألفا: يضيف rgba() وhsla() قيمة رابعة من 0 (شفاف) إلى 1 (معتم). ويدعم CSS الحديث أيضًا HEX من ثماني خانات، حيث يرمّز الحرفان الأخيران ألفا — #2563EB80 هو الأزرق نفسه عند نحو 50% من العتامة.
CMYK عالم آخر
HEX وRGB وHSL كلها نماذج ألوان للشاشة (ضوء جمعي). أما CMYK فللطباعة (حبر طرحي). والتحويل بينهما تقريبي دائمًا لأنهما لا يعيدان إنتاج المدى اللوني نفسه بدقة، فعامِل تحويل الشاشة إلى الطباعة كنقطة بداية للمعاينة، لا كمطابقة دقيقة.
سير عمل عملي
- الصق لون البداية — بأي صيغة — في محوّل الألوان لرؤية كل الصيغ دفعة واحدة.
- انتقل إلى HSL لبناء النسخ: اضبط الإضاءة للحالات، والتشبّع للنغمات الهادئة.
- أضف ألفا بـ
rgba()/hsla()أو HEX من ثماني خانات حيث تحتاج شفافية. - استخدم معاينة التدرّج لتوليد مقطع CSS جاهز للونين أو أكثر.
وإن كنت تعالج لوحة ألوان دفعةً، فحوّل عدة ألوان معًا (مفصولة بفواصل أو أسطر) وأبقِ النتائج بجانب ملاحظاتك بـ عدّاد الأحرف.
أخطاء شائعة يجب تجنّبها
- تعديل الألوان في HEX بينما يجعل HSL الضبط بديهيًا.
- توقّع أن يطابق تحويل CMYK الشاشة تمامًا.
- نسيان قناة ألفا فتحصل على لون معتم حيث أردت شفافية.
- خلط الصيغ بلا اتساق عبر ورقة أنماط.