CSS : codage HSL des couleurs

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

Le cercle chromatique

Exemples

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

Saturation : 100% et luminosité : 50%
valeur de la teinte (en degrés)Aperçu
0
20
40
60
80
100
120
140
160
180
200
220
240
260
280
300
320
340
360

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>

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

Teinte : 60 degrés (jaune) et luminosité : 50%
saturationAperçu
0%
20%
40%
60%
80%
100%

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).

Teinte: 120 degrés (vert) et saturation : 100%
LuminositéAperçu
0%
20%
40%
60%
80%
100%

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).

Teinte : 240 degrés (bleu) et saturation : 100%
LuminositéAperçu
0%
25%
50%
75%
100%

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%.
Retour menu