كيف تحدد الألوان في CSS؟

Question

Accepted Answer

يوفر CSS عدة صيغ للألوان. وتنتج جميعها نفس الألوان — الاختيار يتعلق بسهولة القراءة وما إذا كنت تحتاج إلى شفافية.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## لماذا HSL غالباً ما يكون الأكثر فائدة

يصف HSL اللون باعتباره **H**ue (0–360° على عجلة الألوان) و**S**aturation و**L**ightness — وهذا يتوافق مع كيفية تفكير البشر حول الألوان، مما يجعل الاختلافات بديهية:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

إنشاء ظل أفتح/أغمق سهل جداً — غير رقم واحد فقط. القيام بذلك باستخدام hex أو rgb يتطلب إعادة حساب جميع القنوات.

## Alpha / الشفافية

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

صيغة `/ alpha` (0 = شفاف، 1 = معتم) هي الطريقة التي تجعل الألوان شبه الشفافة، مفيدة للطبقات الملمسة والظلال. (ملاحظة: `opacity` على عنصر يتلاشى *العنصر بأكمله* بما في ذلك العناصر الفرعية — ألوان alpha تتلاشى هذا اللون فقط.)

## الصيغ الحديثة

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## لماذا يهم

معرفة الصيغ تسمح لك باختيار الأداة المناسبة: hex/rgb للألوان الفردية، **HSL/OKLCH لأنظمة التصميم** (سهلة، اختلافات الظلال بديهية)، وصيغة `/ alpha` للشفافية.

HSL بشكل خاص يجعل بناء لوحات ألوان متسقة وقابلة للتخصيص أسهل بكثير.