Fonction hsl() en CSS

Définition et utilisation

Définition et utilisation de hsl() La fonction utilise le modèle de couleur teinte-saturation-luminosité (HSL) pour spécifier la couleur. Vous pouvez également ajouter une composante alpha optionnelle (représentant la transparence de la couleur).

Astuce :HSL représente le ton (Hue), la saturation (Saturation) et la luminosité (Lightness), c'est une représentation de la couleur en coordonnées cylindriques.

Attention :hsla() La fonction est hsl() Alias de la fonction. Il est recommandé d'utiliser hsl() Fonction.

Exemple

Exemple 1

Définir différentes couleurs HSL(A) :

#p1 {background-color:hsl(120 100% 50%);} /* Vert */
#p2 {background-color:hsl(120 100% 75%);} /* Vert clair */
#p3 {background-color:hsl(120 100% 25%);} /* Vert foncé */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Un vert foncé avec transparence */
#p5 {background-color:hsl(120 60% 70%);} /* Une teinte de vert pâle */
#p6 {background-color:hsl(290 100% 50%);} /* Pourpre */
#p7 {background-color:hsl(290 60% 70%);} /* Une teinte de pourpre pâle */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Une teinte de pourpre pâle avec transparence */

Essayez-le vous-même

Exemple 2

Ancienne syntaxe de séparation des valeurs par des virgules :

#p1 {background-color:hsl(120, 100%, 50%);} /* Vert */
#p2 {background-color:hsl(120, 100%, 75%);} /* Vert clair */
#p3 {background-color:hsl(120, 100%, 25%);} /* Vert foncé */
#p4 {background-color:hsl(120, 60%, 70%);} /* Vert doux */
#p5 {background-color:hsl(290, 100%, 50%);} /* Pourpre */
#p6 {background-color:hsl(290, 60%, 70%);} /* Pourpre doux */

Essayez-le vous-même

Syntaxe CSS

Syntaxe de valeur absolue

hsl(teinte saturation luminosité / A)
Valeur Description
teinte Obligatoire. Définit l'angle sur le cercle chromatique (de 0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu.
saturation

Obligatoire. Définit la saturation de la couleur ; 0% est gris, 100% est pleine couleur (saturation complète).

Vous pouvez également utiliser None (équivalent à 0%).
luminosité

Obligatoire. Définit la luminosité de la couleur ; 0% est noir, 50% est normal, 100% est blanc.

Vous pouvez également utiliser None (équivalent à 0%).
/ A

Optionnel. Représente la valeur du canal alpha de la couleur (de 0% (ou 0) - complètement transparent à 100% (ou 100) - complètement opaque).

Vous pouvez également utiliser None (représentant un canal alpha absent).

La valeur par défaut est de 100%.

Syntaxe de valeur relative

hsl(from couleur teinte saturation luminosité / A)
Valeur Description
from couleur

Commence par le mot-clé from, suivi d'une valeur de couleur représentant la couleur originale.

C'est la couleur originale sur laquelle se base la couleur relative.
teinte Obligatoire. Définit l'angle sur le cercle chromatique (de 0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu.
saturation

Obligatoire. Définit la saturation de la couleur ; 0% est gris, 100% est pleine couleur (saturation complète).

Vous pouvez également utiliser None (équivalent à 0%).
luminosité

Obligatoire. Définit la luminosité de la couleur ; 0% est noir, 50% est normal, 100% est blanc.

Vous pouvez également utiliser None (équivalent à 0%).
/ A

Optionnel. Représente la valeur du canal alpha de la couleur (de 0% (ou 0) - complètement transparent à 100% (ou 100) - complètement opaque).

Vous pouvez également utiliser None (représentant un canal alpha absent).

La valeur par défaut est de 100%.

Détails techniques

Version : CSS3

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
Avec alpha Paramètres hsl()
65 79 52 12.1 52
Paramètres séparés par des espaces
65 79 52 12.1 52

Pages associées

Tutoriel :Couleur HSL CSS

Référence :Couleurs CSS

Référence :Fonction hwb() CSS

Référence :Fonction lab() CSS

Référence :Fonction lch() CSS

Référence :Fonction oklab() CSS

Référence :Fonction oklch() CSS