ألوان CSS

الألوان هي أحد العناصر البصرية الأكثر أساسية في تصميم الويب. CSS يوفر طرقاً متعددة لتمثيل الألوان، من أسماء الألوان البسيطة إلى HSL المرنة، لكل منها حالات استخدامها المناسبة.

مرجع سريع لقيم الألوان

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

CSS يدعم أكثر من 140 اسم لون مُعرَّف مسبقاً، الأكثر بديهية في الاستخدام.

مثال

<style>
p {
  color: red;
}
h1 {
  color: blue;
}
h2 {
  color: green;
}
</style>
<p>هذا مثال على فقرة.</p>
<h1>عنوان المستوى الأول</h1>
<h2>عنوان المستوى الثاني</h2>

أسماء الألوان الشائعة تشمل: red، blue، green، black، white، gray، orange، purple، yellow، pink، gold، navy، teal، coral، tomato، skyblue، violet، brown، cyan، magenta، lime، olive، silver.

2. سداسي عشري (HEX)

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

مثال

<style>
.hex-demo {
  color: #ff0000;      /* أحمر */
  background: #333;    /* رمادي داكن (اختصار 3 أرقام) */
  border: 1px solid #e3f2fd;  /* أزرق فاتح */
}
</style>
<div class="hex-demo">مثال لون سداسي عشري</div>

قواعد الاختصار:

• #FF0000 → #F00 (أحمر)
• #00FF00 → #0F0 (أخضر)
• #0000FF → #00F (أزرق)
• #aabbcc → #abc

3. RGB و RGBA

RGB يستخدم قيماً عشرية 0-255 لقنوات الأحمر والأخضر والأزرق. RGBA يضيف شفافية ألفا (0-1).

مثال

<style>
.rgb-demo {
  color: rgb(255, 0, 0);        /* أحمر */
  background: rgba(0, 0, 0, 0.5);  /* أسود شفاف 50% */
}
</style>
<div class="rgb-demo">مثال لون RGB/RGBA</div>

4. HSL و HSLA

HSL يستخدم اللون (0-360)، التشبع (0-100%)، السطوع (0-100%). HSLA يضيف شفافية ألفا.

مثال

<style>
.hsl-demo {
  color: hsl(0, 100%, 50%);        /* أحمر */
  background: hsla(120, 100%, 50%, 0.3);  /* أخضر شفاف 30% */
}
</style>
<div class="hsl-demo">مثال لون HSL</div>

5. خاصية opacity

خاصية opacity تتحكم في شفافية العنصر الشاملة (0-1)، مؤثرة على جميع المحتوى بما في ذلك الأبناء.

مثال

<style>
.opacity-demo {
  opacity: 0.5;
  background: blue;
  color: white;
  padding: 20px;
}
</style>
<div class="opacity-demo">عنصر شفاف 50% (جميع المحتوى متأثر)</div>

❓ أسئلة شائعة

📖 ملخص

• CSS يوفر طرقاً متعددة لتمثيل الألوان: أسماء، HEX، RGB/RGBA، HSL/HSLA
• HEX هو التنسيق الأكثر استخداماً، HSL هو الأكثر ودية للمصممين
• RGBA و HSLA يضيفان التحكم في الشفافية لـ RGB و HSL
• opacity تؤثر على العنصر بأكمله بما في ذلك الأبناء
• اختر التنسيق الذي يناسب سير عملك وحالتك

📝 تمارين

1. أنشئ لوحة ألوان باستخدام 5 طرق مختلفة لتمثيل الألوان على الأقل.
2. أنشئ تأثير تراكب شفاف باستخدام RGBA.
3. أنشئ مخطط ألوان باستخدام HSL ب변_valor فقط قيمة اللون.
4. قارن بين opacity: 0.5 وbackground: rgba(0,0,0,0.5).