CSS - HSL Colors نمط اللون
CSS - ألوان HSL
🔸 في CSS يمكن استخدام صيغة HSL لتحديد الألوان بطريقة تعتمد على:
- H (Hue): درجة اللون (من 0 إلى 360)
- S (Saturation): التشبع (من 0% إلى 100%)
- L (Lightness): الإضاءة (من 0% إلى 100%)
✅ صيغة اللون
color: hsl(hue, saturation, lightness);
مثال:
color: hsl(0, 100%, 50%); /* أحمر */
color: hsl(120, 100%, 50%); /* أخضر */
color: hsl(240, 100%, 50%); /* أزرق */
🧪 مثال عملي في HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color: hsl(0, 100%, 50%);">أحمر HSL</h2>
<h2 style="color: hsl(120, 100%, 50%);">أخضر HSL</h2>
<h2 style="color: hsl(240, 100%, 50%);">أزرق HSL</h2>
<h2 style="color: hsl(0, 0%, 20%);">رمادي داكن HSL</h2>
</body>
</html>
🌈 ماذا تعني القيم؟
- Hue: درجة اللون، 0 أحمر، 120 أخضر، 240 أزرق، 60 أصفر، 180 فيروزي، 300 أرجواني.
- Saturation: التشبع: 100% = لون قوي، 0% = رمادي.
- Lightness: الإضاءة: 0% = أسود، 100% = أبيض، 50% = اللون الطبيعي.
📌 ملاحظات إضافية
- طريقة HSL تجعل من السهل تعديل الإضاءة والتشبع لإنتاج درجات مختلفة من نفس اللون.
- يمكنك استخدام
hsla()لإضافة شفافية (alpha channel).
تعليقات
إرسال تعليق