RGB وHSL طريقتان لكتابة مجموعة ألوان الشاشة نفسها. لا تتفوق إحداهما في الدقة، لكنهما تنظمان اللون بشكل مختلف، وهذا الاختلاف مهم عندما تعدّل الألوان يدوياً.
RGB: كيف تصنع الشاشات اللون
يمزج RGB الضوء الأحمر والأخضر والأزرق، وتتراوح كل قناة من 0 إلى 255. فالقيمة rgb(255, 127, 80) هي اللون المرجاني . يطابق RGB طريقة عمل الشاشات مباشرة، ولهذا فرموز HEX ليست إلا RGB بالنظام الست عشري.
المشكلة: إذا أردت مرجانياً أغمق قليلاً فأي الأرقام تغيّر؟ خفض القنوات الثلاث بالتساوي ينجح تقريباً، لكنه يغيّر التشبع بطريقة يصعب توقعها.
HSL: كيف يصف البشر اللون
يرمز HSL إلى درجة اللون والتشبع والإضاءة:
- درجة اللون موقعه على عجلة الألوان من 0° إلى 360° (0° أحمر، 120° أخضر، 240° أزرق).
- التشبع مدى حدة اللون من 0% (رمادي) إلى 100%.
- الإضاءة من 0% (أسود) مروراً بـ 50% (اللون النقي) إلى 100% (أبيض).
المرجاني نفسه في HSL هو hsl(16, 100%, 66%). لتغميقه اخفض الإضاءة فقط: hsl(16, 100%, 50%)، وللحصول على نسخة هادئة اخفض التشبع.
مقارنة جنباً إلى جنب
| المهمة | RGB | HSL |
|---|---|---|
| النسخ من برامج التصميم | ممتاز | جيد |
| إنشاء نسخ أفتح أو أغمق | صعب | سهل |
| بناء التناسقات (تدوير درجة اللون) | صعب | سهل |
| معالجة الصور والحسابات | طبيعي | يحتاج تحويلاً |
حدود HSL
إضاءة HSL ليست إدراكية؛ فاللون hsl(60, 100%, 50%) (أصفر) يبدو أسطع بكثير من hsl(240, 100%, 50%) (أزرق) رغم أن إضاءة كليهما 50%. للحصول على سلالم متساوية إدراكياً يوفّر CSS الحديث الدالة oklch()، ويعرض مولد الدرجات كيف تختلف الخطوات.
توصية عملية
- احفظ ألوان الهوية بصيغة HEX للتوافق.
- استخدم HSL (أو OKLCH) عند توليد النسخ في الكود أو CSS.
- حوّل بحرية عبر محول RGB إلى HSL؛ فالألوان متطابقة والذي يتغير هو طريقة الكتابة فقط.
