دالة hsl() في CSS

التعريف والاستخدام

في CSS، hsl() استخدام دالة hsl() لتحديد الألوان باستخدام نموذج الألوان اللون-التشبع-السطوع (HSL). يمكن أيضًا إضافة جزء اختياري alpha (يعبر عن شفافية اللون).

نصيحة:HSL تعني لون (Hue)، التشبع (Saturation) والسطوع (Lightness)، وهي تمثل تمثيل الكوادرات للون.

ملاحظة:hsla() الدالة هي hsl() اسم الدالة المميزة. يُنصح باستخدام hsl() دالة.

مثال

مثال 1

تحديد ألوان HSL(A) المختلفة:

#p1 {background-color:hsl(120 100% 50%);} /* زمردي */
#p2 {background-color:hsl(120 100% 75%);} /* زمردي فاتح */
#p3 {background-color:hsl(120 100% 25%);} /* زمردي داكن */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* زمردي داكن شفاف */
#p5 {background-color:hsl(120 60% 70%);} /* زمردي ناعم */
#p6 {background-color:hsl(290 100% 50%);} /* وردة */
#p7 {background-color:hsl(290 60% 70%);} /* وردة ناعمة */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* وردة ناعمة شفافة */

#p6 {لون الخلفية:hsl(290, 60%, 70%);} /* أزرق لطيف */

例子 2

مثال 2

استخدام قواعد النص المطلق المفصولة بالكوماس:
#p1 {لون الخلفية:hsl(120, 100%, 50%);} /* أخضر */
#p2 {لون الخلفية:hsl(120, 100%, 75%);} /* أخضر فاتح */
#p3 {لون الخلفية:hsl(120, 100%, 25%);} /* أخضر داكن */
#p4 {لون الخلفية:hsl(120, 60%, 70%);} /* أخضر لطيف */
#p5 {لون الخلفية:hsl(290, 100%, 50%);} /* أزرق */

#p6 {لون الخلفية:hsl(290, 60%, 70%);} /* أزرق لطيف */

تجربة شخصية

قواعد اللغة CSS

قواعد النص المطلقhue saturation lightness / A)

قواعد النص المطلق

hsl(from color hue saturation lightness / A)

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يعكس إصدار المتصفح الذي يدعم هذه الدالة بشكل كامل.

الصفحات ذات الصلة

دليل:لون CSS HSL

المرجع:ألوان CSS

المرجع:دالة CSS hwb()

المرجع:دالة CSS lab()

المرجع:دالة CSS lch()

المرجع:دالة oklab() CSS

المرجع:دالة oklch() CSS