رنگ های HSL در CSS

در این راهنما «رنگ های HSL در CSS» را می بینید. HSL مخفف Hue، Saturation و Lightness است و با نگارش hsl(h, s%, l%) تعریف می شود. همچنین HSLA کانال آلفا را برای شفافیت اضافه می کند.

تعریف رنگ های HSL در CSS

Hue زاویه ای از 0 تا 360 درجه است؛ 0 یا 360 قرمز، 120 سبز و 240 آبی. سپس Saturation درصد شدت رنگ است و Lightness نیز درصد روشنایی است.

.primary { color: hsl(39, 100%, 50%); }
.info { background-color: hsl(240, 100%, 50%); }
.muted { color: hsl(0, 0%, 50%); }

تغییر شدت (Saturation)

شدت رنگ با درصد بیان می شود؛ 100% رنگ خالص است، 50% نیمه اشباع و 0% خاکستری است.

.sat-100 { color: hsl(0, 100%, 50%); }
.sat-40 { color: hsl(0, 40%, 50%); }
.sat-0 { color: hsl(0, 0%, 50%); }

تغییر روشنایی (Lightness)

روشنایی میزان نور رنگ است؛ 0% سیاه، 50% میانه و 100% سفید است. برای خاکستری، Hue و Saturation را 0 قرار دهید و Lightness را تغییر دهید.

.dark { background: hsl(0, 100%, 25%); }
.mid { background: hsl(0, 100%, 50%); }
.light { background: hsl(0, 100%, 90%); }

HSLA و شفافیت

HSLA با نگارش hsla(h, s%, l%, a) شفافیت را با a بین 0 و 1 مشخص می کند. مقدار 0 کاملاً شفاف و 1 بدون شفافیت است.

.overlay-20 { background-color: hsla(9, 100%, 64%, 0.2); }
.overlay-60 { background-color: hsla(9, 100%, 64%, 0.6); }
.overlay-100 { background-color: hsla(9, 100%, 64%, 1); }

نکته: برای دسترسی پذیری، هنگام کاهش شفافیت یا روشنایی، کنتراست متن و پس زمینه را بررسی کنید.

ادامه مسیر با رنگ ها

پیش از این، رنگ های HEX را دیدید. اکنون نیز صفحه رنگ های HSL در CSS را نشانه گذاری کنید و در صورت نیاز به نورافزایی شفاف، به RGB و RGBA و همچنین مرور رنگ ها سر بزنید.

MDN: مقدارهای HSL/HSLA را برای نمونه ها ببینید و برای جزئیات رسمی به W3C CSS Color مراجعه کنید.

هشدار: اگر درصدها یا آلفا خارج از بازه معتبر باشند، مقدار رنگ نادیده گرفته می شود.