شرح الألوان في HTML بالعربي — HEX وRGB وHSL بالتفصيل

الألوان هي ما تُميّز موقعاً جميلاً عن موقع ممل. في HTML يمكنك تحديد لون أي عنصر بأربع طرق مختلفة. كل طريقة لها استخداماتها ومزاياها — وستتعلمها هنا بالكامل.

أين تُستخدم الألوان في HTML؟ في خاصية style مباشرة على العناصر (سنتعلم CSS لاحقاً للتحكم الكامل في الألوان). مثلاً: <p style="color: red;"> أو <div style="background-color: #1e90ff;">

الطريقة الأولى: أسماء الألوان (Color Names)

HTML يدعم أكثر من 140 اسماً قياسياً للألوان. يمكنك استخدامها مباشرة بالكتابة الإنجليزية بدون حفظ أكواد.

<p style="color: red;">نص أحمر</p>
<p style="color: DodgerBlue;">نص أزرق</p>
<p style="background-color: Tomato; color: white;">خلفية طماطم!</p>
<p style="color: MediumSeaGreen;">نص أخضر متوسط</p>

بعض الألوان الشائعة بأسمائها:

الطريقة الثانية: قيم HEX — الأكثر شيوعاً

HEX اختصار لـ Hexadecimal (النظام السداسي عشري). هي الطريقة الأكثر استخداماً بين مطوري الويب. تبدأ بـ # متبوعة بـ 6 أرقام أو حروف (من 0-9 ومن A-F).

<!-- الصيغة: #RRGGBB —
     RR = نسبة الأحمر (00-FF)
     GG = نسبة الأخضر (00-FF)
     BB = نسبة الأزرق (00-FF) -->

<p style="color: #ff0000;">أحمر خالص</p>
<p style="color: #00ff00;">أخضر خالص</p>
<p style="color: #0000ff;">أزرق خالص</p>
<p style="color: #000000;">أسود</p>
<p style="color: #ffffff; background: #333;">أبيض</p>
<p style="color: #ff6347;">لون Tomato بـ HEX</p>

القيمة 00 تعني لا شيء من هذا اللون، وFF تعني أقصى قيمة ممكنة. مثلاً #ff0000 = أحمر كامل + لا أخضر + لا أزرق = أحمر خالص.

اختصار HEX: إذا كان كل زوج متكرراً، يمكن اختصاره:

<!-- #ff0000 = #f00 (نفس النتيجة) -->
<!-- #ffffff = #fff -->
<!-- #000000 = #000 -->

الطريقة الثالثة: قيم RGB

مبنية على خلط ثلاثة ألوان أساسية: الأحمر والأخضر والأزرق. كل قيمة تتراوح بين 0 (لا شيء) و255 (أقصى قيمة).

<!-- الصيغة: rgb(red, green, blue) -->

<p style="color: rgb(255, 0, 0);">أحمر خالص</p>
<p style="color: rgb(0, 128, 0);">أخضر</p>
<p style="color: rgb(100, 149, 237);">أزرق ذرّي</p>
<p style="color: rgb(128, 128, 128);">رمادي (أرقام متساوية = تدرج رمادي)</p>

الشفافية — RGBA

إضافة الحرف A (Alpha) تُتيح التحكم في الشفافية. القيمة بين 0 (شفاف كلياً) و 1 (معتم كلياً).

<!-- الصيغة: rgba(red, green, blue, alpha) -->
<p style="background-color: rgba(255, 0, 0, 1.0);">أحمر معتم 100%</p>
<p style="background-color: rgba(255, 0, 0, 0.5);">أحمر شفاف 50%</p>
<p style="background-color: rgba(255, 0, 0, 0.1);">أحمر شفاف 10%</p>

الطريقة الرابعة: قيم HSL — الأسهل للفهم البشري

HSL اختصار لـ Hue, Saturation, Lightness (تدرج اللون، التشبع، الإضاءة). هي الأقرب للطريقة التي يرى بها الإنسان الألوان في الطبيعة.

• Hue (تدرج اللون): من 0 إلى 360 — دائرة الألوان (0=أحمر، 120=أخضر، 240=أزرق)
• Saturation (التشبع): من 0% (رمادي) إلى 100% (لون خالص نابض)
• Lightness (الإضاءة): من 0% (أسود) إلى 100% (أبيض)، 50% = اللون الطبيعي

<!-- الصيغة: hsl(hue, saturation%, lightness%) -->
<p style="color: hsl(0, 100%, 50%);">أحمر (0)</p>
<p style="color: hsl(120, 100%, 40%);">أخضر (120)</p>
<p style="color: hsl(240, 100%, 50%);">أزرق (240)</p>

<!-- درجات من نفس اللون بتغيير الإضاءة فقط -->
<p style="color: hsl(240, 100%, 20%);">أزرق داكن جداً</p>
<p style="color: hsl(240, 100%, 50%);">أزرق عادي</p>
<p style="color: hsl(240, 100%, 80%);">أزرق فاتح جداً</p>

الشفافية — HSLA

<!-- الصيغة: hsla(hue, saturation%, lightness%, alpha) -->
<p style="background-color: hsla(9, 100%, 64%, 0.5);">أحمر طماطم شفاف 50%</p>

مقارنة شاملة بين أنظمة الألوان

الأسئلة الشائعة — FAQ

أي نظام ألوان يجب أن أختار؟

في البداية استخدم أسماء الألوان للتعلم. في المشاريع الحقيقية، استخدم HEX للألوان الثابتة. استخدم RGBA عندما تحتاج شفافية. استخدم HSL عندما تبني لوحة ألوان ومحتاج درجات فاتحة وداكنة من نفس اللون.

كيف أحصل على كود HEX للون معين؟

استخدم أداة "Color Picker" في أي موقع مثل coolors.co أو color.adobe.com. أو افتح DevTools في المتصفح (F12) وابحث عن صندوق الألوان. أيضاً يمكن استخدام Color Picker في VS Code مباشرة.

ما معنى #000 و#fff؟

#000 هو اختصار لـ #000000 = أسود خالص (كل الألوان على 0). #fff هو اختصار لـ #ffffff = أبيض خالص (كل الألوان على أقصى قيمة).