قيم الألوان في CSS
الألوان المسمّاة تكفي للبداية. العلامات والتصاميم تحتاج قيماً دقيقة — تركواز محدد، طبقة ناعمة، صبغة يمكن تحريكها قليلاً. ذلك يأتي من صيغ قيمة اللون: hex وrgb() / rgba() وhsl() / hsla().
ما هي قيمة اللون؟
قيمة اللون هي ما تكتبه بعد خاصية تقبل لوناً — مثلاً بعد color: أو لاحقاً background-color:. نفس الخاصية السابقة؛ طرق أغنى لكتابة اللون. الكلمات المسمّاة ما زالت قيماً. اليوم نضيف الصيغ الرقمية التي ستستخدمها أسبوعياً.
الصيغ بنظرة
اختر الصيغة المناسبة للمهمة. لا تحتاج كل النحو في اليوم الأول — تعرّف على الخريطة ثم تمرّن على الثلاث اليومية.
📊 صيغ قيم الألوان في CSS
| الصيغة | مثال | الأفضل لـ |
|---|---|---|
| مسمّاة | teal |
عروض سريعة، تعليم، مسودات خشنة |
| Hex | #0f766e |
أدوات التصميم، رموز العلامة، نسخ من Figma |
rgb() / rgba() |
rgb(15 118 110) / rgba(15, 118, 110, 0.85) |
التفكير بالقنوات، الشفافية بالألفا |
hsl() / hsla() |
hsl(174 77% 25%) |
ضبط الصبغة/الإضاءة دون مغادرة العائلة |
ألوان hex
قيم hex تبدأ بـ # ثم أرقام hex (0–9، a–f). الأشكال الشائعة: ستة أرقام #rrggbb (كاملة) وثلاثة #rgb (قصيرة — كل رقم يُضاعف). حالة الأحرف لا تهم.
Hex على النص وملاحظة ناعمة
cssh1 {
color: #0f172a;
}
.note {
color: #0f766e;
}كيف تقرأ #0f766e؟
الأزواج أحمر وأخضر وأزرق: 0f / 76 / 6e. تطبيقات التصميم تصدّر هذا النص عادةً — الصقه في CSS كما هو وأبقِ #.
rgb() وrgba()
rgb() يمزج قنوات الأحمر والأخضر والأزرق من 0 إلى 255 (أو نسباً في النحو الحديث). أضف الألفا بـ rgba() أو قيمة رابعة ليصبح اللون شفافاً جزئياً.
قنوات RGB وتلاشي RGBA
css.lead {
color: rgb(51, 65, 85);
}
.overlay-label {
color: rgba(15, 118, 110, 0.9);
}الألفا بجملة
الألفا شفافية ذلك اللون — 1 (أو 100%) مصمت؛ القيم الأقل تسمح برؤية ما خلفه. ليست مثل إزالة العنصر من التخطيط.
hsl() لتفكير الصبغة
hsl() يستخدم الصبغة (زاوية على عجلة الألوان) والتشبع (%) والإضاءة (%). مفيد حين تريد «نفس العائلة، أفتح قليلاً» دون إعادة حساب hex يدوياً.
لمسة HSL يمكن تحريكها
css.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}عادة التحريك
أبقِ الصبغة، ارفع الإضاءة لنص أهدأ، أو اخفضها لعنوان أقوى. التشبع يتحكم بحيوية اللون.
أي صيغة تستخدم؟
- Hex — الافتراضي عند النسخ من ملف تصميم أو لوحة علامة
rgb()/rgba()— حين تهتم بالقنوات أو تحتاج ألفا بسرعةhsl()— حين تستكشف أو تضبط عائلة ألوان مرتبطة- مسمّاة — ما زالت مناسبة للمسودات والعروض التعليمية
كلها صالحة علىcolorاليوم؛ ستعيد استخدامها على الخلفيات لاحقاً.
جرّبها بنفسك
- صفحة بـ
h1و.leadو.note. - العنوان بـ hex (
#0f172a) والـ lead بـrgb(51, 65, 85)والملاحظة بـ#0f766e. - أضف
.badgeبـhsl(174, 77%, 28%)وحد HSL أغمق بنفس الصبغة. - ليّن ملصقاً بـ
rgba(15, 118, 110, 0.75)— يجب أن يبدو أقل صلابة من1. - اختياري: أعد كتابة hex المختصر إن تضاعفت الأرقام حقاً؛ وإلا أبقِ ستة أرقام.
أخطاء شائعة
- نسيان
#قبل hex (0f766eوحده ليس لوناً صالحاً) - حروف خارج
a–fفي hex - قنوات RGB خارج
0–255(أو خلط وحدات فوضوي) - توقع أن الألفا يخفي مساحة التخطيط مثل
display: none - اعتبار كل صيغة «أسبق» في التتابع — اختيار الصيغة لا يغيّر الأسبقية
باختصار
- قيم اللون صيغ لنفس الخصائص التي تقبل لوناً
- Hex صيغة اللصق اليومية من التصميم
rgb()/rgba()يكشفان القنوات والألفاhsl()يساعدك على التفكير بالصبغة والتشبع والإضاءة- الألوان المسمّاة ما زالت صالحة؛ اختر الصيغة المناسبة
- تمرّن على hex وصيغة عملية واحدة (
rgbaأوhsl) حتى تشعر بهما طبيعياً
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى