HTML
Représenter les couleurs
Racine du

du site


Nuancier de couleurs, leurs valeurs et leurs noms normalisés
Application pour visualiser les couleurs correspondant à R V B
Calculette pour paser de "#FFEEBB" rgb(r,g,b)rgb(r% g% b%)

Les objets que l'on manipule dans les pages HTML ont souvent des attributs de couleur.
Vous devez maintenant apprendre comment on chiffre ces couleurs en informatique.
Sous une apparence complexe, vous allez voir comme c'est simple en fin de compte.

Notions de colorimétrie

Chaque couleur naturelle peut être artificiellement imitée par un mélange de trois couleurs dites primaires : le rouge R, le vert V (G green, en anglais), le bleu B.
On les appelle les composantes chromatiques R,V,B (R,G,B en anglais).

En faisant varier les proportions relatives des composantes on obtient les diverses nuances des couleurs naturelles.

Par exemple, si les trois composantes sont égales, on obtient des gris.
Des gris sombres si chacune des composantes a une faible intensité : R=V=B=10.
Clairs si les trois composantes ont des intensités fortes : R=V=B=250.

Si les composantes ont des intensités différentes, on obtient des teintes variées.
Si la composante rouge est plus forte que les autres, la couleur sera proche du rouge : orange, pourpre, marron etc.

Si on multiplie toutes les composantes par le même nombre (supérieur à 1) on obtient la même couleur mais plus claire.

Voici R=102, V=51, B=102
Voici R=204, V=102, B=204

Les gris s'obtiennent avec les trois composantes d'agale intensite : R = B = V=0
Les gris s'obtiennent avec les trois composantes d'agale intensite : R=B=V=100

Les gris s'obtiennent avec les trois composantes d'agale intensite : R=B=V=150

Les gris s'obtiennent avec les trois composantes d'agale intensite : R=B=V=200


Mais, contrairement à l'exemple qui vient de vous être donné, les informaticiens ne comptent pas toujours en nombres décimaux ( à 10 chiffres : 0 1 2 3 4 5 6 7 8 9 ).
Mais en nombres hexadécimaux (à 16 chiffres 0 1 2 3 4 5 6 7 8 9 A B C D E F )

Il s'en suit que les composantes chromatiques prennent plutôt cette allure :

R=A6, G=B9, V=2F
Dans le code HTML elles sont écrites sous la forme : #A6B92F

La suite explique comment décoder facilement cette écriture.


Ecrit en Hexadécimal
Ecrit en Décimal
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
A
10
B
11
C
12
D
13
E
14
F
15

Pour l'usage que nous allons en faire, il ne sera jamais nécessaire de traduire
un nombre décimal en héxadécimal ou inversement.
Désolé pour les matheux...

Voici les 256 nombres héxadécimaux à deux chiffres par ordre croissant
00
01
02
03
04
05
06
07
08
09
0A
0B
0C
0D
0E
0F
10
11
12
13
14
15
16
17
18
19
1A
1B
1C
1D
1E
1F
20
21
22
23
24
25
26
27
28
29
2A
2B
2C
2D
2E
2F
30
31
32
33
34
35
36
37
38
39
3A
3B
3C
3D
3E
3F
40
41
42
43
44
45
46
47
48
49
4A
4B
4C
4D
4E
3F
50
51
52
53
54
55
56
57
58
59
5A
5B
5C
5D
5E
5F
60
61
62
63
64
65
66
67
68
69
6A
6B
6C
6D
6E
6F
70
71
72
73
74
75
76
77
78
79
7A
7B
7C
7D
7E
7F
80
81
82
83
84
85
86
87
88
89
8A
8B
8C
8D
8E
8F
90
91
92
93
94
95
96
97
98
99
9A
9B
98C
9D
9E
9F
A0
A1
A2
A3
A4
A5
A6
A7
A8
A9
AA
AB
AC
AD
AE
AF
B0
B1
B2
B3
B4
B5
B6
B7
B8
B9
BA
BB
BC
BD
BE
BF
C0
C1
C2
C3
C4
C5
C6
C7
C8
C9
CA
CB
CC
CD
CE
CF
D0
D1
D2
D3
D4
D5
D6
D7
D8
D9
DA
DB
DC
DD
DE
DF
E0
E1
E2
E3
E4
E5
E6
E7
E8
E9
EA
EB
EC
ED
EE
EF
F0
F1
F2
F3
F4
F5
F6
F7
F8
F9
FA
FB
FC
FD
FE
FF

Représentation hexadécimale des couleurs

Une couleur est définie par un nombre héxadécimal du type #RVB.
R ( héxadécimal de 00 à FF )
représente l'intensité de la composante ROUGE de la couleur.
V( héxadécimal de 00 à FF )
représente l'intensité de la composante VERTE de la couleur.
B ( héxadécimal de 00 à FF )
représente l'intensité de la composante BLEUE de la couleur.


Notes
  • La composante notée V (V comme Vert en français) est souvent notée G (G comme Green : vert en anglais)
  • Traduits en notation décimale, les nombres : R, V(G) ou B peuvent prendre toute valeur de 0 à 255

Attention !
Particularité d'écriture dans le code HTML

Pour représenter les couleurs, le langage HTML
fair précéder d'un dièse : # un nombre écrit en hexadécimal.

Exemple : #F24D2E pour : F24D2E16

Dans le code d'un tableau : <td>...</td>
la couleur de fond se définira comme ceci : <td ... bgcolor=
#F24D2E ...>


Les gris :
On obtient un gris lorsque les 3 composantes sont égales :

#000000
rgb(0,0,0)
 
Noir total
#808080
rgb(128,128,128)
 
Gris
#C0C0C0
rgb(192,192,192)
 
Gris plus clair
#FFFFFF
rgb(255,255,255)
 
Gris extra-clair = lblanc

Les couleurs saturées
#FF0000
rgb(255,0,0)
 
Rouge saturé
#00FF00
rgb(0,255,0)
 
Vert saturé
#0000FF
rgb(0,0,255)
 
Bleu saturé

Couleurs intermédiaires
(non saturées)
#FFFFCC
rgb(255,255,204)
 
Rose
#FF9999
rgb(255,153,153)
 
Saumon
#009999
rgb(0,153,153)
 
Pétrole
#9999FF
rgb(153,153,255)
 
Bleu pastel

Palettes
Les logiciels de dessin disposent généralement d'une palette permettant de choisir visuellement les couleurs à l'aide d'une "pipette".
La valeur hexadécimale de la couleur choisie est généralement affichée en codes #RRVVBB.


Noms conventionnels de couleurs
Pour simplifier l'écriture des couleurs, un certain nombre d'entre elles ont reçu un nom conventionnel
pour vous éviter d'utiliser la représentaion hexadécimale peu parlante, peu mémorisable.

Attention !
Une écriture telle que : #F24D2E est employée dans le code HTML
pour désigner le nombre qui, en hexadécimal, s'écrirait : F24D2E16


Noms HTML conventionnels pour les couleurs VGA
Nom HTML
Echantillon
Code hexadécimal
Code RGB
aqua  
#00FFFF
rgb(153,153,255)
black  
#000000
rgb(0,0,0)
blue  
#0000FF
rgb(0,0,255)
fuchsia  
#FF00FF
rgb(255,0,255)
gray  
#5D5D5D
rgb(93,93,93)
green  
#005D00
rgb(0,93,0)
lime  
#00FF00
rgb(0,255,0)
maroon  
#5D0000
rgb(93,0,0)
navy  
#00005D
rgb(0,0,93)
olive  
#5D5D00
rgb(93,93,0)
purple  
#5D005D
rgb(93,0,93)
red  
#FF0000
rgb(255,0,0)
silver  
#A8A8A8
rgb(168,168,168)
teal  
#005D5D
rgb(0,93,93)
white  
#FFFFFF
rgb(255,255,255)
yellow  
#FFFF00
rgb(255,255,0)

Attention !
Une écriture telle que : #F24D2E est employée dans le code HTML
pour désigner le nombre qui, en hexadécimal, s'écrirait : F24D2E16

Noms de couleurs ISO
Nom HTML ISO
Echantillon
Code
hexadécimal
au format HTML
Code RGB
aliceblue  
#E9F5FF
rgb(233,245,255)
antiquewhite  
#F8E2C7
rgb(248,226,199)
aquamarine  
#5CFFC2
rgb(92,255,194)
azure  
#E9FFFF
rgb(233,255,255)
beige  
#F0F0CD
rgb(240,240,205)
bisque  
#FFD8AD
rgb(255,216,173)
blanchedalmond  
#FFE2B9
rgb(255,226,185)
blueviolet  
#8613D6
 
brown  
#871212
 
burlywood  
#D09E64
rgb(208,158,100)
cadetblue  
#3C8E81
rgb(60,142,129)
chartreuse  
#5CFF00
rgb(92,255,0)
chocolate  
#C0450B
rgb(192,69,11)
coral  
#FF5C2F
rgb(255,92,47)
cornflowerblue  
#4174E5
rgb(65,116,229)
cornsilk  
#FFF5CD
rgb(255,245,205)
crimson  
#DC061F
rgb(220,6,31)
cyan  
#00FFFF
rgb(0,255,255)
darkblue  
#000069
rgb(0,0,105)
darkcyan  
#006969
rgb(0,105,105)
darkgoldenrot  
#9E6303
rgb(158,99,3)
darkgray  
#8B8B8B
rgb(139,139,139)
darkgreen  
#004100
rgb(0,65,0)
darkkhaki  
#A49D47
rgb(164,157,71)
darkmagenta  
#690069
rgb(105,0,105)
darkolivegreen  
#334715
rgb(51,71,21)
darkorange  
#FF6A00
rgb(255,106,0)
darkorchid  
#7917E8
rgb(121,23,232)
darkred  
#690000
rgb(105,0,0)
darksalmon  
#DF7556
rgb(223,117,86)
darkseagreen  
#6DA36D
rgb(109,163,109)
darkslateblue  
#281F69
rgb(40,31,105)
darkslategray  
#152E2E
rgb(21,46,46)
darkturquoise  
#00BABE
rgb(0,186,190)
darkviolet  
#7300C1
rgb(115,0,193)
deeppink  
#FF0672
rgb(255,6,114)
deepskyblue  
#00A7FF
rgb(0,167,255)
dimgray  
#454545
rgb(69,69,69)
dodgerblue  
#0B6EFF
rgb(11,110,255)
firebrick  
#960D0D
rgb(150,13,13)
floralwhite  
#FFF8E9
rgb(255,248,233)
forestgreen  
#0D690D
rgb(13,105,13)
gold  
#FFC700
rgb(255,199,0)
greenyellow  
#90FF15
rgb(144,255,21)
indigo  
#2A00F5
rgb(42,0,245)
ivory  
#FFFFE9
rgb(255,255,233)
khaki  
#E9DB6A
#E9DB6A
lavender  
#DBDBF8
rgb(219,219,248)
linen  
#F8E9DB
rgb(248,233,219)
magenta  
#FF00FF
rgb(255,0,255)
navy  
#00005D
rgb(0,0,93)
oldlace  
#FCF0DB
rgb(252,240,219)
orange  
#FF8700
rgb(255,135,0)
orchid  
#CB4CC5
rgb(203,76,197)
pink  
#FFA8B6
rgb(255,168,182)
plum  
#CF81CF
rgb(207,129,207)
salmon  
#F85D4E
rgb(248,93,78)
snow  
#FFF8F8
rgb(255,248,248)
teal  
#009999
rgb(0,153,153)
tomato  
#FF4027
rgb(255,64,39)
turquoise  
#22D3BD
rgb(34,211,189)
violet  
#E65FE6
rgb(230,95,230)
wheat  
#F0D098
rgb(240,208,152)
yellowgreen  
#7AB917
rgb(122,185,23)
Personnelles : Noms non reconnus
MonVertTrèsClair  
#F0FFD0
rgb(240,255,208)

Classées par tons
green  
#005D00
rgb(0,93,0)
lime  
#00FF00
rgb(0,255,0)
teal  
#005D5D
rgb(0,93,93)
aquamarine  
#5CFFC2
rgb(92,255,194)
cadetblue  
#3C8E81
rgb(60,142,129)
chartreuse  
#5CFF00
rgb(92,255,0)
darkcyan  
#006969
rgb(0,105,105)
darkgreen  
#004100
rgb(0,65,0)
darkolivegreen  
#334715
rgb(51,71,21)
darkseagreen  
#6DA36D
rgb(109,163,109)
greenyellow  
#90FF15
rgb(144,255,21)
teal  
#009999
rgb(0,153,153)
yellowgreen  
#7AB917
rgb(122,185,23)
Claires pour fonds d'écriture
antiquewhite  
#FFFFCC
rgb(255,255,204)
beige  
#F0F0CD
rgb(240,240,205)
bisque  
#FFD8AD
rgb(255,216,173)
blanchedalmond  
#FFE2B9
rgb(255,226,185)
cornsilk  
#FFF5CD
rgb(255,245,205)
floralwhite  
#FFF8E9
rgb(255,248,233)
ivory  
#FFFFE9
rgb(255,255,233)
khaki  
#E9DB6A
rgb(233,219,106)
linen  
#F8E9DB
rgb(248,233,219)
oldlace  
#FCF0DB
rgb(252,240,219)
snow  
#FFF8F8
rgb(255,248,248)
wheat  
#F0D098
rgb(240,208,152)
lavender  
#DBDBF8
rgb(219,219,248)
Perso NON ISO
 
#F0FFD0
rgb(240,255,208)
Bleus
       


Représentation décimale des couleurs : rgb (R,G,B)


Dans certaines applications, il est possible d'utiliser
la fonction : rgb (R,G,B)
pour désigner les couleurs.

Les arguments R, G, et B peuvent être notés :

  • en décimal par trois nombres entiers de 0 à 255, exemple : rgb(255, 127, 0)
  • en pourcentage par trois nombres entiers de 0% à 100%,
    exemples :

    rgb (50%, 25%, 12%)
    ou
    rgb (100%, 0%, 20%)
    ou
    rgb (100%, 100%, 100%)

Vérifiez bien si cette fonction est prise en compte par les explorateurs Internet utilisés.



Application permettant de passer d'une représentation décimale à l'héxadécimale du trio RGB et inversement.

Cliquez ici :

Je vous propose cette application qui vous permettra de fixer vous-même les trois nombres RVB en décimal
pour visualiser la couleur correspondante, dans le cadre ci-dessous.
Vous pouvez remplacer les valeurs 255 255 255 prédéfinies ci-dessous.
R = Proportion de Rouge
<= 255
V = Proportion de Vert
<= 255
B = Proportion de Bleu
<= 255
En hexadécimal :
 
 
Cadre visualisant la couleur désignée ci-dessus



Racine du

du site

Cours suivant

Sommaire cours HTML