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

Le cercle chromatique

Exemples

Faisons varier le premier paramètre (teinte); 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> <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

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

Une application en ligne

Utilisez cette aplication

Une application pour déterminer le code HSL d'une couleur

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

Le code HTML de l'application (extraits)

... <form> ... <h3>Déplacer les curseurs jusqu'à ce que vous ayez trouvé la bonne couleur</h3> <label>saisir teinte : </label><input type = 'range' min = '0' max = '360' step = '5' value ="180" /> <label>saisir saturation : </label><input type = 'range' min = '0' max = '100' step = '5' value ="50"/> ... <h3>La couleur correspondante : </h3> <div></div> <h3>Le code HSL de cette couleur : </h3> <p>A utiliser comme valeur de la propriété CSS background ou color !</p> <input type ="text" readonly /> </form>

Un formulaire HTML5 avec les nouveaux champs de type range !

Le code CSS

	div {width : 200px ; height : 200px ; margin: 10px auto 10px auto ; 
			border : 1px solid black ;
			background : hsl(180,50%,50%);}

Le script écrit en JQuery (extraits)

$("input:eq(0)").change(function(){afficher_couleur();});
...
  
function afficher_couleur()
{
	// couleur de fond de la boîte DIV
	var teinte = $("input:eq(0)").val(); 
	var saturation = $("input:eq(1)").val(); 
	var luminosite = $("input:eq(2)").val(); 
	var couleur = 'hsl('+ teinte + ',' + saturation + '%,' + luminosite +'%)'; 
	$('div').css("background",couleur);
	// le code HSL en détail
	$("input:text").val(couleur);
}

Retour menu