شرح أنواع ألوان CSS: Color Names, RGB/A, HEX, HSL/A
في هذا المقال، هنتعرف على الطرق المختلفة لتعريف الألوان في CSS كما هي موضحة في مرجع W3Schools. هنتناول كل طريقة بالترتيب: الأسماء الجاهزة، RGB وRGBA، HEX وثلاثية HEX، HSL وHSLA، مع أمثلة عملية لكل نوع.
1. أسماء الألوان الجاهزة (Color Names)
CSS يدعم حوالي 140 اسمًا قياسيًا للألوان، مثل:
Tomato DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray
مثال على الاستخدام:
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="color:Tomato;">هذا نص بلون الطماطم</p>:contentReference[oaicite:5]{index=5}
2. ألوان RGB وRGBA
تُحدد الألوان عبر ثلاثة أرقام من 0 إلى 255 تمثل الأحمر، الأخضر، والأزرق:
rgb(255, 99, 71)
أمثلة:
rgb(255, 0, 0) /* أحمر */ rgb(0, 0, 0) /* أسود */ rgb(255, 255, 255) /* أبيض */
ويمكن استخدام القيمة الرابعة للشفافية:
rgba(255, 99, 71, 0.5) /* نصف شفاف */:contentReference[oaicite:6]{index=6}
3. ألوان HEX
يتم تحديد اللون باستخدام رموز ست عشرية بصيغة:
#RRGGBB
مثال:
#ff0000 /* أحمر */ #000000 /* أسود */ #ffffff /* أبيض */
وهناك اختصار ثلاثي:
#fc9 /* مكافئ لـ #ffcc99 */ #f0f /* مكافئ لـ #ff00ff */:contentReference[oaicite:7]{index=7}
4. ألوان HSL وHSLA
تعتمد على ثلاث مكونات:
- Hue: زاوية من 0–360 (أقصى الأحمر = 0، الأخضر = 120، الأزرق = 240)
- Saturation: نسبة التشبع (%)
- Lightness: نسبة الإضاءة (%)
hsl(0, 100%, 50%) /* أحمر ساطع */ hsl(240, 100%, 50%) /* أزرق */ hsl(0, 0%, 0%) /* أسود */ hsl(0, 0%, 100%) /* أبيض */
وللشفافية:
hsla(9, 100%, 64%, 0.5) /* نصف شفاف */:contentReference[oaicite:8]{index=8}
الخاتمة
تعلمنا في هذا المقال كافة الطرق الشائعة لتعريف الألوان في CSS: باستخدام أسماء جاهزة، RGB وRGBA، HEX وثلاثية HEX، وأخيرًا HSL وHSLA. حسب الحالة التي تعمل عليها، يمكنك اختيار الأنسب لتصميمك. للمزيد من التحكم في الألوان، تابع الأدوات القادمة مثل Color Picker وColor Functions.