Les fonctions CSS `hsl()` et `hsla()`

hsl()

Résumé des caractéristiques de la fonction `hsl()`

Description rapide

Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité, une alternative plus proche de notre mode de raisonnement.

Statut

Standard

Pourcentages

Utilisables sauf pour le premier paramètre (la teinte).

Module W3C

Module CSS - Couleurs

Références (W3C)

🡇

🡅

CSS Color Module Level 5

Statut du document: WD (document de travail)

CSS Color Module Level 4

Statut du document: WD (document de travail)

CSS Color Module Level 3

Statut du document: REC (recommandation)

Schéma syntaxique de `hsl()`.

Schéma syntaxique de la fonction hsl()
Syntaxe détaillée

Les termes présents sur le schéma sont décrits ci-dessous :

color est une couleur de référence optionnelle.
angle est une valeur numérique suivie d'une des unités d'angle. Elle correspond à la teinte.
% sont des pourcentages correspondant à la saturation et à la luminosité.
alpha est un nombre sans unité compris entre 0 et 1 ou un pourcentage : l'opacité de la couleur (canal alpha).

Description des fonctions `hsl()` et `hsla()`.

Le système RGB est non-intuitif. Il a été conçu pour le pilotage des écrans. Pour compenser cela, CSS introduit le système HSL pour définir une couleur à partir de sa teinte, sa saturation, sa luminosité, et éventuellement son opacité.
De plus, la conversation en RGB est facile.

Les fonctions hsl() et hsla() sont synonymes. Elles définissent une couleur à partir de ces quatre paramètres : teinte, saturation, luminosité, et éventuellement l'opacité.

Ces deux fonctions peuvent être utilisées avec toutes les propriétés qui attendent une couleur. Exemples :


	background-color: hsl(270deg 40% 50%);
	border-color: hsla(90deg 50% 75% / 0.5);

La notation `HSL`.

Le nuancier des couleurs est souvent représenté de façon circulaire. Il prend alors le nom de roue des couleurs ou de cercle chromatique. Cela explique pourquoi la teinte est exprimée en degrés : c'est sa position sur le cercle.

Roue des couleurs

La notation HSL présente les particularités suivantes :

La luminosité (troisième paramètre) à 100% donne du blanc, quelque soit la valeur des deux autres paramètres.
A l'inverse, la luminosité à 0 donne du noir. Les deux autres paramètres sont là aussi sans effet.
La saturation (deuxième paramètre de la fonction hsl() à 0 donne du gris. La luminosité définit s'il s'agit d'un gris clair ou d'un gris foncé. Le paramètre teinte est sans effet.
En dehors de ces cas particuliers, les trois paramètres contribuent à définir la couleur.
La couleur complémentaire s'obtient en ajoutant 180 degrés.

La notation HSL est réputée être plus intuitive que la notation RGB. Il est plus facile par exemple de définir des jeux de couleurs cohérents en faisant varier un seul paramètre (la luminosité par exemple).

Vous trouverez ici un synthétiseur de couleurs. Un autre simulateur est présent en bas de cette page. Le plus simple est de choisir en premier la teinte en se basant sur la roue des couleurs. Ensuite on ajuste la saturation et la luminosité pour obtenir la nuance cherchée.

La transparence d'une couleur.

Avec l'une ou l'autre de ces deux fonctions, il est possible de préciser un paramètre supplémentaire : l'opacité, qui dose la transparence de la couleur, c'est à dire la possibilité de voir à travers. Bien entendu si l'opacité est à 0 la couleur est totalement transparente, donc invisible.

Les fonctions hsl() et hsla() peuvent être utilisées avec :

accent-color : Définit la couleur des élément actifs, cochés.
background-color : Définit la couleur en arrière-plan.
border-color : Définit la couleur des bordures.
caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
color : Définit la couleur de l'avant plan (texte essentiellement).
column-rule-color : Définit la couleur des lignes de séparation de colonnes.
lighting-color : Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.
outline-color : Définit la couleur du contour (outline).
scrollbar-color : Définit deux couleurs qui seront utilisées pour les barres de défilement.
text-decoration-color : Définit la couleur du trait de décoration (souligné, rayure...).
text-emphasis-color : Définit la couleur des caractères de mise en exergue.

Syntaxe de `hsl()` et `hsla()`.

color: hsl(67deg, 50%, 30%); color: hsl(67deg 50% 30%); h s l

La fonction hsl() attend trois paramètres, tous obligatoires :
1. h : C'est une valeur numérique avec sont unité d'angle (voir les unités d'angle). Si l'unité est omise, la valeur est supposée être exprimée en degrés. h indique la teinte sur la roue des couleurs : 0 correspondant à du rouge.
2. s : est un pourcentage, compris entre 0 à 100%. Il indique la valeur de la saturation. Une saturation à 0% donne du gris, quelque soit la teinte choisie. A l'inverse une saturation maximale (100%) donne un couleur très vive.
3. l est un pourcentage compris entre 0 à 100%. Il indique la valeur de la luminosité. Une luminosité à 0% donne du noir, tandis qu'une luminosité à 100% donne du blanc, quelque soit la teinte et la saturation choisies.
La deuxième syntaxe est équivalente, mais les paramètres sont séparés par un simple espace (pas de virgule). Le W3C préconise plutôt la syntaxe sans virgules. Les navigateurs traitent maintenant aussi bien l'une que l'autre de ces syntaxes. Reportez-vous aux tableaux de compatibilité à la fin de cette page.

Dans la deuxième syntaxe on peut éventuellement remplacer une ou plusieurs de ces valeurs par none.
color: hsl(120deg, 50%, 30%, 0.6); color: hsl(120deg 50% 30% / 0.6); h s l a

Un quatrième paramètre peut être précisé, soit il sera séparé par une virgule (ancienne syntaxe), soit par un slash (nouvelle syntaxe). Ce paramètre traduit l'opacité de la couleur.
1. a : une valeur numérique flottante comprise entre 0 et 1, ou un pourcentage compris entre 0 et 100%. Ce paramètre correspond à la valeur de l'opacité (canal alpha). 0 pour aucune opacité (transparence totale) et 1 (ou 100%) pour une opacité complète. Les valeurs intermédiaires indiquant une opacité plus ou moins importante.
La dernière syntaxe n'utilise pas de virgule pour séparer les valeurs, mais nécessite un slash avant le paramètre a. Attention toutefois à ne pas faire de mixte entre les syntaxes.
color: hsl(from yellow calc(h + 180) s l / alpha);

Cette nouvelle syntaxe est définie dans le niveau 4 du module "CSS Color". Elle permet de spécifier une couleur à partir d'une couleur de référence. Dans l'exemple, la couleur de référence est le jaune, auquel on applique une rotation de 180 degrés sur la roue des couleurs. On obtient alors la couleur complémentaire qui est le bleu, la saturation et la luminosité étant inchangées.

Les variables h, s, l, et éventuellement alpha représente respectivement la teinte, la saturation, la luminosité, et la valeur alpha de la couleur de référence. Il est possible de faire des calculs en utilisant la fonction calc().

Remarques. Firefox ne traite pas les calculs sur la teinte.
Dans cas d'une addition à la teinte, il ne faut pas indiquer d'unité : écrire calc(h+180) et non pas calc(h+180deg).
color: hsla(67deg, 50%, 30%, 0.6); color: hsla(67deg 50% 30% / 0.6); h s l a

La fonction hsla() est équivalente à hsl(). Son seul intérêt est d'attirer l'attention sur le fait qu'un quatrième paramètre est attendu.

Animation de la fonction `hsl()`.

Le système HSL permet d'animer les couleurs en jouant séparément sur les paramètres saturation, luminosité ou sur la teinte, ce qui n'est pas possible en RGB. Voici par exemple deux animations : la première sur la saturation, la deuxième sur la luminosité.

Conversion de HSL vers RGB.

La conversion de HSL vers RGB peut se faire avec un peu de code Javascript. Voici un exemple qui fonctionne avec des pourcentages. La fonction renvoie un tableau de trois chiffres, qui sont le pourcentage de rouge, de vert et de bleu.


	function hslToRgb(hue, sat, lum) {
	   hue = hue % 360;
	   if (hue < 0) {hue += 360;}
	   sat = sat/100;
	   lum = lum/100;

	   function f(n) {
		  let k = (n + hue/30) % 12;
		  let a = sat * Math.min(lum, 1 - lum);
		  return 100*(lum - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)));
	   }

	   return [f(0), f(8), f(4)];
	}

Voici comment l'utiliser : admettons que le valeurs HSL soit 90deg, 50% pour la saturation, et 50% pour la luminosité. On appelle la fonction de la façon suivante :


	let rgb = hslToRgb(90,50,50);

La variable rgb est un tableau de trois nombres, qui s'utilisent comme ci-dessous si el est l'élément à modifier :


	el.style['background-color']='rgb(' + rgb[0] + '% ' + rgb[1] + '% ' + rgb[2] + '%)';

Simulateur avec la fonction `hsl()`

background-color :

transparent

hsl( 90deg 50% 100% ) /* Luminosité à 100% -> blanc */

hsl( 90deg 50% 0% ) /* Luminosité à 0 -> noir */

hsl( 45deg 0% 50% ) /* Saturation à 0 -> gris */

hsl( 90deg 50% 50% / 50% ) /* Couleur semi-transparente */

hsl( from red h calc(s / 2) l ) /* Couleur relative à une autre */

Compatibilité des navigateurs.

Tous les navigateurs sont maintenant capables de traiter les couleurs définies avec la notation HSL ainsi que la transparence alpha.

D'après la norme, les fonctions hsl() et hsla() acceptent des paramètres séparés par des espaces au lieu de virgules. Ces deux syntaxes sont maintenant bien reconnues, sauf par le défunt navigateur Internet Explorer.

Colonne 1

Prise en charge de la définition d'une couleur à partir de ses trois paramètres : teinte, luminosité, saturation.

Colonne 2

Support de la fonction hsl() permettant de définit une couleur avec ses trois paramètres : teinte (hue), luminosité et saturation.

Colonne 3

Support de la fonction hsla() définissant une couleur avec les quatre paramètres : teinte (hue), saturation, luminosité et opacité.

Colonne 4

Support de la syntaxe de hsl() et hsla() utilisant des espaces comme séparateurs.

Couleurs
HSL

Fonction
hsl()

Fonction
hsla()

Séparateur
espace

Estimation de la prise en charge globale.

98%

97%

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `hsl()`.

Module CSS - Couleurs - Niveau 3

Introduction du système HSL (Hue, Saturation, Lightness) pour la définition des couleurs.
Et description des fonctions hsl() et hsla().

23 Juin 1999
Document de travail.
14 Mai 2003
Candidat à la recommandation.
28 Octobre 2010
Proposé à la recommandation.
07 Juin 2011
Recommandation.
Module CSS - Couleurs - Niveau 4

La syntaxe des fonctions hsl() et hsla() accepte également la nouvelle syntaxe utilisant un espace pour séparer les paramètres.

05 Juillet 2016
Document de travail.
05 Juillet 2022
Candidat à la recommandation.
Module CSS - Couleurs - Niveau 5

Introduction de la notion de couleurs relatives, définies par rapport à une autre couleur (syntaxe avec from).

03 Mars 2020
Document de travail.

Voir aussi, à propos des couleurs.

Les fonctions hsl() et hsla() sont décrites dans le module CSS Color Module, qui regroupe tout ce qui concerne la gestion des couleurs. Les définitions suivantes sont également décrites dans ce module :