Culori CSS. Valoarea CSS HSL. Hue. Saturația​​​​​​​ (Saturation). ​​​​​​​Luminozitate (Lightness).

Valoarea CSS HSL

În CSS, o culoare poate fi specificată folosind nuanță, saturație și ușurință (HSL) sub forma:

hsl (nuanță, saturație, luminozitate)/ hsl (hue, saturation, lightness)

Hue este un grad pe roata de culoare de la 0 la 360. 0 este roșu, 120 este verde și 240 albastru.
Saturația este o valoare procentuală, 0% înseamnă o nuanță de gri, iar 100% este culoarea completă.
De asemenea, lumina este procentuală, 0% este negru, 50% nu este nici lumină, nici întunecată, 100% alb

Exemplu:



Saturația (saturation)

Saturația poate fi descrisă ca intensitatea unei culori.
100% este de culoare pură, fără nuanțe de gri
50% este 50% gri, dar puteți vedea în continuare culoarea.
0% este complet gri, nu mai puteți vedea culoarea.

Exemplu:



Luminozitate (Lightness)

Luminozitatea unei culori poate fi descrisă cât de multă lumină doriți să dați culorii, unde 0% nu înseamnă lumină (negru), 50% înseamnă 50% lumină (nici întuneric, nici lumină) 100% înseamnă lumină completă (alb).

Exemplu:



Nuanțele de gri sunt adesea definite prin setarea nuanței și a saturației la 0 și reglați luminozitatea de la 0% la 100% pentru a obține nuanțe mai închise / mai deschise:

Exemplu: