جدول درس

دستورالعمل‌های مرجع CSS

CSS 属性

درس‌های انتخابی

توصیه‌های آموزشی:

جعبه ابزار CodeW3C.com

تابع hsl() CSS

صفحه قبلی توابع grayscale() CSS
صفحه بعدی توابع hue-rotate() CSS
بازگشت به طبقه بالاتر دستورالعمل‌های مرجع function CSS

تعریف و استفاده

CSS hsl() تابع از مدل رنگ phase-saturation-lightness (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);} /* دارای رنگ پرتقالی نرم با شفافیت */

آزمایش کنید

مثال 2

استفاده از نگارش قدیمی با جدا کردن مقادیر با کاما:

#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, 60%, 70%);} /* سبز ملایم */
#p5 {background-color:hsl(290, 100%, 50%);} /* بنفش */
#p6 {background-color:hsl(290, 60%, 70%);} /* بنفش ملایم */

آزمایش کنید

نوع نرخ‌گذاری CSS

نوع نرخ‌گذاری مطلق

hsl(hue saturation lightness / A)

مقدار	توضیح
hue	ضروری. تعریف درجه در چرخه رنگ (از 0 تا 360) - 0 (یا 360) قرمز،120 سبز،240 آبی.
saturation	ضروری. تعریف غلظت رنگ؛0% خاکستری،100% رنگ کامل (غلظت کامل). همچنین می‌توان از None (که با 0% مشابه است) استفاده کرد.
lightness	ضروری. تعریف روشنایی رنگ؛0% سیاه،50% عادی،100% سفید. همچنین می‌توان از None (که با 0% مشابه است) استفاده کرد.
/ A	اختیاری. مقدار کانال آلفای رنگ (از 0% (یا 0) - کاملاً شفاف تا 100% (یا 100) - کاملاً نیمه‌شفاف). همچنین می‌توان از None (که بدون کانال آلفا را نشان می‌دهد) استفاده کرد. مقدار پیش‌فرض 100% است.

نوع نرخ‌گذاری نسبی

hsl(from color hue saturation lightness / A)

مقدار	توضیح
from color	از کلمه کلیدی from شروع می‌شود، سپس یک مقدار رنگ برای رنگ اصلی دنبال می‌شود. این رنگ اصلی است که رنگ‌های نسبی بر اساس آن تعریف می‌شوند.
hue	ضروری. تعریف درجه در چرخه رنگ (از 0 تا 360) - 0 (یا 360) قرمز،120 سبز،240 آبی.
saturation	ضروری. تعریف غلظت رنگ؛0% خاکستری،100% رنگ کامل (غلظت کامل). همچنین می‌توان از None (که با 0% مشابه است) استفاده کرد.
lightness	ضروری. تعریف روشنایی رنگ؛0% سیاه،50% عادی،100% سفید. همچنین می‌توان از None (که با 0% مشابه است) استفاده کرد.
/ A	اختیاری. مقدار کانال آلفای رنگ (از 0% (یا 0) - کاملاً شفاف تا 100% (یا 100) - کاملاً نیمه‌شفاف). همچنین می‌توان از None (که بدون کانال آلفا را نشان می‌دهد) استفاده کرد. مقدار پیش‌فرض 100% است.