أدوات تحويل الألوان: فهم HEX وRGB وRGBA وHSL وHSV والشفافية وإمكانية الوصول
ليست HEX وRGB وHSL وHSV ألواناً مختلفة بقدر ما هي إحداثيات مختلفة لوصف اللون. يمكن أن يكون تحويل HEX إلى RGB مطابقاً تماماً داخل فضاء اللون نفسه، بينما يحتاج تحويل RGBA إلى HEX إلى قرار حول Alpha: هل نحافظ على الشفافية أم ندمجها مع خلفية؟
HEX وRGB غالباً تمثيلان للقنوات نفسها
تكتب صيغة #RRGGBB ثلاث قنوات RGB ذات 8 بت باستخدام النظام السداسي عشر، حيث تتراوح القناة عادةً من 0 إلى 255. لذلك يغير HEX إلى RGB طريقة الكتابة فقط إذا كان فضاء اللون واحداً.
الاختصار #369 يساوي #336699. لكن الأرقام وحدها لا تصف فضاء اللون دائماً؛ CSS الحديث يستطيع التعبير عن ألوان أوسع من sRGB.
Alpha شفافية وليست قناة لون رابعة
يضيف RGBA قيمة Alpha التي تحدد مساهمة اللون الأمامي عند دمجه بالخلفية. اللون الأزرق شبه الشفاف يبدو مختلفاً على الأبيض والأسود. لذلك لا يستطيع HEX إلى RGBA تحديد البكسل النهائي من دون معرفة الخلفية.
تسمح CSS أيضاً بـ#RRGGBBAA. عند RGBA إلى HEX تحقق هل يحتفظ المحول بثماني خانات، أم يدمج اللون مع خلفية ثم يعيد HEX من ست خانات.
HSL سهل للتعديل لكنه ليس متساوي الإدراك
يفصل HSL الصبغة والتشبع والإضاءة، ولذلك يسهل تدوير Hue أو تخفيف Saturation. تفيد HEX إلى HSL في بناء نسخ من اللون.
لكن 50% Lightness في الأصفر لا تبدو بسطوع 50% في الأزرق. HSL تحويل هندسي مريح لقيم RGB وليس نموذجاً متساوي الخطوات للإدراك البصري.
HSV يصف قيمة مختلفة
يستخدم HSV قيمة Value التي تتبع أقوى قناة RGB، وهو شائع في Color Pickers. يساعد HEX إلى HSV عند الانتقال بين برامج تصميم مختلفة.
لا يجوز استبدال HSL وHSV بمجرد تغيير الأسماء؛ تعريف Saturation والمحور الثالث مختلف في كل منهما.
التقريب قد يمنع العودة الدقيقة
تنتج معادلات التحويل كسوراً. إذا قربت نسب HSL بشدة ثم أعدتها إلى RGB فقد تختلف القنوات بدرجة أو أكثر. احتفظ بدقة أكبر داخلياً واستخدم التقريب للعرض فقط.
وينطبق ذلك على Alpha عند التحويل بين كسر عشري وقيمة 8 بت. السياسة الثابتة في التقريب تمنع تغير القيم مع تكرار التحويل.
Wide Gamut يوسع معنى اللون
يدعم CSS Color 4 فضاءات مثل display-p3 التي تستطيع تمثيل ألوان خارج نطاق sRGB. تحويل لون كهذا إلى HEX تقليدي قد يحتاج إلى Clipping أو Gamut Mapping فيتغير المظهر.
إذا جاء اللون من برنامج احترافي فافحص Color Profile وICC قبل افتراض أن نسخ أرقام RGB وحده كافٍ.
التباين يُفحص بعد التحويل
لا تستطيع أداة التحويل وحدها الحكم على قراءة النص. تعتمد إرشادات WCAG على Relative Luminance بين النص والخلفية، وليس على قيمة Lightness في HSL. وتحتاج الشفافية إلى حساب النتيجة بعد الدمج.
كذلك لا ينبغي استخدام اللون وحده لإيصال معلومة أساسية؛ حالات الخطأ والاختيار والرسوم تحتاج عند الضرورة إلى نص أو رمز أو نمط إضافي.
حافظ على مصدر لوني واحد في Design System
احفظ قيمة Canonical واحدة لكل لون واعمل على توليد الصيغ المطلوبة منها، بدلاً من إعادة تحويل قيم مقربة مرة بعد مرة. وثق فضاء اللون وقواعد Alpha.
تساعد RGB إلى HEX في تحويل الصياغة، لكن الاختيار الصحيح ما زال يشمل التباين والهوية البصرية والحالات التفاعلية.
سير عمل موثوق
حدد الصيغة وفضاء اللون أولاً، احتفظ بالأصل، حوّل بدقة كافية، وقرر بوضوح هل تحافظ على Alpha أم تدمجه مع خلفية. ثم اختبر النتيجة في المتصفح أو التطبيق الهدف.
إذا كان اللون للنص أو عناصر الواجهة، نفذ اختبار تباين في النهاية. بهذه الطريقة تصبح RGBA إلى HEX وبقية المحولات أدوات إنتاجية موثوقة وليست مجرد حاسبات أرقام.
أسئلة شائعة عن الألوان
هل HEX أدق من RGB؟
لا. كلاهما يستطيع تمثيل قنوات 8 بت نفسها.
هل RGBA يحدد اللون المرئي النهائي؟
ليس وحده؛ الخلفية تؤثر في الدمج.
هل HSL وHSV متطابقان؟
لا، المحاور معرفة بصورة مختلفة.
هل التحويل الصحيح يضمن إمكانية الوصول؟
لا. يجب اختبار تباين الخلفية والنص وطريقة استخدام اللون.
معايير الألوان ومراجع إمكانية الوصول
- W3C — CSS Color Module Level 4
- W3C Web Accessibility Initiative — Understanding Contrast Minimum
- W3C Web Accessibility Initiative — Use of Color
- U.S. Web Design System — Color
This article is an original practical guide informed by the standards and official references above.