Révisions CSS2 : notation des couleurs

Trois techniques pour exprimer la couleur jusqu'à CSS2

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

Donc dans le cadre de la notation RGB on peut utiliser des pourcentages.

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 (16 fois 16 = 256)
128 s'écrit 80 en hexadécimal (8 fois 16 = 128)
192 s'écrit C0 en hexadécimal (12 (C) fois 16 = 192)

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.

<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

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

Innovations CSS3

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