شرح صيغ الألوان في CSS — كيف تختار بين HEX و RGB و HSL باحتراف؟

في الدرس السابق تعلمت أساس الألوان في CSS باستخدام color وbackground-color. الآن سننتقل لمرحلة أهم: كيف نكتب اللون نفسه بصيغ مختلفة.

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

ما هي صيغ الألوان في CSS؟

CSS تدعم عدة طرق لتمثيل نفس اللون. الأكثر استخداماً في المشاريع الحديثة:

• HEX مثل: #ff5733
• RGB مثل: rgb(255, 87, 51)
• RGBA مثل: rgba(255, 87, 51, 0.5)
• HSL مثل: hsl(11, 100%, 60%)
• HSLA مثل: hsla(11, 100%, 60%, 0.5)

التعريف البسيط: صيغ الألوان في CSS هي طرق مختلفة لكتابة اللون نفسه حسب حاجتك للدقة أو الشفافية أو سهولة التعديل.

صيغة HEX في CSS

صيغة HEX تبدأ بـ # وتتكون غالباً من 6 رموز: RRGGBB (أحمر، أخضر، أزرق بالنظام الست عشري).

h2 {
    color: #ff5733;
}

ماذا يفعل هذا الكود؟ يجعل كل عناوين h2 بلون برتقالي مائل للأحمر.

سطر بسطر:

• #ff5733: تمثيل اللون بقيم Hex.
• كل زوج يمثل شدة قناة لونية من 00 إلى ff.

النتيجة المتوقعة: لون ثابت ودقيق وسهل النسخ من أدوات التصميم.

خطأ شائع: كتابة 5 رموز بدل 6 (مثل #ff573) فيفشل اللون.

صيغة RGB في CSS

RGB تعني Red, Green, Blue. كل قناة تأخذ قيمة من 0 إلى 255.

p {
    color: rgb(255, 87, 51);
}

ماذا يفعل هذا الكود؟ يلوّن الفقرة بنفس اللون السابق ولكن بصيغة RGB.

سطر بسطر:

• 255: شدة الأحمر.
• 87: شدة الأخضر.
• 51: شدة الأزرق.

النتيجة المتوقعة: نفس اللون تقريباً، لكن بصيغة رقمية واضحة.

خطأ شائع: وضع رقم خارج المجال مثل rgb(300, 0, 0).

صيغة RGBA في CSS (الشفافية)

RGBA هي RGB + قناة ألفا alpha للتحكم بالشفافية. قيمة الألفا بين 0 و1.

.box {
    background-color: rgba(255, 0, 0, 0.5);
}

ماذا يفعل هذا الكود؟ يضيف خلفية حمراء شبه شفافة بنسبة 50%.

سطر بسطر:

• أول 3 أرقام: قنوات RGB.
• 0.5: مستوى الشفافية (نصف شفاف).

النتيجة المتوقعة: يمكنك رؤية الخلفية خلف العنصر جزئياً.

خطأ شائع: كتابة ألفا بقيمة 50 بدل 0.5.

صيغة HSL في CSS

HSL أقرب لفهم الإنسان للون: Hue (درجة)، Saturation (تشبع)، Lightness (إضاءة).

button {
    background-color: hsl(220, 80%, 55%);
    color: white;
}

ماذا يفعل هذا الكود؟ يعطي الزر لوناً أزرق يمكن تعديله بسهولة عبر التشبع والإضاءة.

سطر بسطر:

• 220: درجة اللون على عجلة الألوان.
• 80%: تشبع اللون.
• 55%: إضاءة اللون.

النتيجة المتوقعة: تحكم بصري ممتاز عند إنشاء درجات من نفس اللون.

خطأ شائع: نسيان علامة % في saturation/lightness.

مقارنة سريعة: HEX vs RGB vs HSL في CSS

الصيغة	أفضل استخدام	مثال
HEX	الأكثر شيوعاً ونسخاً من أدوات التصميم	#2563eb
RGB / RGBA	مفيد عند الحاجة للشفافية	rgba(37, 99, 235, 0.4)
HSL / HSLA	توليد درجات أفتح/أغمق بسهولة	hsl(220, 80%, 55%)

أخطاء شائعة في صيغ الألوان في CSS

١) قيم غير صحيحة: مثل rgb(500, 10, 10) أو #12abz9.

٢) نسيان الشفافية: استخدام rgb بينما المطلوب rgba.

٣) خلط الصيغ دون نظام: الأفضل اعتماد أسلوب واضح داخل المشروع.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما الفرق بين HEX و RGB في CSS؟

كلاهما يعبّر عن اللون نفسه. HEX مختصر وشائع، وRGB أوضح رقمياً خاصة عند حساب القيم.

متى أستخدم RGBA في CSS؟

عند الحاجة إلى شفافية، مثل خلفية بطاقة فوق صورة أو تأثير Overlay.

ما الفرق بين HSL و RGB في CSS؟

HSL أسهل لتعديل التشبع والإضاءة، بينما RGB يعتمد على مزج القنوات الثلاث مباشرة.

هل HSLA أفضل من RGBA في CSS؟

ليس أفضل مطلقاً؛ كلاهما يدعم الشفافية. الاختيار يعتمد على ما هو أسهل لفهمك وتعديلك للألوان.

لماذا لون CSS لا يظهر كما هو في التصميم؟

قد يكون السبب اختلاف الشاشة، أو شفافية متداخلة، أو وجود قاعدة CSS أخرى أقوى (specificity).