للألوان ثلاث صيغ شائعة، ولكل منها غرض مختلف. HEX مختصرة وتُستخدم في CSS. RGB هي ما يفهمه حاسوبك. HSL أقرب إلى عينك، وهي التي تجعل تعديل السطوع سهلاً. معرفة الفرق توفّر عليك ساعات من التجريب.

HEX: ست خانات

HEX ثلاثة أزواج: كل زوج قيمة لون واحد (أحمر، أخضر، أزرق) من 00 إلى FF. أول رقمين لكل لون هو الـ alpha في صيغة الثمانية:

بنية HEXcss
#RRGGBB     → لون كامل
#RGB         → شكل مختصر (3 خانات)
#RRGGBBAA    → مع شفافية

مثال: #FF5733
FF = 255 (الأحمر بكامل قوته)
57 = 87   (الأخضر متوسط)
33 = 51   (الأزرق ضعيف)

#FF573380 → نفس اللون بشفافية 50% (80 = 128/255 ≈ 0.5)

RGB: أرقام 0 إلى 255

نفس有色 بالضبط، لكن بصيغة رقمية يفهمها الحاسوب. لاحظ أن RGB لا توفّرalpha بشكل منفصل — transparency في RGBA:

RGB و RGBAcss
rgb(255, 87, 51)          /* معتم */
rgba(255, 87, 51, 0.5)     /* بشفافية 50% */

/* الصيغة الحديثة */
rgb(255 87 51 / 50%)        /* بلا فاصلة — أوضح */
الشكلمثالملاحظة
rgb(0,0,0)أسودالحد الأدنى
rgb(255,255,255)أبيضالحد الأقصى
rgba(255,87,51,0.5)شفاف 50%alpha من 0 إلى 1
rgb(300,0,0)غير صالحيُقصّ إلى 255 تلقائياً

HSL: الأقرب لعينك

HSL يقفّل ثلاث صفات بدل ثلاث قنوات لون. الفارق ليس شكلياً: Hue يحدد اللون (درجة على دائرة 0-360)، Saturation يحدد قوّته (رمادي إلى لون كامل)، Lightness يحدد السطوع (أسود إلى أبيض).

بنية HSLcss
hsl(9, 100%, 60%)           /* برتقالي محمّر */

H = 9        ← درجة اللون (0-360 حول دائرة الألوان)
S = 100%     ← التشبّع: 0% رمادي، 100% لون كامل
L = 60%      ← الإضاءة: 0% أسود، 50% متوسط، 100% أبيض
لماذا HSL أفضل للتعديلcss
/* مع RGB، تغيير السطوع يعني إعادة حساب كل الأرقام */
rgb(255, 87, 51)  →  أغمق

/* مع HSL، تغيّر رقماً واحداً */
hsl(9, 100%, 60%)
hsl(9, 100%, 40%)   ← أغمق، نفس اللون
hsl(9, 100%, 80%)   ← أفتح، نفس اللون
hsl(9,   0%, 50%)   ← رمادي — نفس الإضاءة تماماً

أي صيغة تستعمل؟

  • HEX في CSS: لأنها مختصرة وواضحة ولا تتعارض مع طول الملف.
  • RGB في JavaScript: لأن Canvas APIs و WebGL يطلبونها بهذا الشكل.
  • HSL في متغيّرات CSS: عند بناء ألوان ديناميكية أو أنظمة ألوان متدرجة.
  • RGBA أو alpha في HEX: كلما احتجت شفافية، المهم كتابة الصيغة الصحيحة.
أنماط عمليةcss
:root {
  --brand: #ff5733;
  --brand-dim: hsl(9 100% 40%);
  --overlay: rgba(0, 0, 0, 0.6);
  --glass: #ffffff26;   /* أبيض بـ 15% شفافية */
}

التباين: القاعدة العملية الأخيرة

مهمتك ليست فقط تحويل اللون، بل اختيار لون نص مقروء فوقه. القاعدة التي توفّر عليك الحساب: خلفية فاتحة (Lightness فوق 50%) تأخذ نصاً غامقاً، وخلفية غامقة تأخذ نصاً فاتحاً. الباقي تفصيل ذوق.