Couleurs


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 sir 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


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
Ecrites le plus souvent 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 #RRVVBB.
RR ( héxadécimal de 00 à FF ) est le nombre qui représente l'intensité de la composante ROUGE de la couleur.
VV ( héxadécimal de 00 à FF ) est le nombre qui représente l'intensité de la composante VERTE de la couleur.
BB ( héxadécimal de 00 à FF ) est le nombre qui représente l'intensité de la composante BLEUE de la couleur.


Notes :

Les gris :

On obtient un gris lorsque les 3 composantes sont égales :
#000000
  Noir total
#808080
  Gris
#C0C0C0
  Gris plus clair
#FFFFFF
  Gris extra-clair = le blanc

Les couleurs saturées :

#FF0000
  Rouge saturé
#00FF00
  Vert saturé
#0000FF
  Bleu saturé

Couleurs intermédiaires :

#FFFFCC
  Rose
#FF9999
  Saumon
#009999
  Pétrole
#9999FF
  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.

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

Noms de couleurs ISO
Nom HTML ISO
Echantillon
Code hexadécima
aliceblue  
#E9F5FF
antiquewhite  
#F8E2C7
aquamarine  
#5CFFC2
azure  
#E9FFFF
beige  
#F0F0CD
bisque  
#FFD8AD
blanchedalmond  
#FFE2B9
blueviolet  
#8613D6
brown  
#871212
burlywood  
#D09E64
cadetblue  
#3C8E81
chartreuse  
#5CFF00
chocolade  
#C0450B
coral  
#FF5C2F
cornflowerblue  
#4174E5
cornsilk  
#FFF5CD
crimson  
#DC061F
cyan  
#00FFFF
darkblue  
#000069
darkcyan  
#006969
darkgoldenrot  
#9E6303
darkgray  
#8B8B8B
darkgreen  
#004100
darkkhaki  
#A49D47
darkmagenta  
#690069
darkolivegreen  
#334715
darkorange  
#FF6A00
darkorchid  
#7917E8
darkred  
#690000
darksalmon  
#DF7556
darkseagreen  
#6DA36D
darkslateblue  
#281F69
darkslategray  
#152E2E
darkturquoise  
#00BABE
darkviolet  
#7300C1
deeppink  
#FF0672
deepskyblue  
#00A7FF
dimgray  
#454545
dodgerblue  
#0B6EFF
firebrick  
#960D0D
floralwhite  
#FFF8E9
forestgreen  
#0D690D
gold  
#FFC700
greenyellow  
#90FF15
indigo  
#2A00F5
ivory  
#FFFFE9
khaki  
#E9DB6A
lavender  
#DBDBF8
linen  
#F8E9DB
magenta  
#FF00FF
oldlace  
#FCF0DB
orange  
#FF8700
orchid  
#CB4CC5
pink  
#FFA8B6
plum  
#CF81CF
salmon  
#F85D4E
snow  
#FFF8F8
tomato  
#FF4027
turquoise  
#22D3BD
violet  
#E65FE6
wheat  
#F0D098
yellowgreen  
#7AB917

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


Dans certaines applications, il est possible d'utiliser
la fonction : r (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 : r (255, 127, 0)
  • en pourcentage par trois nombres entiers de 0% à 100%,
    exemples :
    r (50%, 25%, 12%)
    ou
    r (100%, 0%, 20%)
    ou
    r (100%, 100%, 100%)

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

 


Cours suivant
Sommaire cours HTML
Page d'accueil