HTML: ألوان HTML

يمكن تمثيل الألوان في HTML بعدة طرق. إتقان طرق تمثيل الألوان المختلفة يمنحك تحكمًا مرنًا ودقيقًا في كل بكسل في تصميم الويب الخاص بك.

1. نظرة عامة على تمثيل الألوان

هناك ثلاث طرق رئيسية لتمثيل الألوان في HTML و CSS: أسماء الألوان و النظام الست عشري و RGB. جميعها يمكنها تعريف الألوان، لكن لكل منها حالات استخدام خاصة:

▶ مثال

<!-- الثلاثة تمثل خلفية حمراء -->
<div style="background-color: red;">اسم اللون: red</div>
<div style="background-color: #FF0000;">ست عشري: #FF0000</div>
<div style="background-color: rgb(255,0,0);">RGB: rgb(255,0,0)</div>

2. أسماء الألوان

يدعم HTML أكثر من 140 اسم لون قياسي. الأكثر استخدامًا تشمل: red، blue، green، black، white، gray، orange، purple، yellow، وغيرها. استخدام أسماء الألوان هو الأكثر بديهية — لا حاجة لحفظ قواعد الترميز.

(1) أسماء الألوان الشائعة

3. النظام الست عشري (Hex)

تبدأ الألوان الست عشرية بـ # بالصيغة #RRGGBB، حيث يمثل RR قيمة الأحمر، GG قيمة الأخضر، BB قيمة الأزرق، بمدى من 00 إلى FF (ست عشري). إذا كان لكل زوج أرقام متطابقة، يمكنك الاختصار إلى ثلاثة أحرف #RGB.

(1) ألوان Hex الشائعة

<!-- ست عشري بستة أرقام -->
<div style="background-color: #FF5733;">#FF5733 (برتقالي)</div>
### ▶ مثال
<div style="background-color: #33A1FF;">#33A1FF (أزرق)</div>
<div style="background-color: #2ECC71;">#2ECC71 (أخضر)</div>

<!-- اختصار ثلاثة أحرف (عندما يكون كل زوج متطابقًا) -->
<div style="background-color: #F00;">#F00 يساوي #FF0000 (أحمر)</div>
<div style="background-color: #0F0;">#0F0 يساوي #00FF00 (أخضر)</div>
<div style="background-color: #00F;">#00F يساوي #0000FF (أزرق)</div>

4. RGB و RGBA

دالة rgb(red, green, blue) تستخدم قيمًا عشرية من 0 إلى 255 لتمثيل القنوات الأحمر والأخضر والأزرق. مقارنة بالنظام الست عشري، RGB أقرب للفهم البشري البديهي للأرقام. rgba() تضيف قناة شفافية Alpha فوق RGB.

(1) قيم RGB وتطابق الألوان

▶ مثال

<div style="background-color: rgb(255, 99, 71);">
rgb(255, 99, 71) — طماطم
</div>
<div style="background-color: rgb(60, 179, 113);">
rgb(60, 179, 113) — أخضر بحري متوسط
</div>

<!-- rgba تضيف شفافية، المعامل الأخير 0~1 -->
<div style="background-color: rgba(255, 0, 0, 0.3);">
أحمر شبه شفاف (عتامة 30%)
</div>
<div style="background-color: rgba(0, 0, 255, 0.6);">
أزرق شبه شفاف (عتامة 60%)
</div>

5. HSL

hsl(hue, saturation, lightness) هو نموذج ألوان يتوافق بشكل أفضل مع الحدس البشري. Hue هي زاوية اللون (0-360 درجة)، Saturation هي الكثافة (نسبة مئوية)، Lightness هي السطوع (نسبة مئوية). وبالمثل، hsla() تدعم الشفافية.

(1) عجلة ألوان HSL

(2) تعديلات الكثافة والسطوع

▶ مثال

<!-- أمثلة مزج ألوان HSL -->
<div style="background-color: hsl(0, 100%, 50%);">
hsl(0, 100%, 50%) — أحمر نقي
</div>
<div style="background-color: hsl(120, 100%, 50%);">
hsl(120, 100%, 50%) — أخضر نقي
</div>
<div style="background-color: hsl(240, 100%, 50%);">
hsl(240, 100%, 50%) — أزرق نقي
</div>
<div style="background-color: hsl(200, 80%, 60%);">
hsl(200, 80%, 60%) — أزرق ناعم
</div>

<!-- hsla تضيف شفافية -->
<div style="background-color: hsla(0, 100%, 50%, 0.4);">
hsla(0, 100%, 50%, 0.4) — أحمر شبه شفاف
</div>

❓ أسئلة شائعة

📖 ملخص

• أسماء الألوان (مثل red، blue): بسيطة وبديهية، لكن محدودة الدقة
• النظام الست عشري (مثل #FF5733): أكثر طرق الترميز الدقيق شيوعًا في تطوير الويب
• RGB / RGBA: rgb() تستخدم 0-255 لثلاث قنوات، rgba() تضيف شفافية
• HSL / HSLA: hsl() تستخدم hue/saturation/lightness لمزج الألوان، hsla() تضيف شفافية
• قناة Alpha (RGBA/HSLA) تمكن الشفافية الجزئية، بقيم من 0 (شفاف) إلى 1 (معتم)

📝 تمارين

1. لوحة ألوان: أنشئ ثلاث كتل ألوان باستخدام ثلاث طرق مختلفة لتمثيل الألوان (اسم لون، ست عشري، RGB). يجب أن تكون كل كتلة 100×100 بكسل، معروضة جنبًا إلى جنب.
2. تدرج الشفافية: استخدم rgba() لإنشاء تأثير تدرج أفقي حيث تنتقل الخلفية من معتم بالكامل إلى شفاف بالكامل (تلميح: استخدم background: linear-gradient()).

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن