hsl()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
La notation fonctionnelle hsl()
exprime une couleur sRGB selon ses composantes de teinte (hue en anglais), saturation, et luminosité. Une composante alpha optionnelle représente l'opacité de la couleur.
Exemple interactif
Il est facile d'utiliser des couleurs complémentaires avec hsl()
, car celles-ci sont positionnées à l'opposé du cercle de couleur utilisé par la teinte. Ainsi, si theta
est l'angle de la teinte d'une couleur, on pourra obtenir la couleur complémentaire avec l'angle 180deg-theta
.
Syntaxe
/* Séparation des arguments par des espaces */
hsl(teinte saturation luminosite)
hsl(teinte saturation luminosite / alpha)
/* Séparation des valeurs par des virgules */
hsl(teinte, saturation, luminosite)
hsl(teinte, saturation, luminosite, alpha)
Valeurs
teinte
-
Un angle (type
<angle>
) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on ared=0deg=360deg
, et les autres couleurs distribuées sur le cercle avecgreen=120deg
,blue=240deg
, etc. Sa valeur étant un<angle>
, elle boucle sur elle-même et on a donc-120deg=240deg
,480deg=120deg
,-1turn=1turn
, etc. Ce cercle chromatique pourra vous aider à trouver l'angle associé à une couleur donnée : saturation
-
Un pourcentage (type
<percentage>
) où100%
indique une couleur complètement saturée et où0%
indique une couleur complètement désaturée, c'est-à-dire un niveau de gris. luminosite
-
Un pourcentage (type
<percentage>
) où100%
fournit du blanc, où0%
fournit du noir, et où50%
fournit une couleur « normale ». alpha
Facultatif-
A
(alpha) peut être un nombre (type<number>
) compris entre0
et1
, ou un pourcentage (type<percentage>
), où1
correspond à100%
(opacité complète) et0
à0%
(transparence complète).
Exemples
La fonction hsl()
fonctionne bien avec la fonction conic-gradient()
, les deux travaillant avec des angles.
div {
width: 100px;
height: 100px;
background: conic-gradient(
hsl(360, 100%, 50%),
hsl(315, 100%, 50%),
hsl(270, 100%, 50%),
hsl(225, 100%, 50%),
hsl(180, 100%, 50%),
hsl(135, 100%, 50%),
hsl(90, 100%, 50%),
hsl(45, 100%, 50%),
hsl(0, 100%, 50%)
);
clip-path: circle(closest-side);
}
Spécifications
Specification |
---|
CSS Color Module Level 5 # relative-HSL |
CSS Color Module Level 4 # the-hsl-notation |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La fonction
hsla()
, un synonyme historique pour cette fonction. - Le type
<color>
qui permet de représenter n'importe quelle couleur en CSS. - Un sélecteur de couleur HSL