HTML Couleurs HSL et HSLA
HSL signifie teinte, saturation et luminosité.
Les valeurs de couleur HSLA sont une extension de HSL avec un canal Alpha (opacité).
Valeurs de couleur HSL
En HTML, une couleur peut être spécifiée en utilisant la teinte, la saturation et la luminosité (HSL) sous la forme :
hsl( teinte , saturation , luminosité )
La teinte est un degré sur le cercle chromatique allant de 0 à 360. 0 est rouge, 120 est vert, et 240 est bleu.
La saturation est une valeur en pourcentage. 0% signifie une nuance de gris, et 100% représente la couleur pleine.
La luminosité est également une valeur en pourcentage. 0% est noir, et 100% est blanc.
Expérimentez en mélangeant les valeurs HSL ci-dessous :
TEINTE
SATURATION
LUMINOSITÉ
Exemple
Saturation
La saturation peut être décrite comme l'intensité d'une couleur.
100% correspond à 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 visible.
Exemple
Luminosité
La luminosité d'une couleur peut être décrite comme la quantité de lumière que vous souhaitez donner à la couleur, où 0% signifie pas de lumière (noir), 50% signifie 50% de lumière (ni sombre ni clair), et 100% signifie pleine luminosité (blanc).
Exemple
Nuances de gris
Les nuances de gris sont souvent définies en réglant la teinte et la saturation à 0, et en ajustant la luminosité de 0% à 100% pour obtenir des nuances plus foncées ou plus claires :
Exemple
Valeurs de couleur 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 :
TEINTE
SATURATION
LUMINOSITÉ
ALPHA