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

css
/* 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 a red=0deg=360deg, et les autres couleurs distribuées sur le cercle avec green=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 : Un cercle chromatique indiquant l'angle de la teinte pour les couleurs primaires (rouge-vert-bleu) et secondaires (jaune-cyan-magenta).

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 entre 0 et 1, ou un pourcentage (type <percentage>), où 1 correspond à 100% (opacité complète) et 0 à 0% (transparence complète).

Exemples

La fonction hsl() fonctionne bien avec la fonction conic-gradient(), les deux travaillant avec des angles.

css
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