Couleurs CSS HSL
HSL signifie teinte, saturation et luminosité.
Valeur HSL
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é )
La teinte est un degré sur la roue chromatique 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 % est la pleine couleur.
La luminosité est également un pourcentage, 0% est noir, 50% n'est ni clair ni foncé, 100% est blanc
Expérimentez en mélangeant les valeurs HSL ci-dessous :
hsl(0, 100%, 50%)
TEINTE
SATURATION
LÉGÈRETÉ
Exemple
Saturation
La saturation peut être décrite comme l'intensité d'une couleur.
100% est une couleur pure, pas de nuances de gris
50% est 50% gris, mais vous pouvez toujours voir la couleur.
0% est complètement gris, vous ne pouvez plus voir la couleur.
Exemple
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 aucune lumière (noir), 50 % signifie 50 % de lumière (ni sombre ni clair) 100 % signifie une luminosité totale (blanc).
Exemple
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 foncées/claires :
Exemple
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 (entièrement transparent) et 1,0 (pas transparent du tout) :
Expérimentez en mélangeant les valeurs HSLA ci-dessous :
hsla (0, 100 %, 50 %, 0,5)
TEINTE
SATURATION
LÉGÈRETÉ
ALPHA