Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

CSS2 : Notation des couleurs

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

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

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 16 noms de 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%).

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

Remarque : ce que je vais dire dans ce paragraphe n'est pas du CSS 2 mais du CSS 3.
Les navigateurs récents (qui ont implémenté le module de couleurs niveau 3) reconnaissent 147 noms de couleurs.
Autant dire qu'il n'est plus nécessaire d'encoder en hexadécimal les couleurs.
par exemple, pour le gris vous avez 13 nuances de gris : silver, gray, darkgray, dimgray, slategray, etc.

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

Les 147 couleurs nommées