الألوان في CSS — تصميم CSS

الألوان في CSS

طرق كتابة اللون

.a { color: tomato; }                    /* اسم: ~150 اسماً جاهزاً */
.b { color: #1e40af; }                   /* hex: أحمر أخضر أزرق بالست عشري */
.c { color: #1e40af80; }                 /* hex بشفافية (آخر خانتين) */
.d { color: rgb(30 64 175); }            /* rgb: كل قناة 0–255 */
.e { color: rgb(30 64 175 / 50%); }      /* مع شفافية */
.f { color: hsl(224 71% 40%); }          /* hsl: درجة، تشبع، إضاءة */

الصيغة الحديثة تفصل القيم بمسافات والشفافية بعد /. ستجد كثيراً الصيغة القديمة rgba(30, 64, 175, 0.5) وهي ما زالت صحيحة.

لماذا HSL مريح؟

| المكوّن | المدى | المعنى |

|---|---|---|

| Hue (الدرجة) | 0–360 | موقع اللون على الدائرة: 0 أحمر، 120 أخضر، 240 أزرق |

| Saturation (التشبع) | 0–100% | 0% رمادي، 100% لون صارخ |

| Lightness (الإضاءة) | 0–100% | 0% أسود، 50% اللون نفسه، 100% أبيض |

لصنع درجات من نفس اللون (زر عادي، عند المرور، معطّل) غيّر الإضاءة فقط:

.btn { background: hsl(224 71% 40%); }
.btn:hover { background: hsl(224 71% 32%); }   /* أغمق قليلاً */
.btn:disabled { background: hsl(224 20% 70%); }

أين تُستخدم الألوان؟

color (النص)، background-color، border-color، outline-color، box-shadow، text-decoration-color. والكلمة currentColor تعني "لون النص الحالي" — مفيدة للأيقونات والحدود التي تتبع النص.

الشفافية: opacity أم alpha؟

- opacity: 0.5 يجعل العنصر كله شفافاً (بما فيه النص والأبناء).

- لون بشفافية rgb(0 0 0 / 50%) يجعل تلك الخاصية فقط شفافة — لخلفية شفافة ونص واضح استخدم هذا.

التدرجات

التدرج صورة، فيُكتب في background أو background-image (لا في background-color):

.hero { background: linear-gradient(135deg, #6366f1, #ec4899); }
.spot { background: radial-gradient(circle, #fde68a, transparent 70%); }
.stripes { background: linear-gradient(to left, navy 50%, gold 50%); }   /* حد حاد */

التباين: القراءة أولاً

نص رمادي فاتح على أبيض قد يبدو أنيقاً لكنه صعب القراءة لكثيرين. معيار الوصولية (WCAG) يطلب نسبة تباين 4.5:1 على الأقل للنص العادي و 3:1 للنص الكبير. أدوات المطور في Chrome تعرض نسبة التباين عند النقر على مربع اللون.

لوحة ألوان محدودة

اختر لوناً أساسياً، ولوناً ثانوياً، ودرجات رمادية، وألوان الحالات (نجاح، تحذير، خطأ) — وخزّنها في متغيرات (درس المتغيرات). الاتساق أهم من كثرة الألوان.

تمرين

اختر لوناً أساسياً بصيغة hsl، واصنع منه 3 درجات للزر (عادي، hover، معطّل)، وخلفية بطاقة بشفافية 10% من نفس اللون. تحقق من تباين نص الزر في أدوات المطور.

/* أسماء الألوان */
.red-text {
    color: red;
    background-color: lightcoral;
}

/* Hexadecimal */
.hex-example {
    color: #3498db;         /* أزرق */
    background: #2ecc71;    /* أخضر */
    border-color: #e74c3c;  /* أحمر */
}

/* RGB */
.rgb-example {
    color: rgb(52, 152, 219);
    background: rgb(46, 204, 113);
}

/* RGBA مع شفافية */
.rgba-example {
    background: rgba(0, 0, 0, 0.5);  /* أسود 50% شفاف */
    color: rgba(255, 255, 255, 0.9);
}

/* HSL */
.hsl-example {
    color: hsl(210, 79%, 46%);       /* أزرق */
    background: hsl(145, 63%, 49%);  /* أخضر */
}

/* تدرج لوني */
.gradient {
    background: linear-gradient(
        45deg, 
        #667eea, 
        #764ba2
    );
}