CSS2 : Notation des couleurs

Trois techniques pour exprimer la couleur jusqu'à la spécification CSS 2

background-color, color, border-color, etc

le nom de la couleur (nom anglais)
le code hexadécimal de la couleur
le code RGB (ou RVB) de la couleur

On peut donc écrire (pour un fond jaune) :

	background-color : yellow
	
	ou
	background-color : #FFFF00
	
	ou 
	background-color : rgb(255,255,0)
	
	ou 
	background-color : rgb(100%,100%,0%)

Pendant longtemps les navigateurs ne connaissaient que 16 mots clés de couleurs. Maintenant c'est 148 !

Le code hexadécimal d'une couleur peut être exprimée de façon abrégée ; dans ce format chaque chiffre est doublé !
Ainsi au lieu d'écrire "#FF88CC" on peut écrire plus simplement "#F8C".

Donc dans le cadre de la notation RGB (Red, Green, Blue) les trois valeurs sont comprises entre 0 et 255.
Mais on peut exprimer ces trois valeurs en pourcentages.
Exemples : Noir = rbg(0%,0%,0%) ; rouge pur = rgb(100%,0%,0%).

Les 16 couleurs de base

Pendant longtemps les navigateurs n'ont reconnu que les noms de 16 couleurs.

Les 16 couleurs de base par ordre alphabétique
nom	code hexadécimal	code RGB
aqua / cyan	#00FFFF	0,255,255
black	#000000	0,0,0
blue	#0000FF	0,0,255
fuchsia / magenta	#FF00FF	255,0,255
gray	#808080	128,128,128
green	#008000	0,128,0
lime	#00FF00	0,255,0
maroon	#800000	128,0,0
navy	#000080	0,0,128
olive	#808000	128,128,0
purple	#800080	128,0,128
red	#FF0000	255,0,0
silver	#C0C0C0	192,192,192
teal	#008080	0,128,128
white	#FFFFFF	255,255,255
yellow	#FFFF00	255,255,0

Vous pouvez remarquez qu'il y a deux paires de synonymes. Ainsi "aqua" et "cyan" désignent la même couleur.

255 s'écrit FF en hexadécimal (F fois 16 = 256)
128 s'écrit 80 en hexadécimal (8 fois 16 = 128)
192 s'écrit C0 en hexadécimal (C fois 16 = 192)

Amusez vous à déterminer le code hexadécimal simplifié.

Je rappelle que dans le cadre du code RGB vous pouvez manipuler des pourcentages. Ainsi pour exprimer la couleur teal vous pouvez écrire : rgb(0%,50%,50%).

Révisions sur la production de tableaux en HTML

Je vous communique ci-dessous deux extraits du code HTML & CSS correspondant au tableau des 16 couleurs de base afin que vous révisiez le code HTML relatif aux tableaux de données.

<table> <caption>Les 16 couleurs de base par ordre alphabétique</caption> <tr><th>nom</th><th>code hexadécimal</th><th>code RGB</th><th>Aperçu</th></tr> <tr><td>aqua / cyan</td><td>#00FFFF</td><td>0,255,255</td> <td style ="background :rgb(0,255,255);" ></td></tr> <tr><td>black</td><td>#000000</td><td>0,0,0</td> <td style ="background :rgb(0,0,0);" ></td></tr> <tr><td>blue</td><td>#0000FF</td><td>0,0,255</td> <td style ="background :rgb(0%,0%,100%);" ></td></tr> ... <tr><td>white</td><td>#FFFFFF</td><td>255,255,255</td> <td style ="background :rgb(255,255,255);" ></td></tr> <tr><td>yellow</td><td>#FFFF00</td><td>255,255,0</td> <td style ="background :rgb(255,255,0);" ></td></tr> </table>

Déterminer le code RGB

J'ai mis au point une petite application qui permet d'obtenir le code RGB d'une couleur après avoir déterminé celle-ci grâce à une palette : la boîte à couleurs

Autres couleurs nommées

Les navigateurs récents reconnaissent 148 mots clés de couleurs.

Ci-dessous une liste non exhaustive de noms de couleurs compris des différents navigateurs récents.

nom CSS	sens	Aperçu
beige	beige
antiquewhite	beige blanc antique
ivory	blanc ivoire
snow	blanc neige
steelblue	bleu acier
azure	bleu azur
skyblue	bleu ciel
indigo	bleu indigo
lavender	bleu lavande
brown	brun
chocolate	brun chocolat
khaki	brun kaki
tan	brun roux
lightcyan	cyan clair
turquoise	turquoise
ligthgrey	gris clair
wheat	jaune blé
goldenrod	jaune or
orange	orange
coral	corail
salmon	saumon
tomato	rouge tomate
pink	rose
violet	violet
aquamarine	vert aquatique
greenyellow	vert jaune
seagreen	vert marin
palegreen	vert pâle

Vous trouverez dans ce même tuto toutes les nouveautés apportées par la version 3 en matière de notation des couleurs : RGBA, HSL et HSLA.

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Transformations, transitions & animations