Culori CSS. Culori HSL.

Culori HSL

HSL înseamnă Hue, Saturation and Lightness.
O valoare de culoare HSL este specificată cu: hsl(hue, saturation, lightness).

Hue este un grad pe roata de culoare (de la 0 la 360):
  • 0 (sau 360) este roșu
  • 120 este verde
  • 240 este albastru

Saturation este o valoare procentuală: 100% este culoarea completă.
Lightness este, de asemenea, un procent; 0% este întunecat (negru) și 100% alb.



Următorul exemplu definește diferite culori HSL:

Exemplu:
#p1 {background-color: hsl(120, 100%, 50%);}  /* green(verde) */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green(verde deschis ) */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green(verde închis) */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green(verde pastel) */

Rezultat: