الألوان في CSS: الدليل الشامل (الخاصية color)

لأن هذه الخاصية تتحكم في "اللون الأمامي" (Foreground Color) للعنصر. هذا يعني أنها لا تلون النص فحسب، بل تلون أيضاً:

• النصوص (الأحرف والكلمات).
• الخطوط التي توضع تحت الكلام (Text Decoration) افتراضياً.
• حدود العنصر (Borders) إذا لم تحدد لوناً خاصاً لها.

/* هذا الكود سيجعل الفقرات تظهر باللون الأزرق */
p {
    color: blue; 
    /* ملاحظة: لا نستخدم text-color أبداً */
}

h1 {
    color: red;
}

أسهل طريقة، وهي كتابة اسم اللون بالإنجليزية. المتصفحات تدعم 140 اسماً معيارياً.

• أمثلة شائعة: red, green, blue, black, white.
• أمثلة مميزة: gold (ذهبي), salmon (لون السلمون), crimson (قرمزي).
• العيوب: محدودة جداً. لا يمكنك ضبط درجة اللون بدقة. هل تريد "أحمر فاتح قليلاً"؟ لا يوجد اسم لذلك، يجب استخدام الأكواد الرقمية.

يتكون الكود من 6 خانات: #RRGGBB.

• RR (Red): أول خانتين لدرجة الأحمر.
• GG (Green): الخانتين في الوسط لدرجة الأخضر.
• BB (Blue): آخر خانتين لدرجة الأزرق.

الأرقام المستخدمة ليست من 0-9 فقط، بل نستخدم الحروف أيضاً لتمثيل الأرقام الكبيرة:
(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F).
حيث 0 هو الأقل (بدون لون)، و F هو الأقصى (لون كامل).

• #000000: (R=00, G=00, B=00) = لا يوجد ضوء = أسود.
• #FFFFFF: (R=MAX, G=MAX, B=MAX) = كل الأضواء = أبيض.
• #FF0000: (R=MAX, G=00, B=00) = أحمر فقط = أحمر صافي.

الاختصار (Shorthand): إذا تكررت الأرقام، يمكن اختصارها لـ 3 خانات.
#CC00AA تصبح #C0A.

نكتب الكود هكذا: rgb(red, green, blue).

نضع رقم من 0 إلى 255 في كل خانة.

• 0: اللمبة مطفأة.
• 255: اللمبة مضاءة بأقصى قوة.

مثال للخلط: إذا خلطت الأحمر (255) مع الأخضر (255) بدون أزرق (0)، ستعطيك الشاشة لوناً أصفر rgb(255, 255, 0).

الصيغة: hsl(Hue, Saturation, Lightness)

1. Hue (الصبغة) - عجلة الألوان

قيمة من 0 إلى 360 (مثل درجات الدائرة).

• 0 أو 360: أحمر.
• 120: أخضر.
• 240: أزرق.

2. Saturation (التشبع) - كثافة اللون

نسبة مئوية %.

• 0%: رمادي (اللون ميت).
• 100%: اللون كامل وحيوي (Full Color).

3. Lightness (الإضاءة) - السطوع

نسبة مئوية %.

• 0%: أسود (ظلام دامس).
• 50%: اللون الطبيعي.
• 100%: أبيض (سطوع كامل).

/* اللون الأساسي: أزرق */
.box-main { 
    background-color: hsl(240, 100%, 50%); 
}

/* أريد نفس الأزرق لكن أغمق؟ فقط قلل الإضاءة */
.box-dark { 
    background-color: hsl(240, 100%, 30%); 
}

/* أريد نفس الأزرق لكن فاتح جداً؟ زود الإضاءة */
.box-light { 
    background-color: hsl(240, 100%, 80%); 
}

نضيف حرف A في النهاية، والذي يرمز لـ (Alpha). هذا الرقم يكون بين 0 (شفاف تماماً) و 1 (معتم تماماً).

• rgba(255, 0, 0, 0.5): أحمر بنسبة شفافية 50%.
• hsla(240, 100%, 50%, 0.2): أزرق شفاف جداً (تظهر الخلفية بوضوح).
• الميزة الهامة: الشفافية هنا تطبق على اللون فقط، ولا تؤثر على النصوص المكتوبة داخل العنصر. النص يظل واضحاً ومقروءاً.

هذه خاصية منفصلة في CSS: opacity: 0.5.

الخطر: هذه الخاصية تجعل العنصر بالكامل شفافاً، بما في ذلك النصوص والصور والأزرار الموجودة داخله. سيصبح كل شيء "شبحياً" وصعب القراءة.

/* الطريقة الصحيحة للخلفيات الشفافة */
.overlay {
    /* لون أسود شفاف، النص بداخله سيظل أبيض ناصع */
    background-color: rgba(0, 0, 0, 0.7); 
    color: white;
}

/* الطريقة التي تؤثر على المحتوى (استخدمها بحذر) */
.ghost-box {
    background-color: black;
    color: white;
    /* النص سيصبح باهتاً أيضاً! */
    opacity: 0.5; 
}