manuel de référence CSS

règle CSS (RULES)

大全 des propriétés CSS

Fonction CSS hsl()

La fonction CSS hsl() peut être utilisée pour fournir des valeurs de couleur lors de l'utilisation de CSS. Elle vous permet de spécifier une valeur de couleur en indiquant l'angle de teinte, la saturation et la luminosité.

Fonction CSS

Exemple en ligne

Définir la couleur HSL :

Exemple

<!DOCTYPE html>
<title>Tutoriel de base (oldtoolbag.com)</title>/title>　
<style>
body {
　　　　background: hsl(30,　100%,　50%);
　　　　color: hsl(30,　100%,　75%);
　　　　font-size:　1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>Il faut du temps pour faire ce que nous n'avons jamais fait...</p>

Voyons voir ‹/›

Définition et utilisation

La fonction hsl() utilise la teinte, la saturation et la luminosité pour définir la couleur.

HSL signifie teinte, saturation, luminosité (en anglais : Hue, Saturation, Lightness).

Teinte (H)C'est une propriété fondamentale de la couleur, c'est ce que l'on appelle généralement le nom de la couleur, par exemple rouge, jaune, etc.
Saturation (S)C'est la pureté de la couleur, plus élevée, la couleur est plus pure, et elle devient progressivement grise, prendre 0-10Valeur de 0%.
Luminosité (L), prendre 0-100%, augmente la luminosité, la couleur change vers le blanc ; diminue la luminosité, la couleur change vers le noir.

HSL est une méthode pour représenter un point dans le système de couleur RGB dans un système de coordonnées cylindriques. Ces deux représentations tentent de rendre le RGB basé sur la géométrie de système de coordonnées cartésiennes plus intuitif.

Version prise en charge : CSS3

Compatibilité du navigateur

Les nombres dans le tableau indiquent la version du premier navigateur pris en charge pour cette fonction.

Fonction
hsl()	1.0	9.0	1.0	3.1	9.5

Syntaxe CSS

hsl(hue, saturation, luminosité)

Valeur	Description
hue - Teinte	Définir la teinte (0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu
saturation - Saturation	Définir la saturation; 0% est gris, 100% est pleine couleur
luminosité - Luminosité	Définir la luminosité 0% comme sombre, 50% est normal, 100% est blanc

Exemple de changement de couleur

Dans le graphique suivant, la teinte et la luminosité de tous les échantillons sont complètement identiques. La seule différence est la saturation.

`hsl(240, 100%, 50%)`
`hsl(240, 90%, 50%)`
`hsl(240, 80%, 50%)`
`hsl(240, 70%, 50%)`
`hsl(240, 60%, 50%)`
`hsl(240, 50%, 50%)`
`hsl(240, 40%, 50%)`
`hsl(240, 30%, 50%)`
`hsl(240, 20%, 50%)`
`hsl(240, 10, 50%)`
`hsl(240, 0%, 50%)`

Dans l'image suivante, la teinte et la saturation de tous les échantillons sont complètement identiques. La seule différence est le niveau de luminosité.

`hsl(240, 100%, 100%)`
`hsl(240, 100%, 90%)`
`hsl(240, 100%, 80%)`
`hsl(240, 100%, 70%)`
`hsl(240, 100%, 60%)`
`hsl(240, 100%, 50%)`
`hsl(240, 100%, 40%)`
`hsl(240, 100%, 30%)`
`hsl(240, 100%, 20%)`
`hsl(240, 100%, 10)`

Fonction CSS

Règle @charset CSS Fonctions CSS