رنگ های 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 مراجعه کنید.
هشدار: اگر درصدها یا آلفا خارج از بازه معتبر باشند، مقدار رنگ نادیده گرفته می شود.