| النظام أو المتغير | طريقة التركيب والصياغة البرمجية | الميزة التنافسية |
|---|---|---|
| Hex | يعتمد على ستة رموز تبدأ بهاشتاج لتمثيل الألوان الأساسية كما يقبل ثمانية رموز لإضافة الشفافية | النظام الأكثر شهرة واستخداماً في الويب ويمتاز باختصاراته السريعة مثل كود اللون الأزرق الشهير |
| RGB | يعتمد على دمج الألوان الثلاثة الأساسية الأحمر والأخضر والأزرق بقيم تتراوح من صفر إلى 255 | نظام دقيق جداً والصياغة الحديثة منه تتيح إضافة الشفافية باستخدام علامة المائلة المتبوعة بالنسبة المئوية |
| HSL | يعتمد على تحديد درجة اللون بزاوية الدائرة ثم نسبة التشبع المئوية ثم نسبة الإضاءة المئوية | النظام الأقرب لطبيعة تفكير المصممين حيث يسهل عليك تفتيح اللون أو تغميقه بمجرد تعديل رقم الإضاءة فقط |
| oklch و oklab | أنظمة ألوان متطورة تعتمد على الرياضيات لمحاكاة طريقة إدراك العين البشرية الحقيقية للألوان | تنتج تدرجات لونية غاية في النعومة والجمال وتمنع بهتان الألوان عند دمجها وهي المستقبل في التصميم الاحترافي |
| currentColor | متغير ذكي يأخذ قيمته تلقائياً من لون النص الحالي المحدد في خاصية color للعنصر | يغنيك عن تكرار كتابة الألوان ومفيد جداً لتلوين حدود الصناديق وأيقونات الـ SVG لتتغير تلقائياً بتغير لون النص |
CSS تدعم أنظمة ألوان متعددة:
**1. Hex (ست عشري):** `#rrggbb` أو `#rgb` (اختصار). مثل `#3b82f6`. مع شفافية: `#rrggbbaa` مثل `#3b82f680`.
**2. RGB:** `rgb(R, G, B)` — قيم من 0 إلى 255. `rgba(R, G, B, A)` — مع شفافية 0 إلى 1. الصياغة الحديثة: `rgb(59 130 246 / 50%)`
**3. HSL:** `hsl(H, S%, L%)` — أكثر طبيعية للتصميم: - H: درجة اللون (0-360) - S: التشبع (0% رمادي، 100% كامل) - L: الإضاءة (0% أسود، 100% أبيض)
**4. oklch / oklab:** أنظمة ألوان حديثة تُنتج تدرجات أجمل وأكثر اتساقاً إدراكياً.
**5. currentColor:** قيمة خاصة تأخذ لون الخاصية color الحالية. مفيدة جداً لـ SVG وborder.
| 1 | /* Hex */ |
| 2 | color: #3b82f6; |
| 3 | background: #3b82f680; /* 50% شفافية */ |
| 4 | |
| 5 | /* RGB / RGBA */ |
| 6 | color: rgb(59 130 246); |
| 7 | background: rgb(59 130 246 / 0.1); |
| 8 | |
| 9 | /* HSL — أفضل للتصميم */ |
| 10 | color: hsl(217 91% 60%); |
| 11 | background: hsl(217 91% 60% / 0.1); |
| 12 | |
| 13 | /* currentColor */ |
| 14 | border-color: currentColor; |
مثال 1: نظام ألوان متسق بـ HSL
| 1 | :root { |
| 2 | /* لون أساسي بدرجات إضاءة مختلفة */ |
| 3 | --blue-50: hsl(217 91% 97%); |
| 4 | --blue-100: hsl(217 91% 91%); |
| 5 | --blue-300: hsl(217 91% 75%); |
| 6 | --blue-500: hsl(217 91% 60%); |
| 7 | --blue-700: hsl(217 91% 42%); |
| 8 | --blue-900: hsl(217 91% 20%); |
| 9 | } |
| 10 | |
| 11 | .btn-primary { |
| 12 | background: var(--blue-500); |
| 13 | color: white; |
| 14 | } |
| 15 | .btn-primary:hover { background: var(--blue-700); } |