HSL

Signifie « Hue, Saturation, Lightness ».

HSL est un modèle colorimétrique qui définit les couleurs à l’aide d’un ensemble de trois attributs, comme le modèle colorimétrique RVB. Il commence par définir un point sur la roue chromatique, puis ajuste la saturation et la clarté pour créer la couleur finale. Les graphistes et les concepteurs de sites Web l’utilisent souvent, car il permet d’effectuer plus facilement de petits ajustements de couleur sans avoir à utiliser un sélecteur de couleurs.

Au lieu de représenter une couleur comme un mélange d’autres couleurs, comme dans le modèle colorimétrique RVB, HSL utilise les trois attributs que sont la teinte, la saturation et la clarté pour définir une couleur :

• La teinte représente la position angulaire sur la roue chromatique sous la forme d’un nombre compris entre 0 et 359º. Le rouge pur se trouve en haut de la roue, avec une valeur angulaire de 0º ; le cyan se trouve à l’extrémité opposée, à 180º.
• La saturation représente l’intensité de la couleur sous la forme d’un pourcentage compris entre 0 et 100 %. Une saturation de 0 % produit du gris.
• La clarté représente la clarté de la couleur sous la forme d’un pourcentage compris entre 0 et 100 %. Une clarté de 0 % correspond au noir, une clarté de 50 % correspond à la couleur elle-même et une clarté de 100 % correspond au blanc.

Le modèle colorimétrique HSL peut produire la même gamme de couleurs que le RVB, mais avec une présentation différente. Par exemple, une couleur cyan claire avec les valeurs RVB R:166, V:242, B:242 ou la valeur (hexadécimale #A6F2F2) est identique à une couleur ayant une teinte de 180º, une saturation de 75 % et une clarté de 80 %. Les fichiers d’images numériques enregistrent toujours les informations de couleur sous forme de valeurs RVB, même lorsqu’un éditeur d’images utilise HSL.

HSL est considéré comme une méthode plus intuitive pour définir les couleurs sous la forme d’un ensemble de nombres. Les concepteurs de sites Web définissent souvent les couleurs en CSS à l’aide de HSL plutôt que de RVB afin de simplifier les petits ajustements. Par exemple, si un concepteur de sites Web a défini une couleur à l’aide du code CSS hsl(180, 75%, 80%), il peut la rendre plus sombre en réduisant la valeur de luminosité. S’il tentait d’effectuer le même ajustement avec des valeurs RVB, il devrait modifier les trois valeurs selon des proportions différentes.

NOTE: Le modèle colorimétrique HSL est similaire au modèle HSB. Alors que HSB utilise le même calcul pour la teinte, il utilise la luminosité au lieu de la clarté — une valeur de 100 représentant la couleur maximale plutôt que le blanc — ce qui influe également sur le calcul de la saturation.