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	HTML	Composantes (rouge, vert, bleu)
Nom de couleur	Exemple	HTML	Hexadécimal				Décimal
AliceBlue		#f0f8ff	F0	F8	FF		240	248	255
AntiqueWhite		#faebd7	FA	EB	D7		250	235	215
Aqua		#00ffff	00	FF	FF		0	255	255
Aquamarine		#7fffd4	7F	FF	D4		127	255	212
Azure		#f0ffff	F0	FF	FF		240	255	255
Beige		#f5f5dc	F5	F5	DC		245	245	220
Bisque		#ffe4c4	FF	E4	C4		255	228	196
Black		#000000	00	00	00		0	0	0
BlanchedAlmond		#ffebcd	FF	EB	CD		255	235	205
Blue		#0000ff	00	00	FF		0	0	255
BlueViolet		#8a2be2	8A	2B	E2		138	43	226
Brown		#a52a2a	A5	2A	2A		165	42	42
BurlyWood		#deb887	DE	B8	87		222	184	135
CadetBlue		#5f9ea0	5F	9E	A0		95	158	160
Chartreuse		#7fff00	7F	FF	00		127	255	0
Chocolate		#d2691e	D2	69	1E		210	105	30
Coral		#ff7f50	FF	7F	50		255	127	80
CornflowerBlue		#6495ed	64	95	ED		100	149	237
Cornsilk		#fff8dc	FF	F8	DC		255	248	220
Crimson		#dc143c	DC	14	3C		220	20	60
Cyan		#00ffff	00	FF	FF		0	255	255
DarkBlue		#00008b	00	00	8B		0	0	139
DarkCyan		#008b8b	00	8B	8B		0	139	139
DarkGoldenrod		#b8860b	B8	86	0B		184	134	11
DarkGray		#a9a9a9	A9	A9	A9		169	169	169
DarkGreen		#006400	00	64	00		0	100	0
DarkKhaki		#bdb76b	BD	B7	6B		189	183	107
DarkMagenta		#8b008b	8B	00	8B		139	0	139
DarkOliveGreen		#556b2f	55	6B	2F		85	107	47
DarkOrange		#ff8c00	FF	8C	00		255	140	0
DarkOrchid		#9932cc	99	32	CC		153	50	204
DarkRed		#8b0000	8B	00	00		139	0	0
DarkSalmon		#e9967a	E9	96	7A		233	150	122
DarkSeaGreen		#8fbc8f	8F	BC	8F		143	188	143
DarkSlateBlue		#483d8b	48	3D	8B		72	61	139
DarkSlateGray		#2f4f4f	2F	4F	4F		47	79	79
DarkTurquoise		#00ced1	00	CE	D1		0	206	209
DarkViolet		#9400d3	94	00	D3		148	0	211
DeepPink		#ff1493	FF	14	93		255	20	147
DeepSkyBlue		#00bfff	00	BF	FF		0	191	255
DimGray		#696969	69	69	69		105	105	105
DodgerBlue		#1e90ff	1E	90	FF		30	144	255
FireBrick		#b22222	B2	22	22		178	34	34
FloralWhite		#fffaf0	FF	FA	F0		255	250	240
ForestGreen		#228b22	22	8B	22		34	139	34
Fuchsia		#ff00ff	FF	00	FF		255	0	255
Gainsboro		#dcdcdc	DC	DC	DC		220	220	220
GhostWhite		#f8f8ff	F8	F8	FF		248	248	255
Gold		#ffd700	FF	D7	00		255	215	0
Goldenrod		#daa520	DA	A5	20		218	165	32
GreenYellow		#adff2f	AD	FF	2F		173	255	47
Honeydew		#f0fff0	F0	FF	F0		240	255	240
HotPink		#ff69b4	FF	69	B4		255	105	180
IndianRed		#cd5c5c	CD	5C	5C		205	92	92
Indigo		#4b0082	4B	00	82		75	0	130
Ivory		#fffff0	FF	FF	F0		255	255	240
Khaki		#f0e68c	F0	E6	8C		240	230	140
Lavender		#e6e6fa	E6	E6	FA		230	230	250
LavenderBlush		#fff0f5	FF	F0	F5		255	240	245
LawnGreen		#7cfc00	7C	FC	00		124	252	0
LemonChiffon		#fffacd	FF	FA	CD		255	250	205
LightBlue		#add8e6	AD	D8	E6		173	216	230
LightCoral		#f08080	F0	80	80		240	128	128
LightCyan		#e0ffff	E0	FF	FF	224	255	255
LightGoldenrodYellow		#fafad2	FA	FA	D2	250	250	210
LightGreen		#90ee90	90	EE	90	144	238	144
LightGrey		#d3d3d3	D3	D3	D3	211	211	211
LightPink		#ffb6c1	FF	B6	C1	255	182	193
LightSalmon		#ffa07a	FF	A0	7A	255	160	122
LightSeaGreen		#20b2aa	20	B2	AA	32	178	170
LightSkyBlue		#87cefa	87	CE	FA	135	206	250
LightSlateGray		#778899	77	88	99	119	136	153
LightSteelBlue		#b0c4de	B0	C4	DE	176	196	222
LightYellow		#ffffe0	FF	FF	E0	255	255	224
Lime		#00ff00	00	FF	00	0	255	0
LimeGreen		#32cd32	32	CD	32	50	205	50
Linen		#faf0e6	FA	F0	E6	250	240	230
Magenta		#ff00ff	FF	00	FF	255	0	255
MediumAquamarine		#66cdaa	66	CD	AA	102	205	170
MediumBlue		#0000cd	00	00	CD	0	0	205
MediumOrchid		#ba55d3	BA	55	D3	186	85	211
MediumPurple		#9370db	93	70	DB	147	112	219
MediumSeaGreen		#3cb371	3C	B3	71	60	179	113
MediumSlateBlue		#7b68ee	7B	68	EE	123	104	238
MediumSpringGreen		#00fa9a	00	FA	9A	0	250	154
MediumTurquoise		#48d1cc	48	D1	CC	72	209	204
MediumVioletRed		#c71585	C7	15	85	199	21	133
MidnightBlue		#191970	19	19	70	25	25	112
MintCream		#f5fffa	F5	FF	FA	245	255	250
MistyRose		#ffe4e1	FF	E4	E1	255	228	225
Moccasin		#ffe4b5	FF	E4	B5	255	228	181
NavajoWhite		#ffdead	FF	DE	AD	255	222	173
Navy		#000080	00	00	80	0	0	128
OldLace		#fdf5e6	FD	F5	E6	253	245	230
Olive		#808000	80	80	00	128	128	0
OliveDrab		#6b8e23	6B	8E	23	107	142	35
Orange		#ffa500	FF	A5	00	255	165	0
OrangeRed		#ff4500	FF	45	00	255	69	0
Orchid		#da70d6	DA	70	D6	218	112	214
PaleGoldenrod		#eee8aa	EE	E8	AA	238	232	170
PaleGreen		#98fb98	98	FB	98	152	251	152
PaleTurquoise		#afeeee	AF	EE	EE	175	238	238
PaleVioletRed		#db7093	DB	70	93	219	112	147
PapayaWhip		#ffefd5	FF	EF	D5	255	239	213
PeachPuff		#ffdab9	FF	DA	B9	255	218	185
Peru		#cd853f	CD	85	3F	205	133	63
Pink		#ffc0cb	FF	C0	CB	255	192	203
Plum		#dda0dd	DD	A0	DD	221	160	221
PowderBlue		#b0e0e6	B0	E0	E6	176	224	230
Red		#ff0000	FF	00	00	255	0	0
RosyBrown		#bc8f8f	BC	8F	8F	188	143	143
RoyalBlue		#4169e1	41	69	E1	65	105	225
SaddleBrown		#8b4513	8B	45	13	139	69	19
Salmon		#fa8072	FA	80	72	250	128	114
SandyBrown		#f4a460	F4	A4	60	244	164	96
SeaGreen		#2e8b57	2E	8B	57	46	139	87
Seashell		#fff5ee	FF	F5	EE	255	245	238
Sienna		#a0522d	A0	52	2D	160	82	45
Silver		#c0c0c0	C0	C0	C0	192	192	192
SkyBlue		#87ceeb	87	CE	EB	135	206	235
SlateBlue		#6a5acd	6A	5A	CD	106	90	205
SlateGray		#708090	70	80	90	112	128	144
Snow		#fffafa	FF	FA	FA	255	250	250
SpringGreen		#00ff7f	00	FF	7F	0	255	127
SteelBlue		#4682b4	46	82	B4	70	130	180
Tan		#d2b48c	D2	B4	8C	210	180	140
Teal		#008080	00	80	80	0	128	128
Thistle		#d8bfd8	D8	BF	D8	216	191	216
Tomato		#ff6347	FF	63	47	255	99	71
Turquoise		#40e0d0	40	E0	D0	64	224	208
Violet		#ee82ee	EE	82	EE	238	130	238
Wheat		#f5deb3	F5	DE	B3	245	222	179
White		#ffffff	FF	FF	FF	255	255	255
WhiteSmoke		#f5f5f5	F5	F5	F5	245	245	245
Yellow		#ffff00	FF	FF	00	255	255	0
YellowGreen		#9acd32	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.

Propriétés CSS pour les couleurs

background-color	Couleur de l'arrière-plan.
border-bottom-color	Couleur de la bordure du bas.
border-color	Couleur des bordures.
border-left-color	Couleur de la bordure de gauche.
border-right-color	Couleur de la bordure de droite.
border-top-color	Couleur de la bordure de droite.
color	Couleur de l'avant plan (texte, par exemple).
layer-background-color	Couleur d'arrière plan et de la bordure dans Netscape.
outline-color	Couleur de l'encadrement de l'élément.
scrollbar-3dlight-color	Aspect de l'ascenseur (Explorer seulement).
scrollbar-arrow-color	Aspect de l'ascenseur (Explorer seulement).
scrollbar-base-color	Aspect de l'ascenseur (Explorer seulement).
scrollbar-darkShadow-color	Aspect de l'ascenseur (Explorer seulement).
scrollbar-face-color	Aspect de l'ascenseur (Explorer seulement).
scrollbar-highlight-color	Aspect de l'ascenseur (Explorer seulement).
scrollbar-shadow-color	Aspect de l'ascenseur (Explorer seulement).
scrollbar-track-color	Aspect de l'ascenseur (Explorer seulement).

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.