کد HSL مخفف سه کلمه Hue ، Saturation ،Lightness میباشد که Hue به معنای اشباع،Saturation به معنای رنگ و Lightness به معنای روشنایی میباشد و با استفاده از HSL میتوان میزان اشباع،روشنایی و رنگ را مشخص کرد.
hsl(hue, saturation, lightness)
Hue: یک درجه در چرخ رنگ از 0 تا 360 است. 0 قرمز ، 120 سبز و 240 آبی است.
saturation: میزان اشباع رنگ را بصورت درصدی نشان میدهد.0% یعنی سایه ای از خاکستری، 100% یعنی رنگ کامل.
lightness:میزان روشنایی رنگ را بصورت درصدی نشان میدهد.0% یعنی سیاه، 50% یعنی نه روشن و نه تیره، 100% یعنی سفید.(هرچقدر به سمت 100% برود رنگ روشن تر میشود.)
|
1 2 3 4 5 6 |
<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> |
اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.
100٪ رنگ خالص است ، بدون سایه خاکستری
50٪ خاکستری است ، اما هنوز هم می توانید رنگ را ببینید.
0٪ کاملاً خاکستری است ، دیگر نمی توانید رنگ را ببینید.
|
1 2 3 4 5 6 |
<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> |
روشنایی یک رنگ را میتوان به میزان روشنایی که می خواهید به رنگ بدهید ، توصیف کرد.
در صورتی که 0٪ باشد به معنی عدم روشنایی (سیاه)،50٪ باشد به معنای 50٪ روشنایی (نه تیره و نه روشن)،100٪ به معنای روشنایی کامل (سفید) است.
|
1 2 3 4 5 6 |
<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> |
سایه های خاکستری اغلب با تنظیم رنگ و میزان اشباع روی 0 تعریف می شوند و روشنایی را از 0 تا 100 درصد برای ایجاد سایه های تیره تر/روشن تر تنظیم می کنند.
|
1 2 3 4 5 6 |
<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> |
مقادیر رنگ HSLA افزونه‌ای از مقدارهای رنگ HSL با یک کانال آلفا هستند که مقدار تاری رنگ را تعیین میکند.
مقدار رنگ HSLA با موارد زیر مشخص شده است:
hsla (رنگ ، اشباع ، روشنایی ، آلفا)
پارامتر آلفا یک عدد بین ۰/۰ (کاملاً شفاف) و ۱/۰ (کاملاً تار) است.
|
1 2 3 4 5 6 |
<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> |
