شرح صيغ الألوان: HEX و RGB و HSL
صيغ HEX و RGB و HSL تصف الألوان نفسها بطرق مختلفة. إليك ما تعنيه كل واحدة ومتى تستخدمها في تصاميمك.
إذا سبق لك تنسيق موقع، فقد صادفت أكواد ألوان مثل #4f46e5. لكنها مجرد واحدة من ثلاث طرق شائعة لوصف اللون على الشاشة. معرفة الثلاثة تجعلك أسرع وأكثر مرونة.
HEX — كلاسيكية الويب
كود HEX قيمة من ست خانات مثل #4f46e5، حيث يمثّل كل زوج الأحمر والأخضر والأزرق. إنها مختصرة ومدعومة عالميًا، ولهذا هي الصيغة الأكثر شيوعًا في CSS وأدوات التصميم.
RGB — كيف تعمل الشاشات فعلًا
تصف RGB اللون بثلاثة أرقام من 0–255 للأحمر والأخضر والأزرق، مثل rgb(79, 70, 229). تتوافق مباشرة مع كيفية مزج الشاشة للضوء، وتضيف صيغة RGBA الشفافية.
HSL — المفضّلة لدى المصمّمين
HSL اختصار للصبغة والتشبّع والإضاءة — مثل hsl(243, 75%, 59%). إنها الأكثر بديهية للبشر: لجعل اللون أفتح ترفع الإضاءة فقط، ولتغييره تبدّل الصبغة. هذا يجعل بناء لوحات الألوان أسهل بكثير.
التحويل بينها
نادرًا ما تحتاج للتحويل يدويًا. يعرض محوّل الألوان قيم HEX و RGB و HSL لأي لون جنبًا إلى جنب، ويتيح لك مولّد التدرّجات مزج اثنين منها في كود CSS جاهز للنسخ.
أيها تستخدم؟
استخدم HEX للألوان الثابتة السريعة للعلامة التجارية؛ وRGB (أو RGBA) عندما تحتاج شفافية؛ وHSL عندما تريد تعديل أو توليد درجات مرتبطة. كلها تنتج الألوان نفسها — اختر ما يسهّل مهمتك الحالية.
اللون نفسه بثلاث صيغ
لنأخذ اللون البنفسجي #7c3aed. بصيغة RGB يكتب rgb(124, 58, 237)، وبصيغة HSL يقارب hsl(263, 82%, 58%). هذه ليست ألواناً مختلفة، بل ثلاث طرق لوصف النتيجة نفسها ضمن فضاء sRGB.
تقسم HEX الأحمر والأخضر والأزرق إلى أزواج ست عشرية، وتعرض RGB القنوات بأرقام من 0 إلى 255، بينما تنظم HSL اللون إلى درجة وتشبع وإضاءة. لذلك يكون تعديل الإضاءة في HSL أسهل غالباً من تغيير ثلاث قنوات يدوياً.
الشفافية وقناة Alpha
تسمح CSS الحديثة بصيغ مثل rgb(124 58 237 / 0.5) أو HEX من ثمانية أرقام مثل #7c3aed80. اللون الشفاف يختلط بالخلفية، لذلك اختبره على الأسطح الفاتحة والداكنة الحقيقية.
أخطاء شائعة
- لا تقرب القيم الوسيطة بقوة عند التحويل المتكرر.
- تذكر أن الطباعة CMYK والشاشات RGB نموذجان مختلفان.
- اختبر التباين؛ مطابقة ألوان العلامة لا تضمن نصاً مقروءاً.
- احتفظ بقيمة أساسية واحدة في نظام التصميم.
لا تعتمد على اللون وحده لتوضيح حالة أو خطأ؛ أضف نصاً أو رمزاً حتى يبقى المعنى مفهوماً للجميع.
كيف تتحول HEX إلى RGB؟
في HEX من ستة أرقام، الزوج الأول للأحمر والثاني للأخضر والثالث للأزرق. يتراوح كل زوج من 00 إلى ff، أي 0 إلى 255 عشرياً. في #7c3aed تتحول 7c إلى 124 و3a إلى 58 وed إلى 237، لذلك تكون RGB هي rgb(124, 58, 237).
الصيغة الثلاثية اختصار: #abc تعني #aabbcc، ولا تمثل كل الألوان الممكنة.
بناء درجات بواسطة HSL
Hue زاوية على دائرة الألوان، وSaturation شدة اللون، وLightness الحركة بين الأسود والأبيض. لإنشاء حالة hover أو ضغط، حافظ على الدرجة وغير الإضاءة بحذر. خفض التشبع يصنع خلفية هادئة من العائلة نفسها.
الأرقام المتساوية لا تعني سطوعاً بصرياً متساوياً؛ الأصفر يبدو أسطع من الأزرق غالباً. افحص النتيجة واختبر التباين.
التباين علاقة بين لونين
لا توجد درجة وصول للون منفرد؛ النتيجة تعتمد على لون النص والخلفية معاً. يحتاج النص العادي تبايناً أقوى من النص الكبير، وتحتاج العناصر التفاعلية مؤشراً واضحاً للتركيز ولا يجوز أن تعتمد على اللون وحده.
سير عمل للوحة ألوان
- احفظ اللون الأساسي كرمز في نظام التصميم.
- أنشئ درجات للأسطح والحالات.
- اختبر أحجام النص الحقيقية على كل خلفية.
- راجع hover والتركيز والتعطيل والخطأ والوضع الداكن.
- وثق التركيبات المعتمدة للحفاظ على الاتساق.
أسئلة شائعة
هل حالة أحرف HEX تغير اللون؟
لا، #7C3AED و#7c3aed القيمة نفسها. الاختيار مجرد تنسيق للفريق.
لماذا يختلف اللون بين شاشتين؟
المعايرة والسطوع وملف الألوان والإضاءة ونوع الشاشة تؤثر على الإدراك.
هل HSL تمثل RGB كلها؟
في CSS القياسية هما إحداثيات مختلفة ضمن sRGB، لكن التقريب المتكرر قد يصنع فرقاً صغيراً.
ما القيمة الرابعة؟
هي Alpha للشفافية، والنتيجة المرئية تعتمد على الخلفية.
أي صيغة أحفظ في نظام التصميم؟
اختر صيغة أساسية واحدة وأنشئ البدائل عند الحاجة. الرموز الدلالية أهم من اسم الصيغة.
هل المحول يختبر الوصول؟
لا. يجب مقارنة النص والخلفية ومراجعة التركيز والحالات والإشارات غير اللونية.