کد رنگ HSL در HTML برای طراحی سایت

کد HSL مخفف سه کلمه Hue ، Saturation ،Lightness میباشد که Hue به معنای اشباع،Saturation به معنای رنگ و Lightness به معنای روشنایی میباشد و با استفاده از HSL میتوان میزان اشباع،روشنایی و رنگ را مشخص کرد.

hsl(hue, saturation, lightness)

مقادیر رنگ HSL

Hue: یک درجه در چرخ رنگ از 0 تا 360 است. 0 قرمز ، 120 سبز و 240 آبی است.

saturation: میزان اشباع رنگ را بصورت درصدی نشان میدهد.0% یعنی سایه‎ ای از خاکستری، 100% یعنی رنگ کامل.

lightness:میزان روشنایی رنگ را بصورت درصدی نشان میدهد.0% یعنی سیاه، 50%  یعنی نه روشن و نه تیره، 100% یعنی سفید.(هرچقدر به سمت 100% برود رنگ روشن تر میشود.)

مثال:

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

نتیجه:

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٪ خاکستری است ، اما هنوز هم می توانید رنگ را ببینید.

0٪ کاملاً خاکستری است ، دیگر نمی توانید رنگ را ببینید.

مثال:

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

نتیجه:

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٪ به معنای روشنایی کامل (سفید) است.

 مثال:

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

نتیجه: 

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

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

سایه های خاکستری اغلب با تنظیم رنگ و میزان اشباع روی 0 تعریف می شوند و روشنایی را از 0 تا 100 درصد برای ایجاد سایه های تیره تر/روشن تر تنظیم می کنند.

مثال:

<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>

 نتیجه:

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 با یک کانال آلفا هستند که مقدار تاری رنگ را تعیین می‌کند.

مقدار رنگ HSLA با موارد زیر مشخص شده است:

hsla (رنگ ، اشباع ، روشنایی ، آلفا)

پارامتر آلفا یک عدد بین ۰/۰ (کاملاً شفاف) و ۱/۰ (کاملاً تار) است.

مثال:

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

 نتیجه:

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)