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.

* Some parts of this feature may have varying levels of support.

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);
}

must be provided

Spécifications

Specification
CSS Color Module Level 5
# relative-HSL
CSS Color Module Level 4
# the-hsl-notation

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hsl() (HSL color model)
Alpha parameter
Mix <percentage> and <number> in parameters
Relative HSL colors
Space-separated parameters

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

Voir aussi