CSS : Notation des couleurs dans la version 2

Trois techniques pour exprimer la couleur jusqu'à CSS2

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

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