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