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 :

CSS - Fonction hsl()

Description des fonctions hsl() et hsla().

La fonction <hsl() définit une couleur à partir de trois paramètres qui sont la teinte (hue), la saturation et la luminosité.

La fonction hsla() traite un paramètre supplémentaire qui est l'opacité (le canal alpha).

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

background-color: hsl(270,40%,50%); border: solid 3px hsla(90,50%,75%,0.5);

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

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.

L'opacité est une paramètre supplémentaire qui dose la transparence de la couleur, c'est à dire la possibilité de voir à travers.

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

Syntaxe de hsl() et hsla().

  • 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 angulaires en CSS). 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 choisie.
  • color: hsl(67deg, 50%, 30%, 10%); h s l a

    La fonction hsla() attend un paramètre supplémentaire :

    1. a : une valeur numérique flottante comprise entre 0 et 1, ou un pourcentage 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.

Simulateur.

background-color:
( h s l a )

Compatibilité des navigateurs.

Tous les navigateurs sont maintenant capables de traiter les couleurs définies soit par les valeurs de Rouge, Vert et Bleu (RVB), soit par les valeurs de Teinte, Saturation et Luminosité (HSL), ainsi que la transparence alpha.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Couleurs - Propriétés.

Couleurs - Fonctions.

  • hsla() : Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • hwb() : Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
  • rgb() : Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
  • rgba() : Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.