CSS3 - nouveautés concernant les couleurs

le codage HSL & HSLA des couleurs
une application en ligne pour composer vos couleurs selon la notation HSL
l'avantage de réaliser la transparence via la notation RGBA (ou HSLA)
le mot clé "currentColor"

La notation HSL des couleurs

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

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

Faisons varier le premier paramètre : teinte

Les deux autres paramètres sont 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

On obtient toutes les couleurs sauf le noir, le gris et le 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> ...

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

Le premier argument est 60° (teinte : jaune) et le troisième argument est 50%.

saturation	Aperç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é

Le premier paramètre vaut 120° (vert clair) et la saturation est toujours de 100%.

Luminosité	Aperçu
0%
20%
40%
60%
80%
100%

On obtient des nuances de vert mais surtout du noir et du blanc pour les valeurs extrèmes de luminosité.

Faisons encore varier le troisième paramètre : luminosité

La teinte est constante : 240° (bleu); la saturation est toujours de 100%.

Luminosité	Aperçu
0%
25%
50%
75%
100%

On obtient des nuances de bleu mais toujours du noir et du blanc pour luminosité valant 0% et 100%/

Conclusion

Donc pour obtenir du noir il suffit que le troisième argument soit à 0%.
Pour obtenir du blanc il suffit que la luminosité soit à 100%.

La notation HSLA

Pour passer de la notation HSL à la notation HSLA il suffit d'utiliser la fonction hsla() et de rajouter un quatrième argument : l'alpha qui est exprimé sous forme d'un nombre décimal compris entre 0 et 1.

Une boite remplie avec la notation HSLA

Boite remplie via la notation HSLA

Le code correspondant

<div style ="width : 40% ; height : 200px ; margin : 1% ; background : hsla(60,100%,50%,0.2);" >
	<p>Boite remplie via la notation HSLA</p>
</div>

Notez la syntaxe ... background : hsla(60,100%,50%,0.2);.
La valeur de l'argument alpha est 0.2 donc une très grande transparence du fond. Notez cependant que le texte dans la boite est quant à lui bien opaque ...

Une application en ligne

Je vous propose une application pour obtenir le code HSL à partir d'une palette.

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)

...
	<form>
	...
	<label>Sélectionner teinte  : </label><input type = 'range' min = '0' max = '360' step = '5' value ="0" />
	<label>Sélectionner saturation : </label><input type = 'range' min = '0' max = '100'  step = '5'	 value ="100"/>
	<label>Sélectionner luminosité : </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>
		<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

$("input:eq(0)").change(function(){afficher_couleur();});
$("input:eq(1)").change(function(){afficher_couleur();});
$("input:eq(2)").change(function(){afficher_couleur();});
// une même fonction appelée par trois événements différents
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);
}

Priviligiez la notation RGBA (ou HSLA) dans certains cas

Rappels

On peut dériver la notation RGB en RGBA ainsi que la notation HSL en HSLA.
Il suffit de rajouter un quatrième argument sous forme d'un décimal compris entre 0 et 1.
Il faut utiliser les fonctions rgba() ou hsla() à la place de rgb() et hsl().

Ci-dessous quatre boîtes avec un fond jaune quasi transparent

Boîte avec un fond jaune transparent

Les quatre boites sont remplies avec un fond jaune très transparent.
Dans les boites de gauche le texte est très transparent pratiquement illisible ...
Par contre pour les boites de droite le texte est bien opaque.

Le code correspondant

Le code CSS :

	.boite{display : inline-block ; width : 40% ; height : 200px ; margin : 1% ;  }
	#fond1{background-color : rgb(255,255,0) ; opacity : 0.2 ;}
	#fond2 {background-color : rgba(255,255,0,0.2)}
	#fond3{background-color : hsl(60,100%,50% ; opacity :0.2 }
	#fond4{background-color : hsla(60,100%,50%,0.2) }
	p.titre{color: black ; font-size : 20px;  text-align : center; }

Le code HTML : ... <div class ="boite" id = 'fond1' ><p class ="titre9">Boîte avec un fond jaune transparent</p> </div> <div class ="boite" id = 'fond2' ><p class ="titre9">Boîte avec un fond jaune transparent</p></div> <div class ="boite" id = 'fond3' ><p class ="titre9">Boîte avec un fond jaune transparent</p></div> <div class ="boite" id = 'fond4' ><p class ="titre9">Boîte avec un fond jaune transparent</p></div> ...

Pour deux boites positionnées à gauche, la transparence du fond est règlée grâce à la propriété opacity.
Pour les deux boites positionnées à droite, la transparence du fond est assurée par le quatrième argument des fonctions rgba() ou hsla().

La propriété opacity présente un inconvénient : la transparence s'applique non seulement à la couleur de fond mais aussi au texte de l'élément.

Le mot clé "currentColor"

Si vous utilisez currentColor pour définir la couleur d'une bordure, d'un arrière-plan ou d'une ombre, cette propriété adoptera automatiquement la même couleur que le texte de cet élément.
Ce mot clé fonctionne donc tel une variable.

Exemple

Bonjour, mes amis !

Il y a homogénéité dans la présentation : texte, bordure & ombrage en indigo.
Survolez la boite : tout passe en rouge !
Cliquez dans la boite : tout passe en vert olive !

Le code correspondant

Le CSS :

.maboite {color: indigo;  border: 5px solid currentColor;   
	box-shadow: 5px 5px 5px currentColor; text-align : center; 
	width : 50%; margin : 10px auto; padding : 10px}
.maboite:hover {color : red; }
.maboite:active {color : olive;}

La couleur de l'ombre et de la bordure sera toujours identique à la couleur du texte pour le même élément.

Le HTLM : <div class ="maboite"> Bonjour, mes amis ! </div>

On ne peut plus simple.

Intérêt d'utiliser le mot clé 'currentColor'

Si je n'avais pas utilisé le mot clé 'currentColor' j'aurais du écrire :

.maboite {color: indigo;  border: 5px solid indigo;   box-shadow: 5px 5px 5px indigo;
	width : 50%; margin : 10px auto; padding : 10px}
.maboite:hover {color : red; border: 5px solid red;   box-shadow: 5px 5px 5px red;}
.maboite:active {color : olive; border: 5px solid olive; box-shadow: 5px 5px 5px olive;}

Donc l'emploi du mot "currentColor" pour la règle de style principale simplifie la syntaxe des règles de style dépendantes.

Traduction

Tutoriel CSS3 - sommaire

Révisions CSS2

Nouveautés CSS3

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville

CSS3 - nouveautés concernant les couleurs

La notation HSL des couleurs

Le cercle chromatique

Faisons varier le premier paramètre : teinte

Faisons varier maintenant le deuxième paramètre : saturation

Faisons maintenant varier le troisième paramètre : luminosité

Faisons encore varier le troisième paramètre : luminosité

Conclusion

La notation HSLA

Une boite remplie avec la notation HSLA

Le code correspondant

Une application en ligne

Application dans un Iframe

Le code HTML de l'application (extraits)

Le code CSS

Le script écrit en JQuery

Priviligiez la notation RGBA (ou HSLA) dans certains cas

Rappels

Ci-dessous quatre boîtes avec un fond jaune quasi transparent

Le code correspondant

Le mot clé "currentColor"

Exemple

Le code correspondant

Intérêt d'utiliser le mot clé 'currentColor'