CSS : Notation des couleurs dans la version 2

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

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
nomcode hexadécimalcode RGBAperçu
aqua / cyan#00FFFF0,255,255
black#0000000,0,0
blue#0000FF0,0,255
fuchsia / magenta#FF00FF255,0,255
gray#808080128,128,128
green#0080000,128,0
lime#00FF000,255,0
maroon#800000128,0,0
navy#0000800,0,128
olive#808000128,128,0
purple#800080128,0,128
red#FF0000255,0,0
silver#C0C0C0192,192,192
teal#0080800,128,128
white#FFFFFF255,255,255
yellow#FFFF00255,255,0

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

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 CSSsensAperçu
beigebeige
antiquewhitebeige blanc antique
ivoryblanc ivoire
snowblanc neige
steelbluebleu acier
azurebleu azur
skybluebleu ciel
indigobleu indigo
lavenderbleu lavande
brownbrun
chocolatebrun chocolat
khakibrun kaki
tanbrun roux
lightcyancyan clair
turquoiseturquoise
ligthgreygris clair
wheatjaune blé
goldenrodjaune or
orangeorange
coralcorail
salmonsaumon
tomatorouge tomate
pinkrose
violetviolet
aquamarinevert aquatique
greenyellowvert jaune
seagreenvert marin
palegreenvert 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