رنگ‌های HSL در CSS

مقدار HSL

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%)

اشباع (Saturation)

اشباع را می‌توان به عنوان شدت یا خلوص یک رنگ توصیف کرد.

• 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%)

روشنی (Lightness)

روشنی یک رنگ را می‌توان به این صورت توصیف کرد که چه مقدار نور به رنگ داده می‌شود؛ جایی که 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

مقادیر رنگ 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)