HSL

رنگ‌های HSL و HSLA در HTML

HSL مخفف سه ویژگی زیر است:

• Hue (فام یا رنگ پایه)

• Saturation (اشباع رنگ)

• Lightness (روشنایی)

HSLA نیز مانند HSL است، اما یک ویژگی اضافه به نام Alpha (شفافیت) دارد.

مقادیر رنگ HSL

در HTML می‌توان رنگ‌ها را به‌صورت hsl(hue, saturation, lightness) تعریف کرد.

• Hue (فام رنگ): عددی بین 0 تا 360 که رنگ را روی چرخه رنگ مشخص می‌کند.

  • 0 درجه = قرمز

  • 120 درجه = سبز

  • 240 درجه = آبی

• Saturation (اشباع رنگ): درصدی بین 0% تا 100%.

  • 0% = کاملاً خاکستری

  • 100% = رنگ کامل بدون خاکستری

• Lightness (روشنایی): درصدی بین 0% تا 100%.

  • 0% = سیاه

  • 100% = سفید

مثال‌هایی از ترکیب رنگ با 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% → کاملاً خاکستری

مثال:

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% → نه تیره و نه روشن

• 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%)   /* سفید */

طیف خاکستری با HSL

برای ساخت طیف‌های خاکستری، hue و saturation را روی صفر بگذارید و فقط مقدار lightness را تغییر دهید:

مثال:

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)

مقادیر رنگ HSLA

HSLA نسخه‌ای از HSL است که شامل شفافیت نیز می‌شود.

فرمت آن به‌صورت زیر است:

• مقدار alpha بین 0.0 تا 1.0 است:

  • 0.0 = کاملاً شفاف

  • 1.0 = کاملاً مات (بدون شفافیت)

مثال‌هایی از HSLA:

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)