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(hue, saturation, lightness)
La teinte est un degré sur la roue chromatique de 0 à 360. 0 est le rouge, 120 est le vert et 240 est le bleu.
La saturation est une valeur en pourcentage, 0 % signifie une nuance de gris et 100 % correspond à la couleur complète.
La luminosité est également une valeur en pourcentage, 0 % correspond au noir et 100 % au blanc.
Expérimentez en mélangeant les valeurs HSL ci-dessous :
HUE
SATURATION
LIGHTNESS
Exemple
Try it Yourself »
Saturation
La saturation peut être décrite comme l'intensité d'une couleur.
100 % est une couleur pure, sans nuances de gris
50 % correspondent à 50 % de gris, mais vous pouvez toujours voir la couleur.
0 % est complètement gris, vous ne pouvez plus voir la couleur.
Exemple
Try it Yourself »
Lightness (Légèreté)
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 claire) 100 % signifie une luminosité totale (blanc).
Exemple
Try it Yourself »
Nuances de gris
Les nuances de gris sont souvent définies en réglant la teinte et la saturation sur 0, et en ajustant la luminosité de 0 % à 100 % pour obtenir des nuances plus sombres/plus claires :
Exemple
Try it Yourself »
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(hue, saturation, lightness, alpha)
Le paramètre alpha est un nombre compris entre 0,0 (entièrement transparent) et 1,0 (pas transparent du tout) :
Expérimentez en mélangeant les valeurs HSLA ci-dessous :
HUE
SATURATION
LIGHTNESS
ALPHA
Exemple
Try it Yourself »
