Tutoriel CSS3 - sommaire

CSS : notation HSL des couleurs avec CSS3

Une nouvelle méthode pour coder les couleurs apparait avec le CSS3. Il s'agit du HSL (Hue, Saturation, Lightness). Traduisez en français TSL (Teinte, Saturation, Luminosité).

Ce système de codage se veut plus proche de la perception des couleurs par l'être humain :
• la teinte représente la couleur indiquée par un angle (en degrés) dans le cercle chromatique;
• la saturation est un pourcentage qui va de 0% (gris) à la couleur la plus vive (100%) ; entre les deux un mélange de gris et de couleur.
• la luminosité est aussi un pourcentage où 0% correspond au noir et 100% au blanc

Le cercle chromatique

Exemples

Faisons varier le premier paramètre (teinte); les deux autres paramètres étant constants

Ni de gris, ni de noir, ni de blanc !

Extrait du code correspondant au tableau : ... <tr><th>valeur du rayon</th><th>Aperçu</th></tr> <tr><td>0</td><td style ="background :hsl(0,100%,50%);" ></td></tr> <tr><td>20</td><td style ="background :hsl(20,100%,50%);" ></td></tr> <tr><td>40</td><td style ="background :hsl(40,100%,50%);" ></td></tr> <tr><td>60</td><td style ="background :hsl(60,100%,50%);" ></td></tr> <tr><td>80</td><td style ="background :hsl(80,100%,50%);" ></td></tr> <tr><td>100</td><td style ="background :hsl(100,100%,50%);" ></td></tr> <tr><td>120</td><td style ="background :hsl(120,100%,50%);" ></td></tr> <tr><td>140</td><td style ="background :hsl(140,100%,50%);" ></td></tr> ...

Notez bien la syntaxe de la fonction hsl.
Le premier argument est exprimé en degrés mais cette unité n'est pas précisée. Les deux autres paramètres sont des pourcentages ; un nombre décimal n'est pas admis !

Faisons varier maintenant le deuxième paramètre (saturation); les deux autres paramètres étant constants

On obtient du gris (première ligne) et des couleurs plus ou moins grisées pour arriver à un jaune éclatant (dernière ligne).

Faisons maintenant varier le troisième paramètre (luminosité); les deux autres paramètres étant constants

Le premier paramètre vaut 120 (green).

On obtient enfin du noir et du blanc !

Faisons encore varier le troisième paramètre (luminosité); les deux autres paramètres étant constants

Mais cette fois la teinte est 240 degrés (bleu).

On obtient de nouveau du blanc et du noir.

Donc pour obtenir du noir il suffit que le troisième paramètre soit à 0%.
Pour obtenir du blanc il faut que le troisième argument soit à 100%.
Pour produire du gris c'est le deuxième argument qui doit être à 0%.

Une application en ligne

Une application pour obtenir le code HSL d'une couleur à partir d'une palette de couleurs.

Application dans un Iframe

Ouvrez cette page et ajoutez la à vos favoris !
Dans un premier temps ne déplacez que le premier curseur (déplacement dans le cercle chromatique).

Le code HTML de l'application (extraits)

Un formulaire HTML5 avec les nouveaux champs de type range !

Le code CSS

Le script écrit en JQuery