في CSS، يمكن كتابة اللون نفسه بثلاث طرق مختلفة على الأقل، وكل طريقة مناسبة لمهمة مختلفة — من التصميم إلى تحريك الشفافية.
HEX: صيغة مضغوطة للنسخ واللصق
الترميز السداسي عشري مثل #FF5733 يرمّز القنوات الثلاث — الأحمر والأخضر والأزرق — بحرفين لكل منها. إنها الصيغة الأكثر إحكامًا، مناسبة للنسخ من تصاميم الماكيت، لكنها شبه غير قابلة للقراءة للإنسان: من الصعب معرفة الدرجة التي يمثّلها سلسلة من الأرقام بنظرة سريعة.
RGB: وصول مباشر لكل قناة
rgb(255, 87, 51) يكتب نفس القنوات الثلاث كأرقام عشرية من 0 إلى 255. هذا مفيد عند الحاجة لتغيير قناة واحدة برمجيًا، مثل زيادة اللون الأحمر تدريجيًا في تحريك JavaScript.
HSL: اختيار درجة اللون بشكل بديهي
يصف HSL اللون عبر الصبغة (hue، من 0 إلى 360°) والتشبع والسطوع. إنها الصيغة الأنسب لاختيار لون يدويًا: للحصول على نسخة أغمق من نفس الصبغة، يكفي تقليل السطوع فقط، دون إعادة حساب القنوات الثلاث لـRGB من الصفر.
قناة ألفا للشفافية
تضيف صيغتا rgba() وhsla() معاملًا رابعًا — العتامة من 0 إلى 1. يسمح CSS الحديث أيضًا بضبط الشفافية في HEX عبر حرفين إضافيين في النهاية، مثل #FF573380.
لماذا نحتاج هذا
- تحويل لون من تصميم ماكيت بسرعة إلى صيغة CSS المطلوبة.
- اختيار درجة أغمق أو أفتح من نفس اللون عبر HSL.
- إضافة شفافية إلى لون دون تغيير صبغته الأساسية.
لماذا يبقى رمز HEX بالأرقام اللاتينية دائمًا
حتى في صفحة عربية بالكامل يستخدم فيها بقية النص أرقامًا هندية (٠١٢٣٤٥٦٧٨٩) كما هو شائع في بعض البلدان العربية، يبقى كود اللون نفسه — مثل #FF5733 — مكتوبًا دائمًا بالأرقام اللاتينية والحروف اللاتينية من A إلى F، لأن معيار CSS يحدّد صراحة أن قيم الألوان السداسية عشرية تُكتب بترميز ASCII فقط، بغضّ النظر عن لغة الصفحة أو اتجاهها. هذا يعني أن أي أداة أو محرر أكواد يجب أن يتعامل مع رمز اللون ككتلة لاتينية ثابتة الاتجاه (LTR) حتى وسط نص عربي بالكامل، تمامًا كما يحدث مع عناوين URL — وهو تفصيل صغير لكنه يفسّر لماذا لا يظهر أي التباس أو انعكاس بصري عند نسخ رمز لون من هذه الأداة ولصقه داخل ورقة أنماط بلغة عربية.