دليل المطور لفهم صيغ الألوان الحديثة
إذا كنت مطورا أو مصمما فلابد أنك صادفت صيغا مختلفة لتعريف الألوان مثل:
RGB, RGBA, HSL, HEX…
RGB, RGBA, HSL, HEX…
لكن ما الفرق بين هذه الصيغ؟ ومتى نستخدم كل واحدة؟
هناك خمس طرق رئيسية لتعريف الألوان:
نموذج RGB:
وهي قيمة اللون بدلالة الأحمر
(Red) والأخضر (Green) والأزرق (Blue)... مبني على كيفية إدراك العين البشرية للألوان.
بحيث قيمة كل لون بين 0 و 255 (شدة اللون)
مثال: قيمة اللون الأحمر rgb(255, 0, 0).
نموذج RGBA:
هي امتداد لـ RGB لكن تضيف Alpha (A) التي تعبّر عن الشفافية أو درجة العتامة بين 0 و 1.
تكتب بنفس الصيغة مع استخدام rgba.
مثال: rgba(255, 0, 0, 0.8)
نموذج HSL:
نموذج HSL يعرّف اللون من خلال:
1- درجة اللون (Hue)
تخيل معي دائرة فيها كامل الألوان كما في الصورة المرفقة بالأسفل
درجة اللون هي نفسها درجة الزاوية التي تؤدي إليه من 0° إلى 360°
- 0° = أحمر
- 120° = أخضر
- 240° = أزرق
2- التشبع (Saturation)
وهي المسافة من مركز الدائرة إلى حافتها بنسبة من 0% إلى 100%
- 0% هي مركز الدائرة، اللون يميل إلى الرمادي.
- 100% هي حافة الدائرة وهو اللون الكامل
3- الإضاءة (Lightness)
تخيل أن الدائرة هذه عبارة عن أسطوانة ثلاثية الأبعاد بحيث أسفلها أكثر سوادا وأعلاها أكثر بياضا.
الإضاءة هي المسافة من أسفل الأسطوانة إلى قمّتها:
- 0% أسفل الأسطوانة وتعني أن اللون أسود
- 50% اللون مكتمل
- 100% أعلى الأسطوانة وتعني أن اللون أبيض
يكتب هذا النموذج بمثل هذه الصيغة: hsl(0, 100%, 50%)
قيمة Hex
هو نفسه RGB لكن بتمثيل مختلف للأرقام بالنظام السادس عشر (Hexadecimal) تكون مسبوقة بالرمز #
- يحتوي هذا النظام على 16 رمزا: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
مثال: الأحمر في RGB (255,0,0) يكتب في Hex بهذا الشكل: #ff0000
أسماء الألوان المعرّفة
تدعم المتصفحات الحديثة أكثر من 140 اسما للألوان مثل: black، purple...
هذه الأسماء مخصصة لتسهيل كتابة الأكواد، وهي في النهاية مرتبطة بقيم Hex أو RGB أو HSL مكافئة لها.
نموذج OKLAB
نموذج حديث لتعريف الألوان، صُمّم ليكون متوافقا مع إدراك العين البشرية بشكل أدق من RGB و HSL.
الفكرة الأساسية في OKLAB هي أن التغييرات الرقمية في القيم تقابل تغييرات بصرية متقاربة، أي إذا غيّرت القيمة قليلا سترى فرقا بصريا منطقيا ومتناسقا.
يتكوّن من ثلاث قيم:
1- الإضاءة L (Lightness):
- 0 = أسود
- 1 = أبيض
2- المحور a:
تمثل المحور بين الأخضر و الأحمر
3- المحور b:
تمثل المحور بين الأزرق و الأصفر
مثال: oklab(0.62 0.15 0.05)
نموذج OKLCH:
هو نسخة محسّنة وأكثر سهولة للفهم من OKLAB، تشبه HSL في طريقة التفكير لكنها أدق بصريا.
يعتمد على ثلاث قيم:
1- الإضاءة L (Lightness)
من 0 إلى 1
- 0 = أسود
-1 = أبيض
2- التشبع اللوني C (Chroma)
تمثل قوة اللون أو شدته.
- كلما زادت القيمة أصبح اللون أكثر حيوية
- 0 تعني لونا رماديا
3- درجة اللون H (Hue)
من 0° إلى 360°.
- 0° = أحمر
- 120° = أخضر
- 240° = أزرق
مثال: oklch(0.62 0.18 30)
الخلاصة
- تمثيل تقني مباشر RGB / HEX
- سهل الفهم لكنه غير دقيق بصريا HSL
- الأدق و الأحدث والأقرب لإدراك العين البشرية OKLAB / OKLCH
جميع الصيغ تعبر عن نفس الشيء (لون معيّن)، لكن كل صيغة تمنحك طريقة مختلفة في التمثيل والتحكم.