Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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é.
Statut
Standard
Pourcentages
Utilisables sauf pour le premier paramètre (la teinte).
Module W3C
Module CSS - Couleurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Description des fonctions hsl() et hsla().

Les fonctions hsl() et hsla() sont synonymes. Elles définissent une couleur à partir de trois paramètres qui sont la teinte (hue), la saturation, la luminosité, et éventuellement un quatrième paramètre : 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 Object. 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 :

Syntaxe de hsl() et hsla().

h, s et l sont les valeurs respectivement de la teinte (hue), la saturation, et la luminosité.
α est la valeur de l'opacité (canal alpha).
c est une couleur de référence optionnelle.

drop-shadow(
Schéma syntaxique de la fonction drop-shadow() pour CSSSyntaxe de la fonction drop-shadow() utilisable pour ombrer des éléments en CSS. from c from c h s l h s l / α / α
)
  • 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 CSS 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.
    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 semble plutôt favoriser 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.

  • 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, soit par un slash. 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 + 180deg) s l);

    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.

    Attention ! Cette syntaxe n'est pas encore prise en charge par les navigateurs (2022).

  • 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.

Simulateur.

background-color :

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 par ses paramètres HSL : Hue (teinte), Saturation, Luminosité.
Colonne 2
Prise en charge de la fonction CSS .
Colonne 2
Prise en charge de la fonction CSS .
Colonne 2
Syntaxe des fonctions et avec des espaces pour séparer les paramètres.
1
HSL colors
2
hsl()
3
hsla()
4
New syntax
Estimation de la prise en charge en pourcentage du parc actuel.
99%
95%
95%
92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que hsl().

Les spécifications CSS éditées par le W3C sont organisées en modules. hsl() fait partie du Module CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit la couleur de l'avant plan (texte essentiellement).
Opacité (ou transparence).

Fonctions.

Définit une couleur dans un espace de couleurs autre que sRGB.
Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
Définit une couleur dans le système L*a*b*.
Définit une couleur dans le système L*C*H*.
Définit une couleur dans le système L*a*b* avec une correction perceptive.
Définit une couleur dans le système L*C*H* avec une correction perceptive.
Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Directives.

Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().