Comprendre les couleurs en CSS3

Chrome, Safari, Opera, Firefox 4, Internet Explorer 9

Le CSS3 inclut maintenant dans la norme, la notion de teinte, de saturation et de luminosité (Hue, Saturation, Luminosity).

Le Hue permet de modifier la teinte donc la couleur, c'est une valeur numérique.

Par exemple, 0 (ou 360) représente le rouge, 120 le vert et 240 le bleu ; c'est une mesure sur la roue chromatique. Entre ces 3 valeurs, ce sont les nuances.

• entre 0 et 119 (nuance de rouge) ;
• entre 120 et 239 (nuance de vert) ;
• entre 240 et 359 (nuance de bleu).

La saturation est une valeur de pourcentage, 100% équivalent à la couleur.

La luminosité est une valeur en pourcentage:

• 0% est le sombre (noir) ;
• 50% est la moyenne ;
• 100% est la lumière (blanc).

Exemple :

CSS

	p.hsl{
		background-color:hsl(100, 100%, 50%);
		color:hsl(250, 100%, 50%);
	}
	p.hslAutre{
		background-color:hsl(100, 100%, 50%);
		color:hsl(250, 100%, 25%);/* couleur plus sombre que la précédente */
	}

HTML

	<p class="hsl"> couleurs gérées en hsl </p>
	<p class="hslAutre"> couleurs gérées en hsl </p>

Démo

C'est la même chose que la couleur hsl, sauf qu'il y a en plus la gestion de l'opacité de la couleur (sa transparence).

Exemple :

CSS

	p.hsla{
		background-color:hsl(100, 100%, 50%, 0.8);
		color:hsla(250, 100%, 50%, 0.5);
	}
	p.hslaAutre{
		background-color:hsla(90, 100%, 50%, 0.5);
		color:hsla(250, 100%, 50%, 1.0);
	}

HTML

	<p class="hsla"> couleurs gérées en hsla </p>
	<p class="hslaAutre"> couleurs gérées en hsla </p>

Démo

Le RGB existe depuis un moment dans la norme CSS. Avec le CSS3, l'opacité est appliquée au RGB via RGBA.

Les valeurs sont les suivantes :

• R: couleur rouge en % (de 0% à 100%) ou en valeur (0 à 255) ;
• G: couleur verte en % (de 0% à 100%) ou en valeur (0 à 255) ;
• B: couleur bleu en % (de 0% à 100%) ou en valeur (0 à 255) ;
• A: opacité en valeur flottante (0.0 à 1.0).

Exemple :

CSS

	p.rgba{
		background-color:rgba(255, 0, 0, 0.2);
		color:rgb(250, 100, 50);
	}
	p.rgbaAutre{
		background-color:rgba(90, 100, 50, 0.5);
		color:rgba(250, 100, 50, 0.4);
	}

HTML

	<p class="rgba"> couleurs gérées en rgba </p>
	<p class="rgbaAutre"> couleurs gérées en rgba </p>

Démo

L'intérêt du rgba et du hsla vient du fait que l'opacité qu'il applique aux élements, n'est pas héritée par les enfants de ces éléments (c'est le cas pour opacity).

L'opacity permet d'appliquer une transparence à un élément et à tous ses enfants (contrairement à HSLA et à RGBA)

Il prend pour valeur un flottant (entre 0.0 et 1.0)

Exemple:

CSS

	p.opacity{
		opacity:0.5;
	}
	p.opacityAutre{
		opacity:0.3;
	}

HTML

	<p class="opacity"> exemple sur opacity </p>
	<p class="opacityAutre"> exemple sur opacity </p>

Démo

Merci à Clément BEAUFILS pour sa relecture.

3 commentaires