آموزش رنگ های HSL و HSLA در HTML

HSL مخفف کلمات hue(رنگ) و saturation(اشباع) و lightness(روشنایی) می باشد. رنگ های HSLA توسعه یافته از رنگ های HSL هستند و یک از کانال آلفا(Alpha channel) که نشان دهنده شفافیت(opacity) است نیز استفاده می کنند.

 مقادیر رنگ های HSL

در HTML، یک رنگ می تواند با استفاده از hue(رنگ) و saturation(اشباع) و lightness(روشنایی) که مخفف اینها HSL می شود، به صورت زیر تعریف شود:

hsl(hue, saturation, lightness)

hue یک درجه بر روی چرخ رنگ، از 0 تا 360 است. 0 قرمز است و 120 سبز است و 240 آبی است. Saturation یک مقدار درصد است. %0 بیانگر یک سایه خاکستری است و %100 بیانگر رنگ کامل است. Lightness نیز یک مقدار درصد است. %0 نشان دهنده رنگ سیاه و %100 بیانگر رنگ سفید است. با استفاده از ابزار زیر، می توانید مقادیر HSL را با یکدیگر مخلوط کنید:

Saturation (اشباع)

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

Lightness(روشنایی)

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

 سایه های خاکستری

برای ایجاد سایه های خاکستری می توانیم hue و saturation  را برابر با 0 قرار دهیم و روشنایی(lightness) را برای ایجاد سایه های تیره تر یا شفاف تر، بین %0 و %100 تغییر دهیم:

 مقادیر رنگ های HSLA

مقادیر رنگ های HSLA از مقادیر رنگ های HSL توسعه یافته اند و از یک کانال آلفا که شفافیت(opacity) یک رنگ را مشخص می کند برخوردار هستند. یک رنگ HSLA به صورت زیر تعریف می شود:

hsla(hue, saturation, lightness, alpha)

پارامتر alpha یک عدد بین 0.0 (کاملاً شفاف) و 1.0 (بدون هیچ شفافیت) است. در ابزار زیر می توانید مقادیر رنگ های HSLA را ترکیب کنید: