HSL مخفف سه کلمهی Hue (فام)، Saturation (اشباع) و Lightness (روشنی) است.
در CSS، یک رنگ را میتوان با استفاده از فام، اشباع و روشنی (HSL) در این فرمت تعریف کرد: hsl(hue, saturation, lightness)
Hue (فام) یک درجه روی چرخه رنگ است (از 0 تا 360):
0 (یا 360) معرف رنگ قرمز است.
120 معرف رنگ سبز است.
240 معرف رنگ آبی است.
Saturation (اشباع) یک مقدار درصدی است: 0% به معنای طیفی از خاکستری و 100% به معنای رنگ کامل (خالص) است.
Lightness (روشنی) نیز یک مقدار درصدی است؛ 0% معرف رنگ مشکی، 50% حالت میانه (نه روشن و نه تیره) و 100% معرف رنگ سفید است.
با ترکیب مقادیر HSL زیر، نتیجه را آزمایش کنید:
hsl(0, 100%, 50%)
HUE: 0
SATURATION: 100%
LIGHTNESS: 50%
در این نمونه، رنگهای مختلف با استفاده از مقادیر HSL تعریف شدهاند.
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
اشباع را میتوان به عنوان شدت یا خلوص یک رنگ توصیف کرد.
100% رنگ خالص است و هیچ طیف خاکستری در آن وجود ندارد.
50% به معنای 50% خاکستری است، اما هنوز میتوانید رنگ اصلی را تشخیص دهید.
0% کاملاً خاکستری است و دیگر نمیتوان رنگ اصلی را دید.
در کدهای زیر، رنگ قرمز با درجات مختلفی از اشباع (از 100% تا 0%) نمایش داده شده است.
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
روشنی یک رنگ را میتوان به این صورت توصیف کرد که چه مقدار نور به رنگ داده میشود؛ جایی که 0% به معنای نبود نور (مشکی)، 50% به معنای 50% نور (نه تیره و نه روشن) و 100% به معنای روشنایی کامل (سفید) است.
در این نمونه، رنگ قرمز با درجات مختلفی از روشنی (از 0% تا 100%) نمایش داده شده است.
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
طیفهای خاکستری معمولاً با تنظیم Hue و Saturation روی 0 و تغییر Lightness از 0% تا 100% برای رسیدن به سایههای تیرهتر/روشنتر تعریف میشوند.
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
مقادیر رنگ HSLA نسخهی توسعهیافتهی HSL همراه با یک کانال آلفا (alpha channel) هستند که شفافیت (opacity) رنگ را مشخص میکند.
یک مقدار رنگ HSLA به این صورت مشخص میشود: hsla(hue, saturation, lightness, alpha)
پارامتر آلفا عددی بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً مات) است.
با ترکیب مقادیر HSLA زیر، نتیجه را آزمایش کنید:
hsla(0, 100%, 50%, 0.5)
HUE: 0
SATURATION: 100%
LIGHTNESS: 50%
ALPHA: 0.5
در کدهای زیر، یک رنگ ثابت با درجات مختلف شفافیت نمایش داده شده است.
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses