رنگ های HSL و HSLA در HTML
در HTML می توانید رنگ ها را با استفاده از مدل HSL یا HSLA تعریف کنید. HSL مخفف Hue (فام رنگی)، Saturation (اشباع) و Lightness (روشنایی) است. HSLA نیز همان HSL است با یک کانال اضافی Alpha برای شفافیت.
مقادیر HSL
فرمت رنگ HSL به صورت زیر است:
hsl(hue, saturation, lightness)Hue یک درجه بین 0 تا 360 است. 0 قرمز، 120 سبز و 240 آبی است. Saturation درصدی بین 0% (خاکستری) تا 100% (رنگ کامل) و Lightness درصدی بین 0% (سیاه) تا 100% (سفید) است.
مثال HSL
<div style="background-color:hsl(0,100%,50%);">قرمز</div>
<div style="background-color:hsl(120,100%,50%);">سبز</div>
<div style="background-color:hsl(240,100%,50%);">آبی</div>اشباع (Saturation)
اشباع نشان دهنده شدت رنگ است. مقدار 100% رنگ خالص است و 0% به معنای خاکستری کامل است.
روشنایی (Lightness)
روشنایی میزان نور رنگ را تعیین می کند. 0% سیاه، 50% رنگ طبیعی و 100% سفید است.
سایه های خاکستری
برای ایجاد خاکستری، Hue و Saturation را صفر کنید و Lightness را تغییر دهید.
<div style="background-color:hsl(0,0%,20%);">خاکستری تیره</div>
<div style="background-color:hsl(0,0%,50%);">خاکستری متوسط</div>
<div style="background-color:hsl(0,0%,90%);">خاکستری روشن</div>مقادیر HSLA
HSLA یک نسخه توسعه یافته از HSL است که شامل یک مقدار Alpha بین 0.0 (کاملاً شفاف) و 1.0 (بدون شفافیت) می شود:
hsla(hue, saturation, lightness, alpha)مثال HSLA
<div style="background-color:hsla(0,100%,50%,0.2);">قرمز شفاف</div>
<div style="background-color:hsla(120,100%,50%,0.5);">سبز نیمه شفاف</div>
<div style="background-color:hsla(240,100%,50%,1);">آبی بدون شفافیت</div>خلاصه فصل
- HSL شامل Hue، Saturation و Lightness است.
- HSLA همان HSL با یک کانال Alpha برای شفافیت است.
- با تغییر Saturation شدت رنگ را کنترل کنید.
- با تغییر Lightness میزان روشنایی رنگ را مشخص کنید.
- با HSLA می توانید شفافیت رنگ را تنظیم کنید.
برای مطالعه بیشتر به بخش رنگ های هگز (HEX) و رنگ های RGB و RGBA مراجعه کنید.