Les couleurs HTML et CSS

Les normes HTML et CSS permettent de définir les couleurs de 3 façons différentes.

3 façons de définir une couleur

Les navigateurs admettent 3 méthodes possibles pour la déclaration d'une couleur :

Méthode	Exemple	Notes
Couleurs nommées	background-color: grey	La couleur est désignée par son nom. Il n'y a que 16 noms de couleurs normalisés par le W3C, mais tous les navigateurs actuels reconnaissent les couleurs définies par la norme X11 (voir plus bas)
Couleurs en hexadecimal	background-color: #808080	La couleur est désignée par son code hexadécimal (un dièse suivi de 6 digits). Les deux premiers digits représentent la valeur de rouge, les deux suivants le vert et les deux derniers le bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.
Couleurs décomposées	background-color: RGB( 128,128,128 )	La couleur est définie par trois nombres décimaux de 0 à 255 indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir toutes les couleurs.

16 couleurs de base

A l'époque ou la norme HTML intégra la possibilité de jouer avec les couleurs, la plupart des écrans d'ordinateurs avait encore des capacités extrêment limitées et ne pouvaient reproduire qu'un jeu réduit de couleurs.

Il ne fut donc définit que 16 couleurs de base qui restent encore aujourd'hui les seules couleurs nommées dans les normes du W3C :

#00FFFF Aqua	#000000 Black	#0000FF Blue	#FF00FF Fuchsia	#808080 Gray	#008000 Green	#00FF00 Lime	#800000 Maroon
#000080 Navy	#808000 Olive	#800080 Purple	#FF0000 Red	#C0C0C0 Silver	#008080 Teal	#FFFFFF White	#FFFF00 Yellow

Les couleurs X11

La norme X11 fut définie pour la gestion des terminaux à l'époque des mini-ordinateurs. Elle comporte un nombre relativement étendu de couleurs qui sont reconnues par les principaux navigateurs actuels.

Quatre de ces couleurs portent des noms identiques à ceux des couleurs HTML sans correspondre exactement aux mêmes teintes. Si vous utilisez les noms "Grey", "Green", "Purple" et "Maroon", ce seront donc les teintes HTML qui seront affichées par votre navigateur et non les teintes X11 telles qu'elles s'affichaient dans cette norme.

Normes
Notations	Hexadécimal			Décimal			Hexadécimal			Décimal
Composantes	R	V	B	R	V	B	R	V	B	R	V	B
Grey	BE	BE	BE	190	190	190	80	80	80	128	128	128
Green	00	FF	00	0	255	0	00	80	00	0	128	0
Maroon	B0	30	60	176	48	96	80	00	00	128	0	0
Purple	A0	20	F0	106	32	240	80	00	80	128	0	128

Voici la liste des autres couleurs X11 (source : Wikipedia) :

Nom de couleur	Exemple	Composantes (rouge, vert, bleu)
Nom de couleur	Exemple	Hexadécimal				Décimal
AliceBlue		F0	F8	FF		240	248	255
AntiqueWhite		FA	EB	D7		250	235	215
Aqua		00	FF	FF		0	255	255
Aquamarine		7F	FF	D4		127	255	212
Azure		F0	FF	FF		240	255	255
Beige		F5	F5	DC		245	245	220
Bisque		FF	E4	C4		255	228	196
Black		00	00	00		0	0	0
BlanchedAlmond		FF	EB	CD		255	235	205
Blue		00	00	FF		0	0	255
BlueViolet		8A	2B	E2		138	43	226
Brown		A5	2A	2A		165	42	42
BurlyWood		DE	B8	87		222	184	135
CadetBlue		5F	9E	A0		95	158	160
Chartreuse		7F	FF	00		127	255	0
Chocolate		D2	69	1E		210	105	30
Coral		FF	7F	50		255	127	80
CornflowerBlue		64	95	ED		100	149	237
Cornsilk		FF	F8	DC		255	248	220
Crimson		DC	14	3C		220	20	60
Cyan		00	FF	FF		0	255	255
DarkBlue		00	00	8B		0	0	139
DarkCyan		00	8B	8B		0	139	139
DarkGoldenrod		B8	86	0B		184	134	11
DarkGray		A9	A9	A9		169	169	169
DarkGreen		00	64	00		0	100	0
DarkKhaki		BD	B7	6B		189	183	107
DarkMagenta		8B	00	8B		139	0	139
DarkOliveGreen		55	6B	2F		85	107	47
DarkOrange		FF	8C	00		255	140	0
DarkOrchid		99	32	CC		153	50	204
DarkRed		8B	00	00		139	0	0
DarkSalmon		E9	96	7A		233	150	122
DarkSeaGreen		8F	BC	8F		143	188	143
DarkSlateBlue		48	3D	8B		72	61	139
DarkSlateGray		2F	4F	4F		47	79	79
DarkTurquoise		00	CE	D1		0	206	209
DarkViolet		94	00	D3		148	0	211
DeepPink		FF	14	93		255	20	147
DeepSkyBlue		00	BF	FF		0	191	255
DimGray		69	69	69		105	105	105
DodgerBlue		1E	90	FF		30	144	255
FireBrick		B2	22	22		178	34	34
FloralWhite		FF	FA	F0		255	250	240
ForestGreen		22	8B	22		34	139	34
Fuchsia		FF	00	FF		255	0	255
Gainsboro		DC	DC	DC		220	220	220
GhostWhite		F8	F8	FF		248	248	255
Gold		FF	D7	00		255	215	0
Goldenrod		DA	A5	20		218	165	32
GreenYellow		AD	FF	2F		173	255	47
Honeydew		F0	FF	F0		240	255	240
HotPink		FF	69	B4		255	105	180
IndianRed		CD	5C	5C		205	92	92
Indigo		4B	00	82		75	0	130
Ivory		FF	FF	F0		255	255	240
Khaki		F0	E6	8C		240	230	140
Lavender		E6	E6	FA		230	230	250
LavenderBlush		FF	F0	F5		255	240	245
LawnGreen		7C	FC	00		124	252	0
LemonChiffon		FF	FA	CD		255	250	205
LightBlue		AD	D8	E6		173	216	230
LightCoral		F0	80	80		240	128	128
LightCyan		E0	FF	FF	224	255	255
LightGoldenrodYellow		FA	FA	D2	250	250	210
LightGreen		90	EE	90	144	238	144
LightGrey		D3	D3	D3	211	211	211
LightPink		FF	B6	C1	255	182	193
LightSalmon		FF	A0	7A	255	160	122
LightSeaGreen		20	B2	AA	32	178	170
LightSkyBlue		87	CE	FA	135	206	250
LightSlateGray		77	88	99	119	136	153
LightSteelBlue		B0	C4	DE	176	196	222
LightYellow		FF	FF	E0	255	255	224
Lime		00	FF	00	0	255	0
LimeGreen		32	CD	32	50	205	50
Linen		FA	F0	E6	250	240	230
Magenta		FF	00	FF	255	0	255
MediumAquamarine		66	CD	AA	102	205	170
MediumBlue		00	00	CD	0	0	205
MediumOrchid		BA	55	D3	186	85	211
MediumPurple		93	70	DB	147	112	219
MediumSeaGreen		3C	B3	71	60	179	113
MediumSlateBlue		7B	68	EE	123	104	238
MediumSpringGreen		00	FA	9A	0	250	154
MediumTurquoise		48	D1	CC	72	209	204
MediumVioletRed		C7	15	85	199	21	133
MidnightBlue		19	19	70	25	25	112
MintCream		F5	FF	FA	245	255	250
MistyRose		FF	E4	E1	255	228	225
Moccasin		FF	E4	B5	255	228	181
NavajoWhite		FF	DE	AD	255	222	173
Navy		00	00	80	0	0	128
OldLace		FD	F5	E6	253	245	230
Olive		80	80	00	128	128	0
OliveDrab		6B	8E	23	107	142	35
Orange		FF	A5	00	255	165	0
OrangeRed		FF	45	00	255	69	0
Orchid		DA	70	D6	218	112	214
PaleGoldenrod		EE	E8	AA	238	232	170
PaleGreen		98	FB	98	152	251	152
PaleTurquoise		AF	EE	EE	175	238	238
PaleVioletRed		DB	70	93	219	112	147
PapayaWhip		FF	EF	D5	255	239	213
PeachPuff		FF	DA	B9	255	218	185
Peru		CD	85	3F	205	133	63
Pink		FF	C0	CB	255	192	203
Plum		DD	A0	DD	221	160	221
PowderBlue		B0	E0	E6	176	224	230
Red		FF	00	00	255	0	0
RosyBrown		BC	8F	8F	188	143	143
RoyalBlue		41	69	E1	65	105	225
SaddleBrown		8B	45	13	139	69	19
Salmon		FA	80	72	250	128	114
SandyBrown		F4	A4	60	244	164	96
SeaGreen		2E	8B	57	46	139	87
Seashell		FF	F5	EE	255	245	238
Sienna		A0	52	2D	160	82	45
Silver		C0	C0	C0	192	192	192
SkyBlue		87	CE	EB	135	206	235
SlateBlue		6A	5A	CD	106	90	205
SlateGray		70	80	90	112	128	144
Snow		FF	FA	FA	255	250	250
SpringGreen		00	FF	7F	0	255	127
SteelBlue		46	82	B4	70	130	180
Tan		D2	B4	8C	210	180	140
Teal		00	80	80	0	128	128
Thistle		D8	BF	D8	216	191	216
Tomato		FF	63	47	255	99	71
Turquoise		40	E0	D0	64	224	208
Violet		EE	82	EE	238	130	238
Wheat		F5	DE	B3	245	222	179
White		FF	FF	FF	255	255	255
WhiteSmoke		F5	F5	F5	245	245	245
Yellow		FF	FF	00	255	255	0
YellowGreen		9A	CD	32	154	205	50

Couleurs système

Les couleurs ci-dessous sont définies par le navigateur et sont redéfinissables par l'utilisateur (même si peu d'entre eux savent comment procéder pour ça).

Les couleurs affichées dans le tableau ci-dessous correspondent aux réglages de votre navigateur.

ActiveBorder ActiveBorder	ActiveCaption ActiveCaption	AppWorkspace AppWorkspace	Background Background
ButtonHighlight ButtonHighlight	ButtonText ButtonText	CaptionText CaptionText	GrayText GrayText
HighlightText HighlightText	InactiveBorder InactiveBorder	InactiveCaption InactiveCaption	InfoBackground InfoBackground
Menu Menu	MenuText MenuText	Scrollbar Scrollbar	ThreeDDarkShadow ThreeDDarkShadow
ThreeDHighlight ThreeDHighlight	ThreeDLightShadow ThreeDLightShadow	ThreedShadow ThreedShadow	Window Window
WindowText WindowText	ButtonFace ButtonFace	Highlight Highlight	InfoText InfoText
ThreeDFace ThreeDFace	WindowFrame WindowFrame

Harmoniser les couleurs

Le site Mon-Design-Web propose une page consacrée à l'esthétique et à la couleur des pages Web.

Ce site vous a plu ? Visitez aussi : et

Cette page a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention (y compris les 2 liens ci-dessus) dans le contenu copié.

Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.