Fonction CSS hsl()
Exemple
Définition des couleurs HSL :
#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*/
Essayez-le vous-même »
Définition et utilisation
La fonction hsl() définit des couleurs à l'aide de la teinte, de la saturation et de la luminosité.
HSL signifie Teinte, Saturation et Luminosité (en anglais : Hue, Saturation, Lightness).
- Teinte (H)C'est une propriété de base de la couleur, c'est-à-dire le nom de couleur couramment utilisé, comme rouge, jaune, etc.
- Saturation (S)Elle désigne la pureté de la couleur. Plus la valeur est élevée, plus la couleur est pure ; plus la valeur est faible, plus elle devient grise, en prenant une valeur de 0-100%.
- Luminosité (L)Prend des valeurs de 0-100%. Augmenter la luminosité fait tendre la couleur vers le blanc ; diminuer la luminosité la fait tendre vers le noir.
HSL est une représentation des points du modèle de couleur RGB dans un système de coordonnées cylindriques. Ces deux représentations tentent d'être plus intuitives que RGB, qui est basé sur une géométrie de coordonnées cartésiennes.
Versions prises en charge : CSS3
Prise en charge des navigateurs
Les nombres dans le tableau indiquent le premier numéro de version de navigateur qui prend en charge cette fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| hsl() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
Syntaxe CSS
hsl(hue, saturation, lightness)
| Valeur | Description |
|---|---|
| teinte - teinte | Définit la teinte (0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu. |
| saturation - saturation | Définit la saturation ; 0% est gris, 100% est couleur pleine. |
| luminosité - éclat | Définit la luminosité ; 0% est sombre, 50% est normal, 100% est blanc. |
autres extensions