Couleurs HSL CSS
- Page précédente Couleurs HEX CSS
- Page suivante Arrière-plan CSS
Valeur HSL
Dans CSS, vous pouvez utiliser la teinte, la saturation et la luminosité (HSL) pour spécifier une couleur, avec le format suivant :
hsla(hue, saturation, lightness)
Teinte (hue）représente les degrés de la roue des couleurs de 0 à 360. 0 est le rouge, 120 est le vert, et 240 est le bleu.
Saturation (saturation）est une valeur en pourcentage, 0% signifie une ombre grise et 100% est la couleur complète.
Luminosité (lightness）est également une valeur en pourcentage, 0% est noir, 50% est ni sombre ni clair, et 100% est blanc.
Expérimentez en mélangeant les valeurs HSL suivantes :
HUE
SATURATION
LIGHTNESS
Exemple
Saturation
La saturation peut être décrite comme la force de la couleur.
100% est une couleur pure, sans ombre grise
50% est une couleur grise à 50%, mais vous voyez toujours la couleur.
0% est une couleur grise complète, vous ne voyez plus de couleur.
Exemple
Luminosité
La luminosité d'une couleur peut être décrite comme la quantité de lumière à donner à la couleur, où 0% signifie sombre (noir), 50% signifie 50% de luminosité (ni sombre ni clair), et 100% signifie lumineux (blanc).
Exemple
Généralement, en définissant le ton et la saturation à 0, on définit les ombres grises et en ajustant l'éclat de 0% à 100%, on peut obtenir des ombres plus profondes ou plus claires :
Exemple
Valeur HSLA
La valeur de couleur HSLA est une extension de la valeur de couleur HSL avec un canal alpha - elle spécifie l'opacité de la couleur.
La valeur de couleur HSLA est définie comme :
hsla(hue, saturation, lightness, alpha)
alpha Les paramètres sont des nombres entre 0.0 (complètement transparent) et 1.0 (complètement opaque) :
Expérimentez en mélangeant les valeurs HSLA suivantes :
HUE
SATURATION
LIGHTNESS
ALPHA
Exemple
- Page précédente Couleurs HEX CSS
- Page suivante Arrière-plan CSS
