HTML HSL va HSLA Ranglar
HSL — hue, saturation, lightness (rang, to'yinganlik, yorqinlik) degan ma'noni anglatadi.
HSLA esa HSL ga Alpha kanali (shaffoflik) qo'shadi.
HSL Rang Qiymatlari
HTML da rangni HSL yordamida quyidagi ko'rinishda belgilash mumkin:
css
hsl(rang, toyinganlik, yorqinlik)- Rang (hue): 0–360 (0 — qizil, 120 — yashil, 240 — ko'k)
- Toyinganlik (saturation): 0% (kul rang) dan 100% (to'liq rang)
- Yorqinlik (lightness): 0% (qora) dan 100% (oq)
Rang Namunalari
| Rang | HSL Qiymati |
|---|---|
hsl(0, 100%, 50%) | |
hsl(240, 100%, 50%) | |
hsl(147, 50%, 47%) | |
hsl(300, 76%, 72%) | |
hsl(39, 100%, 50%) | |
hsl(248, 53%, 58%) |
Toyinganlik
Toyinganlik rangning qanchalik kuchli ekanligini bildiradi.
- 100%: toza rang, kul rang yo'q
- 50%: 50% kul rang, rang ko'rinadi
- 0%: to'liq kul rang
| Namuna | HSL Qiymati |
|---|---|
hsl(0, 100%, 50%) | |
hsl(0, 80%, 50%) | |
hsl(0, 60%, 50%) | |
hsl(0, 0%, 50%) |
Yorqinlik
Yorqinlik rangning yorug'ligini belgilaydi.
- 0%: qora
- 50%: oddiy rang
- 100%: oq
| Namuna | HSL Qiymati |
|---|---|
hsl(0, 100%, 0%) | |
hsl(0, 100%, 25%) | |
hsl(0, 100%, 50%) | |
hsl(0, 100%, 90%) | |
hsl(0, 100%, 100%) |
Kul Rang Soyalari
Rang va to'yinganlikni 0 ga qo'ying, yorqinlikni o'zgartiring:
| Namuna | HSL Qiymati |
|---|---|
hsl(0, 0%, 20%) | |
hsl(0, 0%, 40%) | |
hsl(0, 0%, 80%) |
HSLA Rang Qiymatlari
HSLA — alpha (shaffoflik) kanalini qo'shadi:
css
hsla(rang, toyinganlik, yorqinlik, alfa)- Alfa (alpha): 0.0 (shaffof) dan 1.0 (to'liq ko'rinadigan)
| Namuna | HSLA Qiymati |
|---|---|
hsla(9, 100%, 64%, 0.2) | |
hsla(9, 100%, 64%, 0.6) | |
hsla(9, 100%, 64%, 1) |
CSS da HSL va HSLA qiymatlari bilan tajriba qilib ko'ring va natijalarni kuzating!