CSS Couleurs HSL

---

Valeur HSL

HSL signifie teinte, saturation et luminosité.

En CSS, une couleur peut être spécifiée en utilisant la teinte, la saturation et la luminosité (HSL) sous la forme :

hsl( teinte , saturation , luminosité )

Teinte correspond à un degré sur le cercle chromatique (de 0 à 360) :

• 0 (ou 360) est rouge
• 120 est vert
• 240 est bleu

Saturation est une valeur en pourcentage : 0 % signifie une nuance de gris, et 100 % représente la couleur pleine.

Luminosité est également exprimée en pourcentage ; 0 % est noir, 50 % est ni clair ni sombre, et 100 % est blanc.

Expérimentez en mélangeant les valeurs HSL ci-dessous :

---

Saturation

La saturation peut être décrite comme l'intensité d'une couleur.

100 % représente une couleur pure, sans nuances de gris.

50 % signifie 50 % de gris, mais la couleur reste visible.

0 % est complètement gris ; la couleur n'est plus perceptible.

---

---

Luminosité

La luminosité d'une couleur peut être décrite comme la quantité de lumière que vous souhaitez lui donner, où 0 % signifie aucune lumière (noir), 50 % signifie 50 % de lumière (ni sombre ni clair) et 100 % signifie pleine luminosité (blanc).

---

Nuances de gris

Les nuances de gris sont souvent définies en réglant la teinte et la saturation à 0, puis en ajustant la luminosité de 0 % à 100 % pour obtenir des nuances plus sombres ou plus claires :

---

Valeur HSLA

Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un canal alpha, qui spécifie l'opacité d'une couleur.

Une valeur de couleur HSLA est spécifiée avec :

hsla( teinte, saturation , luminosité, alpha )

Le paramètre alpha est un nombre compris entre 0,0 (totalement transparent) et 1,0 (pas du tout transparent) :

Expérimentez en mélangeant les valeurs HSLA ci-dessous :

---

---

---