# HSL

HSL rang, rangning to'yinganligi va yorug'ligini ifodalaydi.

HSLA rang qiymati esa Alfa (shaffofligi) ham mavjud bo'lgan HSL ning kengaytirilgan versiyasidir.

## <mark style="color:green;">HSLning rang qiymatlari</mark>

HTMLda rangni quyidagicha **hue** (*rang*), **saturation** (*to'yinganlik*) va **lightness** (*yorug'lik*) shaklida belgilash mumkin:

**hsl ( \_rang***\*\* , \*\****to'yinganlik**\_\*\* , yorug'lik)\*\*

**Hue -** 0 dan 360 gacha bo'lgan rang darajasi hisoblanadi. 0 qizil, 120 yashil va 240 ko'k.

**Saturation** - foizli qiymat hisoblanadi. 0% kulrang soyani, 100% esa to'liq rangni anglatadi.

**Lightness** - ham foiz qiymati hisoblanib 0% qora rangni, 100% esa oq rangi beradi.

Quyidagi HSL qiymatlarini aralashtirish orqali tajriba qilib ko'ring:

<figure><img src="https://1205461495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqA16xzuzJkS1GYbYJ5OX%2Fuploads%2F6tprN0FmKNXjRKJBQIWO%2Fimage.png?alt=media&#x26;token=a6dc2eb6-512e-4220-8452-1e10dcb342f8" alt=""><figcaption></figcaption></figure>

### <mark style="color:green;">Misol:</mark>

<figure><img src="https://1205461495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqA16xzuzJkS1GYbYJ5OX%2Fuploads%2FAsmNU9dcYvVIIoVHQkWC%2Fimage.png?alt=media&#x26;token=246e3d30-14e5-4393-be5b-65245f79be11" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_hsl>" %}

## <mark style="color:green;">Saturation</mark>

Saturation (to'yinganlik)ni rangning intensivligi deb ta'riflash mumkin.

100% rangning to'liq ko'rinishi, kulrang soyalarsiz.

50% 50% kulrang, lekin bunda ham rangni ko'rishingiz mumkin.

0% butunlay kulrang; endi rangni ko'ra olmaysiz.

<figure><img src="https://1205461495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqA16xzuzJkS1GYbYJ5OX%2Fuploads%2FMbu60BWjnsXmimKczyjj%2Fimage.png?alt=media&#x26;token=20567974-defc-4258-b67f-4f4d53482c6a" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_hsl_saturation>" %}

## <mark style="color:green;">Ochiqlik darajasi</mark>

Rangning ochiqliligi rangga qancha yorug'lik bermoqchiligingizni tasvirlash orqali bo'ladi, bu yerda 0% yorug'lik yo'q (qora) degani, 50% 50% yorug'lik (na qora, na och) va 100% to'liq och (oq) degan ma'noni anglatadi. ).

<figure><img src="https://1205461495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqA16xzuzJkS1GYbYJ5OX%2Fuploads%2FOowLAJ25OSPGPtSjEseK%2Fimage.png?alt=media&#x26;token=0f601dd3-6c0a-4287-8521-6a3c35fcc2bc" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_hsl_lightness>" %}

Kulrang soya ko'pincha rang va to'yinganlikni 0 qilib berish va to'qroq/ochroq soya qilish uchun yorug'likni 0% dan 100% gacha sozlash orqali yaratiladi:

<figure><img src="https://1205461495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqA16xzuzJkS1GYbYJ5OX%2Fuploads%2F5kvWurq88hmGkFhmi1N6%2Fimage.png?alt=media&#x26;token=b8480ad4-7db9-4307-808d-fe13d467efe8" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_hsl_gray>" %}

## <mark style="color:green;">HSLA Rang qiymatlari</mark>

HSLA rang qiymatlari HSL rang qiymatlarining kengaytirilgan shakli bo'lib, rang uchun shaffoflikni belgilaydigan Alfa mavjud.

HSLA rang qiymati quyidagilar bilan beriladi:

hsla(rang, toʻyinganlik, yengillik, alfa)

Alfa parametri 0,0 (to'liq shaffof) va 1,0 (umuman shaffof emas) orasidagi raqam bo'ladi:

Quyidagi HSLA qiymatlarini aralashtirish orqali tajriba o'tkazing:

<figure><img src="https://github.com/cyberacademyuz/W3SCHOOLS/blob/main/.gitbook/assets/image%20(864).png" alt=""><figcaption></figcaption></figure>

### Misol:

<figure><img src="https://github.com/cyberacademyuz/W3SCHOOLS/blob/main/.gitbook/assets/image%20(863).png" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_hsla>" %}
