Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
Les couleurs du Web désignent les couleurs utilisées dans l'affichage des pages web, ainsi que les méthodes pour définir (par des
combinaisons de teintes) et référencer (par unnom de couleur) ces couleurs.
Les auteurs de pages web peuvent spécifier les couleurs des éléments qui composent un document web de plusieurs manières : par un
code agglutinant les valeurs hexadécimales RGB ; par un triplet donnant ces valeurs en décimal de 0 à 255 ou par un pourcentage ;
par des références Teinte Saturation Luminosité. Des noms de code basés sur une désignation en anglais peuvent rappeler plus de
deux cents codes de couleur. Souvent un outil de gestion des couleurs ou un autre logiciel graphique est utilisé pour générer la valeur
numérique de la couleur souhaitée.
Les premières versions de Mosaic et du navigateur Netscape utilisaient les noms des couleurs X11 comme base pour leur liste de
couleurs, puisque les deux logiciels ont commencé comme applicationsX Window System.
Les écrans d'ordinateur peuvent suivre la recommandation sRGB, qui définit la colorimétrie des luminophores, une courbe de
gamma, le point blanc, et l'environnement de visionnage. Seuls les écrans conformes avec le réglage adéquat et les conditions de
éclairage environnant spécifiées donnent exactement les résultats prévus. Les écrans les moins chers ne sont pas souvent conformes,
et l'optimisation pour la lecture des pages web les éloigne des réglages permettant le meilleur rendu des couleurs, tandis que
l'environnement des écrans n'est pas toujours favorable. Si ces conditions ne sont pas remplies, le rendu n'est qu’assez proche du
résultat attendu.
Sommaire
Codage informatique des couleurs
Triplet hexadécimal
Notation courte avec trois chiffres hexadécimaux
Noms des couleurs HTML
Noms de couleurs SVG 1.0
Modèles de couleurs standards HSL et HSV en CSS 1.0 et supérieur
Couleurs garanties sur le web
Tableau de couleur
Couleurs vraiment garanties pour le web
Couleurs utilisées dans les CSS
Accessibilité
Voir aussi
Bibliographie
Articles connexes
Notes et références
Triplet hexadécimal
Un triplet hexadécimal est un nombre hexadécimal à 6 chiffres mémorisé sur trois octets utilisé en HTML et dans les feuilles de
style en cascade (CSS), et d'autres applications, pour représenter les couleurs. Les octets représentent les composantes rouge, vert et
bleu de la couleur. Un octet représente l'intervalle entre 00 et FF (en notation hexadécimale), ou 0 à 255 en notation décimale. Le
triplet hexadécimal est formé par la concaténation de trois octets en notation hexadécimale, dans l'ordre rouge-vert-bleu. Les trois
a
groupes de deux chiffres hexadécimaux se suivent sans espace après un croisillon . Les zéros initiaux, non significatifs, doivent
figurer, pour garder le nombre de chiffres dans les triplets égal à six. Par exemple, le triplet 0,1,2 devrait être représenté par le code
#000102.
exemple
Exemple :
La nuance de bleu qu'on obtient avec les valeurs décimales rouge:36, vert:104, bleu:160 se code avec les
b
hexadécimaux 0x24, 0x68 et 0xA0 .
Ce système peut produire 256 × 256 × 256 = 16 777 216 codes différents. C'est beaucoup plus que le nombre de couleurs qu'on peut
distinguer dans le gamut des écrans dans les meilleures conditions possibles.
Avec seulement trois chiffres hexadécimaux, il n'y a que 16×16×16, soit 4 096 codes de couleur. Ce nombre de couleurs est suffisant
pour la plupart des usages graphiques, c'est-à-dire en dehors de la reproduction des images.
Cette notation est définie par la recommandation CSS, mais pas par le standard HTML. L'utilisation de cette notation raccourcie
2
ailleurs que dans les feuilles de style, l'élément HTML style ou un attribut style n'est pas valide pour certains navigateurs.
Toutes les couleurs ayant une valeur comprise entre#000000 et #FFFFFF (16 777 216 couleurs) sont valides.
Les noms utilisés dans le framework .NET sont quasiment identiques, dans les énumérations Color et KnownColor. La seule couleur
différente est DarkSeaGreen qui est définie comme 8F, BC, 8B (à la place de 8F, BC, 8F).
La liste de couleurs réellement définies avec X11 varie selon les réalisations, et entre en conflit avec un certain nombre de noms
HTML comme c'est le cas pour le vert (green). Pour cette raison, la liste des couleurs que l'on trouve dans X11 (c'est-à-dire
6
/usr/lib/X11/rgb.txt) ne devrait pas être directement utilisée pour choisir des couleurs pour le web.
La liste des « couleurs X11 » du web de la spécification du CSS3, ainsi que leurs équivalents hexadécimaux et décimaux, est
7, 8
présentée ci-dessous .
Noter également que dans les modèles HSL (TSL en français) et HSV (TSV en français), les composantes H (tonalité sur le cercle
des couleurs) sont identiques, mais pas les composantes S codant différemment la saturation ; la composante L du modèle HSL
correspond mieux à la notion de luminosité que la composante V (valeur) du modèle HSV (dont le calcul est plus simple et ne
désigne que l'intensité de la plus lumineuse des 3 composantes RGB en ignorant l'intensité des deux autres). La table montre
également les correspondances avec le modèle CMYK utilisé en impression.
RGB RGB
Nom(s) de couleur Échantillon HSL (° et %) HSV (° et %) CMYK (%)
(hex) (décimal)
rgb(0, 0, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
black #000
0) 0%) 0%) 0%, 100%)
rgb(105, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
dimgray, dimgrey #696969
105, 105) 41.2%) 41.2%) 0%, 58.8%)
rgb(128, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
gray, grey #808080
128, 128) 50.2%) 50.2%) 0%, 49.8%)
rgb(169, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
darkgray, darkgrey #A9A9A9
169, 169) 66.3%) 66.3%) 0%, 33.7%)
rgb(192, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
silver #C0C0C0
192, 192) 75.3%) 75.3%) 0%, 24.7%)
rgb(211, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
lightgray, lightgrey #D3D3D3
211, 211) 82.7%) 82.7%) 0%, 17.3%)
rgb(220, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
gainsboro #DCDCDC
220, 220) 86.3%) 86.3%) 0%, 13.7%)
rgb(245, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
whitesmoke #F5F5F5
245, 245) 96.1%) 96.1%) 0%, 3.9%)
rgb(255, hsl(0, 0%, hsv(0, 0%, cmyk(0%, 0%,
white #FFF
255, 255) 100%) 100%) 0%, 0%)
rgb(128, hsl(0, 100%, hsv(0, 100%, cmyk(0%, 100%,
maroon #800000
0, 0) 25.1%) 50.2%) 100%, 49.8%)
rgb(139, hsl(0, 100%, hsv(0, 100%, cmyk(0%, 100%,
darkred #8B0000
0, 0) 27.3%) 54.5%) 100%, 45.5%)
rgb(255, hsl(0, 100%, hsv(0, 100%, cmyk(0%, 100%,
red #F00
0, 0) 50%) 100%) 100%, 0%)
rgb(178, hsl(0, 67.9%, hsv(0, 80.9%, cmyk(0%, 80.9%,
firebrick #B22222
34, 34) 41.6%) 69.8%) 80.9%, 30.2%)
rgb(165, hsl(0, 59.4%, hsv(0, 74.5%, cmyk(0%, 74.5%,
brown #A52A2A
42, 42) 40.6%) 64.7%) 74.5%, 35.3%)
rgb(205, hsl(0, 53.1%, hsv(0, 55.1%, cmyk(0%, 55.1%,
indianred #CD5C5C
92, 92) 58.2%) 80.4%) 55.1%, 19.6%)
rgb(240, hsl(0, 78.9%, hsv(0, 46.7%, cmyk(0%, 46.7%,
lightcoral #F08080
128, 128) 72.2%) 94.1%) 46.7%, 5.9%)
rgb(188, hsl(0, 25.1%, hsv(0, 23.9%, cmyk(0%, 23.9%,
rosybrown #BC8F8F
143, 143) 64.9%) 73.7%) 23.9%, 26.3%)
rgb(255, hsl(0, 100%, hsv(0, 2%, cmyk(0%, 2%,
snow #FFFAFA
250, 250) 99%) 100%) 2%, 0%)
rgb(255, hsl(6, 100%, hsv(6, 11.8%, cmyk(0%, 10.6%,
mistyrose #FFE4E1
228, 225) 94.1%) 100%) 11.8%, 0%)
hsl(6.2,
rgb(250, hsv(6.2, cmyk(0%, 48.8%,
salmon #FA8072 93.2%,
128, 114) 54.4%, 98%) 54.4%, 2%)
71.4%)
hsl(9.1, hsv(9.1,
rgb(255, cmyk(0%, 61.2%,
tomato #FF6347 100%, 72.2%,
99, 71) 72.2%, 0%)
63.9%) 100%)
hsl(15.1, hsv(15.1,
rgb(233, cmyk(0%, 35.6%,
darksalmon #E9967A 71.6%, 47.6%,
150, 122) 47.6%, 8.6%)
69.6%) 91.4%)
hsl(16.1, hsv(16.1,
rgb(255, cmyk(0%, 50.2%,
coral #FF7F50 100%, 68.6%,
127, 80) 68.6%, 0%)
65.7%) 100%)
orangered #FF4500 rgb(255, hsl(16.2, hsv(16.2, cmyk(0%, 72.9%,
69, 0) 100%, 50%) 100%, 100%) 100%, 0%)
hsl(17.1, hsv(17.1,
rgb(255, cmyk(0%, 37.3%,
lightsalmon #FFA07A 100%, 52.2%,
160, 122) 52.2%, 0%)
73.9%) 100%)
hsl(19.3, hsv(19.3,
rgb(160, cmyk(0%, 48.8%,
sienna #A0522D 56.1%, 71.9%,
82, 45) 71.9%, 37.3%)
40.2%) 62.7%)
hsl(24.7,
rgb(255, hsv(24.7, cmyk(0%, 3.9%,
seashell #FFF5EE 100%,
245, 238) 6.7%, 100%) 6.7%, 0%)
96.7%)
hsv(25,
rgb(139, hsl(25, cmyk(0%, 50.4%,
saddlebrown #8B4513 86.3%,
69, 19) 75.9%, 31%) 86.3%, 45.5%)
54.5%)
hsv(25,
rgb(210, hsl(25, 75%, cmyk(0%, 50%,
chocolate #D2691E 85.7%,
105, 30) 47.1%) 85.7%, 17.6%)
82.4%)
hsl(27.6, hsv(27.6,
rgb(244, cmyk(0%, 32.8%,
sandybrown #F4A460 87.1%, 60.7%,
164, 96) 60.7%, 4.3%)
66.7%) 95.7%)
hsl(28.3, hsv(28.3,
rgb(255, cmyk(0%, 14.5%,
peachpuff #FFDAB9 100%, 27.5%,
218, 185) 27.5%, 0%)
86.3%) 100%)
hsl(29.6, hsv(29.6,
rgb(205, cmyk(0%, 35.1%,
peru #CD853F 58.7%, 69.3%,
133, 63) 69.3%, 19.6%)
52.5%) 80.4%)
hsl(30,
rgb(250, hsv(30, 8%, cmyk(0%, 4%,
linen #FAF0E6 66.7%,
240, 230) 98%) 8%, 2%)
94.1%)
hsl(32.5, hsv(32.5,
rgb(255, cmyk(0%, 10.6%,
bisque #FFE4C4 100%, 23.1%,
228, 196) 23.1%, 0%)
88.4%) 100%)
rgb(255, hsl(32.9, hsv(32.9, cmyk(0%, 45.1%,
darkorange #FF8C00
140, 0) 100%, 50%) 100%, 100%) 100%, 0%)
hsv(33.8,
rgb(222, hsl(33.8, cmyk(0%, 17.1%,
burlywood #DEB887 39.2%,
184, 135) 56.9%, 70%) 39.2%, 12.9%)
87.1%)
hsl(34.3, hsv(34.3,
rgb(210, cmyk(0%, 14.3%,
tan #D2B48C 43.8%, 33.3%,
180, 140) 33.3%, 17.6%)
68.6%) 82.4%)
hsl(34.3,
rgb(250, hsv(34.3, cmyk(0%, 6%,
antiquewhite #FAEBD7 77.8%,
235, 215) 14%, 98%) 14%, 2%)
91.2%)
hsl(35.9, hsv(35.9,
rgb(255, cmyk(0%, 12.9%,
navajowhite #FFDEAD 100%, 32.2%,
222, 173) 32.2%, 0%)
83.9%) 100%)
hsl(36, hsv(36,
rgb(255, cmyk(0%, 7.8%,
blanchedalmond #FFEBCD 100%, 19.6%,
235, 205) 19.6%, 0%)
90.2%) 100%)
hsl(37.1, hsv(37.1,
rgb(255, cmyk(0%, 6.3%,
papayawhip #FFEFD5 100%, 16.5%,
239, 213) 16.5%, 0%)
91.8%) 100%)
hsl(38.1,
rgb(255, hsv(38.1, cmyk(0%, 10.6%,
moccasin #FFE4B5 100%,
228, 181) 29%, 100%) 29%, 0%)
85.5%)
orange #FFA500 rgb(255, hsl(38.8, hsv(38.8, cmyk(0%, 35.3%,
165, 0) 100%, 50%) 100%, 100%) 100%, 0%)
hsl(39.1, hsv(39.1,
rgb(245, cmyk(0%, 9.4%,
wheat #F5DEB3 76.7%, 26.9%,
222, 179) 26.9%, 3.9%)
83.1%) 96.1%)
hsl(39.1,
rgb(253, hsv(39.1, cmyk(0%, 3.2%,
oldlace #FDF5E6 85.2%,
245, 230) 9.1%, 99.2%) 9.1%, 0.8%)
94.7%)
hsl(40,
rgb(255, hsv(40, 5.9%, cmyk(0%, 2%,
floralwhite #FFFAF0 100%,
250, 240) 100%) 5.9%, 0%)
97.1%)
hsl(42.7,
rgb(184, hsv(42.7, cmyk(0%, 27.2%,
darkgoldenrod #B8860B 88.7%,
134, 11) 94%, 72.2%) 94%, 27.8%)
38.2%)
hsv(42.9,
rgb(218, hsl(42.9, cmyk(0%, 24.3%,
goldenrod #DAA520 85.3%,
165, 32) 74.4%, 49%) 85.3%, 14.5%)
85.5%)
hsl(48, hsv(48,
rgb(255, cmyk(0%, 2.7%,
cornsilk #FFF8DC 100%, 13.7%,
248, 220) 13.7%, 0%)
93.1%) 100%)
rgb(255, hsl(50.6, hsv(50.6, cmyk(0%, 15.7%,
gold #FFD700
215, 0) 100%, 50%) 100%, 100%) 100%, 0%)
hsl(54, hsv(54,
rgb(240, cmyk(0%, 4.2%,
khaki #F0E68C 76.9%, 41.7%,
230, 140) 41.7%, 5.9%)
74.5%) 94.1%)
hsl(54, hsv(54,
rgb(255, cmyk(0%, 2%,
lemonchiffon #FFFACD 100%, 19.6%,
250, 205) 19.6%, 0%)
90.2%) 100%)
hsv(54.7,
rgb(238, hsl(54.7, cmyk(0%, 2.5%,
palegoldenrod #EEE8AA 28.6%,
232, 170) 66.7%, 80%) 28.6%, 6.7%)
93.3%)
hsv(55.6,
rgb(189, hsl(55.6, cmyk(0%, 3.2%,
darkkhaki #BDB76B 43.4%,
183, 107) 38.3%, 58%) 43.4%, 25.9%)
74.1%)
hsl(60, hsv(60,
rgb(128, cmyk(0%, 0%,
olive #808000 100%, 100%,
128, 0) 100%, 49.8%)
25.1%) 50.2%)
rgb(255, hsl(60, hsv(60, cmyk(0%, 0%,
yellow #FF0
255, 0) 100%, 50%) 100%, 100%) 100%, 0%)
rgb(250, hsl(60, 80%, hsv(60, 16%, cmyk(0%, 0%,
lightgoldenrodyellow #FAFAD2
250, 210) 90.2%) 98%) 16%, 2%)
hsl(60, hsv(60,
rgb(255, cmyk(0%, 0%,
lightyellow #FFFFE0 100%, 12.2%,
255, 224) 12.2%, 0%)
93.9%) 100%)
hsl(60, hsv(60,
rgb(245, cmyk(0%, 0%,
beige #F5F5DC 55.6%, 10.2%,
245, 220) 10.2%, 3.9%)
91.2%) 96.1%)
hsl(60,
rgb(255, hsv(60, 5.9%, cmyk(0%, 0%,
ivory #FFFFF0 100%,
255, 240) 100%) 5.9%, 0%)
97.1%)
hsl(79.6, hsv(79.6,
rgb(107, cmyk(24.6%, 0%,
olivedrab #6B8E23 60.5%, 75.4%,
142, 35) 75.4%, 44.3%)
34.7%) 55.7%)
yellowgreen #9ACD32 rgb(154, hsl(79.7, hsv(79.7, cmyk(24.9%, 0%,
205, 50) 60.8%, 50%) 75.6%, 75.6%, 19.6%)
80.4%)
rgb(85, hsl(82, 39%, hsv(82, cmyk(20.6%, 0%,
darkolivegreen #556B2F
107, 47) 30.2%) 56.1%, 42%) 56.1%, 58%)
hsl(83.7, hsv(83.7,
rgb(173, cmyk(32.2%, 0%,
greenyellow #ADFF2F 100%, 81.6%,
255, 47) 81.6%, 0%)
59.2%) 100%)
rgb(127, hsl(90.1, hsv(90.1, cmyk(50.2%, 0%,
chartreuse #7FFF00
255, 0) 100%, 50%) 100%, 100%) 100%, 0%)
hsl(90.5, hsv(90.5,
rgb(124, cmyk(50.8%, 0%,
lawngreen #7CFC00 100%, 100%,
252, 0) 100%, 1.2%)
49.4%) 98.8%)
hsl(120, hsv(120,
rgb(0, cmyk(100%, 0%,
darkgreen #006400 100%, 100%,
100, 0) 100%, 60.8%)
19.6%) 39.2%)
hsl(120, hsv(120,
rgb(0, cmyk(100%, 0%,
green #008000 100%, 100%,
128, 0) 100%, 49.8%)
25.1%) 50.2%)
rgb(0, hsl(120, hsv(120, cmyk(100%, 0%,
lime #0F0
255, 0) 100%, 50%) 100%, 100%) 100%, 0%)
hsv(120,
rgb(50, hsl(120, cmyk(75.6%, 0%,
limegreen #32CD32 75.6%,
205, 50) 60.8%, 50%) 75.6%, 19.6%)
80.4%)
hsl(120, hsv(120,
rgb(34, cmyk(75.5%, 0%,
forestgreen #228B22 60.7%, 75.5%,
139, 34) 75.5%, 45.5%)
33.9%) 54.5%)
hsl(120, hsv(120,
rgb(144, cmyk(39.5%, 0%,
lightgreen #90EE90 73.4%, 39.5%,
238, 144) 39.5%, 6.7%)
74.9%) 93.3%)
hsv(120,
rgb(152, hsl(120, cmyk(39.4%, 0%,
palegreen #98FB98 39.4%,
251, 152) 92.5%, 79%) 39.4%, 1.6%)
98.4%)
hsl(120, hsv(120,
rgb(143, cmyk(23.9%, 0%,
darkseagreen #8FBC8F 25.1%, 23.9%,
188, 143) 23.9%, 26.3%)
64.9%) 73.7%)
hsl(120,
rgb(240, hsv(120, cmyk(5.9%, 0%,
honeydew #F0FFF0 100%,
255, 240) 5.9%, 100%) 5.9%, 0%)
97.1%)
hsl(146.5, hsv(146.5,
rgb(46, cmyk(66.9%, 0%,
seagreen #2E8B57 50.3%, 66.9%,
139, 87) 37.4%, 45.5%)
36.3%) 54.5%)
hsl(146.7, hsv(146.7,
rgb(60, cmyk(66.5%, 0%,
mediumseagreen #3CB371 49.8%, 66.5%,
179, 113) 36.9%, 29.8%)
46.9%) 70.2%)
rgb(0, hsl(149.9, hsv(149.9, cmyk(100%, 0%,
springgreen #00FF7F
255, 127) 100%, 50%) 100%, 100%) 50.2%, 0%)
rgb(245, hsl(150, hsv(150, cmyk(3.9%, 0%,
mintcream #F5FFFA
255, 250) 100%, 98%) 3.9%, 100%) 2%, 0%)
rgb(0, hsl(157, hsv(157, cmyk(100%, 0%,
mediumspringgreen #00FA9A
250, 154) 100%, 49%) 100%, 98%) 38.4%, 2%)
hsl(159.6, hsv(159.6,
rgb(102, cmyk(50.2%, 0%,
mediumaquamarine #66CDAA 50.7%, 50.2%,
205, 170) 17.1%, 19.6%)
60.2%) 80.4%)
aquamarine #7FFFD4 rgb(127, hsl(159.8, hsv(159.8, cmyk(50.2%, 0%,
255, 212) 100%, 50.2%, 16.9%, 0%)
74.9%) 100%)
hsl(174, hsv(174,
rgb(64, cmyk(71.4%, 0%,
turquoise #40E0D0 72.1%, 71.4%,
224, 208) 7.1%, 12.2%)
56.5%) 87.8%)
hsl(176.7,
rgb(32, hsv(176.7, cmyk(82%, 0%,
lightseagreen #20B2AA 69.5%,
178, 170) 82%, 69.8%) 4.5%, 30.2%)
41.2%)
hsl(177.8,
rgb(72, hsv(177.8, cmyk(65.6%, 0%,
mediumturquoise #48D1CC 59.8%,
209, 204) 65.6%, 82%) 2.4%, 18%)
55.1%)
hsl(180, hsv(180,
rgb(0, cmyk(100%, 0%,
teal #008080 100%, 100%,
128, 128) 0%, 49.8%)
25.1%) 50.2%)
hsl(180, hsv(180,
rgb(0, cmyk(100%, 0%,
darkcyan #008B8B 100%, 100%,
139, 139) 0%, 45.5%)
27.3%) 54.5%)
rgb(0, hsl(180, hsv(180, cmyk(100%, 0%,
aqua, cyan #0FF
255, 255) 100%, 50%) 100%, 100%) 0%, 0%)
hsl(180,
darkslategray, rgb(47, hsv(180, cmyk(40.5%, 0%,
#2F4F4F 25.4%,
darkslategrey 79, 79) 40.5%, 31%) 0%, 69%)
24.7%)
hsv(180,
rgb(175, hsl(180, cmyk(26.5%, 0%,
paleturquoise #AFEEEE 26.5%,
238, 238) 64.9%, 81%) 0%, 6.7%)
93.3%)
hsl(180, hsv(180,
rgb(224, cmyk(12.2%, 0%,
lightcyan #E0FFFF 100%, 12.2%,
255, 255) 0%, 0%)
93.9%) 100%)
hsl(180,
rgb(240, hsv(180, cmyk(5.9%, 0%,
azure #F0FFFF 100%,
255, 255) 5.9%, 100%) 0%, 0%)
97.1%)
rgb(0, hsl(180.9, hsv(180.9, cmyk(100%,
darkturquoise #00CED1
206, 209) 100%, 41%) 100%, 82%) 1.4%, 0%, 18%)
hsv(181.8,
rgb(95, hsl(181.8, cmyk(40.6%,
cadetblue #5F9EA0 40.6%,
158, 160) 25.5%, 50%) 1.3%, 0%, 37.3%)
62.7%)
hsl(186.7, hsv(186.7,
rgb(176, cmyk(23.5%,
powderblue #B0E0E6 51.9%, 23.5%,
224, 230) 2.6%, 0%, 9.8%)
79.6%) 90.2%)
hsv(194.7,
rgb(173, hsl(194.7, cmyk(24.8%,
lightblue #ADD8E6 24.8%,
216, 230) 53.3%, 79%) 6.1%, 0%, 9.8%)
90.2%)
rgb(0, hsl(195.1, hsv(195.1, cmyk(100%,
deepskyblue #00BFFF
191, 255) 100%, 50%) 100%, 100%) 25.1%, 0%, 0%)
hsl(197.4, hsv(197.4,
rgb(135, cmyk(42.6%,
skyblue #87CEEB 71.4%, 42.6%,
206, 235) 12.3%, 0%, 7.8%)
72.5%) 92.2%)
rgb(135, hsl(203, hsv(203, cmyk(46%,
lightskyblue #87CEFA
206, 250) 92%, 75.5%) 46%, 98%) 17.6%, 0%, 2%)
hsv(207.3, cmyk(61.1%,
rgb(70, hsl(207.3,
steelblue #4682B4 61.1%, 27.8%, 0%,
130, 180) 44%, 49%)
70.6%) 29.4%)
hsl(208,
rgb(240, hsv(208, cmyk(5.9%, 2.7%,
aliceblue #F0F8FF 100%,
248, 255) 5.9%, 100%) 0%, 0%)
97.1%)
dodgerblue #1E90FF rgb(30, hsl(209.6, hsv(209.6, cmyk(88.2%,
144, 255) 100%, 88.2%, 43.5%, 0%, 0%)
55.9%) 100%)
hsl(210, hsv(210, cmyk(22.2%,
rgb(112,
slategray, slategrey #708090 12.6%, 22.2%, 11.1%, 0%,
128, 144)
50.2%) 56.5%) 43.5%)
hsl(210,
lightslategray, rgb(119, hsv(210, cmyk(22.2%,
#789 14.3%,
lightslategrey 136, 153) 22.2%, 60%) 11.1%, 0%, 40%)
53.3%)
hsv(213.9, cmyk(20.7%,
rgb(176, hsl(213.9,
lightsteelblue #B0C4DE 20.7%, 11.7%, 0%,
196, 222) 41.1%, 78%)
87.1%) 12.9%)
hsl(218.5, hsv(218.5,
rgb(100, cmyk(57.8%,
cornflowerblue #6495ED 79.2%, 57.8%,
149, 237) 37.1%, 0%, 7.1%)
66.1%) 92.9%)
hsl(225, hsv(225, cmyk(71.1%,
rgb(65,
royalblue #4169E1 72.7%, 71.1%, 53.3%, 0%,
105, 225)
56.9%) 88.2%) 11.8%)
hsl(240, hsv(240, cmyk(100%,
rgb(0, 0,
navy #000080 100%, 100%, 100%, 0%,
128)
25.1%) 50.2%) 49.8%)
hsl(240, hsv(240, cmyk(100%,
rgb(0, 0,
darkblue #00008B 100%, 100%, 100%, 0%,
139)
27.3%) 54.5%) 45.5%)
hsl(240, hsv(240, cmyk(100%,
rgb(0, 0,
mediumblue #0000CD 100%, 100%, 100%, 0%,
205)
40.2%) 80.4%) 19.6%)
rgb(0, 0, hsl(240, hsv(240, cmyk(100%,
blue #00F
255) 100%, 50%) 100%, 100%) 100%, 0%, 0%)
hsl(240, hsv(240, cmyk(77.7%,
rgb(25,
midnightblue #191970 63.5%, 77.7%, 77.7%, 0%,
25, 112)
26.9%) 43.9%) 56.1%)
hsl(240,
rgb(230, hsv(240, 8%, cmyk(8%, 8%,
lavender #E6E6FA 66.7%,
230, 250) 98%) 0%, 2%)
94.1%)
hsl(240,
rgb(248, hsv(240, cmyk(2.7%, 2.7%,
ghostwhite #F8F8FF 100%,
248, 255) 2.7%, 100%) 0%, 0%)
98.6%)
hsl(248.3, hsv(248.3, cmyk(48.3%,
rgb(106,
slateblue #6A5ACD 53.5%, 56.1%, 56.1%, 0%,
90, 205)
57.8%) 80.4%) 19.6%)
hsl(248.5, hsv(248.5,
rgb(123, cmyk(48.3%,
mediumslateblue #7B68EE 79.8%, 56.3%,
104, 238) 56.3%, 0%, 6.7%)
67.1%) 93.3%)
hsv(248.5, cmyk(48.2%,
rgb(72, hsl(248.5,
darkslateblue #483D8B 56.1%, 56.1%, 0%,
61, 139) 39%, 39.2%)
54.5%) 45.5%)
hsl(259.6, hsv(259.6, cmyk(32.9%,
rgb(147,
mediumpurple #9370DB 59.8%, 48.9%, 48.9%, 0%,
112, 219)
64.9%) 85.9%) 14.1%)
hsl(271.1,
rgb(138, hsv(271.1, cmyk(38.9%,
blueviolet #8A2BE2 75.9%,
43, 226) 81%, 88.6%) 81%, 0%, 11.4%)
52.7%)
hsl(274.6,
rgb(75, 0, hsv(274.6, cmyk(42.3%,
indigo #4B0082 100%,
130) 100%, 51%) 100%, 0%, 49%)
25.5%)
darkorchid #9932CC rgb(153, hsl(280.1, hsv(280.1, cmyk(25%,
50, 204) 60.6%, 75.5%, 80%) 75.5%, 0%, 20%)
49.8%)
hsl(282.1, hsv(282.1, cmyk(29.9%,
rgb(148,
darkviolet #9400D3 100%, 100%, 100%, 0%,
0, 211)
41.4%) 82.7%) 17.3%)
hsv(288.1, cmyk(11.8%,
rgb(186, hsl(288.1,
mediumorchid #BA55D3 59.7%, 59.7%, 0%,
85, 211) 58.9%, 58%)
82.7%) 17.3%)
hsl(300, hsv(300,
rgb(128, cmyk(0%, 100%,
purple #800080 100%, 100%,
0, 128) 0%, 49.8%)
25.1%) 50.2%)
hsl(300, hsv(300,
rgb(139, cmyk(0%, 100%,
darkmagenta #8B008B 100%, 100%,
0, 139) 0%, 45.5%)
27.3%) 54.5%)
rgb(255, hsl(300, hsv(300, cmyk(0%, 100%,
fuchsia, magenta #F0F
0, 255) 100%, 50%) 100%, 100%) 0%, 0%)
hsl(300, hsv(300,
rgb(238, cmyk(0%, 45.4%,
violet #EE82EE 76.1%, 45.4%,
130, 238) 0%, 6.7%)
72.2%) 93.3%)
hsl(300, hsv(300,
rgb(221, cmyk(0%, 27.6%,
plum #DDA0DD 47.3%, 27.6%,
160, 221) 0%, 13.3%)
74.7%) 86.7%)
hsl(300, hsv(300,
rgb(216, cmyk(0%, 11.6%,
thistle #D8BFD8 24.3%, 11.6%,
191, 216) 0%, 15.3%)
79.8%) 84.7%)
hsl(302.3, hsv(302.3,
rgb(218, cmyk(0%, 48.6%,
orchid #DA70D6 58.9%, 48.6%,
112, 214) 1.8%, 14.5%)
64.7%) 85.5%)
hsl(322.2,
rgb(199, hsv(322.2, cmyk(0%, 89.4%,
mediumvioletred #C71585 80.9%,
21, 133) 89.4%, 78%) 33.2%, 22%)
43.1%)
hsl(327.6, hsv(327.6,
rgb(255, cmyk(0%, 92.2%,
deeppink #FF1493 100%, 92.2%,
20, 147) 42.4%, 0%)
53.9%) 100%)
hsl(330, hsv(330,
rgb(255, cmyk(0%, 58.8%,
hotpink #FF69B4 100%, 58.8%,
105, 180) 29.4%, 0%)
70.6%) 100%)
hsl(340,
rgb(255, hsv(340, cmyk(0%, 5.9%,
lavenderblush #FFF0F5 100%,
240, 245) 5.9%, 100%) 3.9%, 0%)
97.1%)
hsl(340.4, hsv(340.4,
rgb(219, cmyk(0%, 48.9%,
palevioletred #DB7093 59.8%, 48.9%,
112, 147) 32.9%, 14.1%)
64.9%) 85.9%)
hsl(348, hsv(348,
rgb(220, cmyk(0%, 90.9%,
crimson #DC143C 83.3%, 90.9%,
20, 60) 72.7%, 13.7%)
47.1%) 86.3%)
hsl(349.5, hsv(349.5,
rgb(255, cmyk(0%, 24.7%,
pink #FFC0CB 100%, 24.7%,
192, 203) 20.4%, 0%)
87.6%) 100%)
hsl(351, hsv(351,
rgb(255, cmyk(0%, 28.6%,
lightpink #FFB6C1 100%, 28.6%,
182, 193) 24.3%, 0%)
85.7%) 100%)
La liste des couleurs est souvent présentée comme si elle avait des propriétés spéciales qui les rendraient immunisées au tramage. En
fait, sur les moniteurs à 256 couleurs les applications peuvent fixer une palette de n'importe quelle sélection de couleurs de leur
choix, tramant le reste. Ces couleurs ont été choisies spécialement parce qu'elles correspondaient aux palettes choisies par les
principales applications de navigateur de l'époque. Heureusement, les palettes utilisées par les différents navigateurs populaires
n'étaient pas foncièrement différentes.
Les couleurs garanties sur le web avaient un défaut, sur les systèmes tel que X11 où la palette est partagée entre les applications, de
plus petits cubes de couleurs RVB (5×5×5 ou 4×4×4) sont souvent alloués par les navigateurs — ainsi, les couleurs garanties sur le
web trament sur de tels systèmes. De meilleurs résultats étaient obtenus en fournissant une image avec une plus large gamme de
couleurs et permettant au navigateur de quantifier l'espace de couleur si nécessaire, plutôt que de subir la perte de qualité d'une
double quantification.
e
Dans les premières années du XXI siècle, conduits par les besoins du jeu vidéo et de la photographie numérique, les ordinateurs
personnels ont au moins des couleurs en 16 bits et généralement 24 bits (couleurs vraies). Même les appareils mobiles ont au moins
les couleurs en 16 bits, du fait des options caméras sur les téléphones mobiles. L'utilisation des couleurs garanties web est tombé en
désuétude, mais persiste dans le folklore.
Le système de la palette garantie pour le web persiste comme étant la palette avec le plus grand nombre de couleurs distinctes, où
chaque couleur peut être distinguée séparément par l’œil humain.
Les couleurs garanties pour le web n'ont pas de noms, mais chacune peut être spécifiée par un triplet RGB.
Tableau de couleur
Le tableau suivant montre toutes les couleurs « garanties pour le web », mais aussi en souligné les couleurs vraiment garanties.
L'absence de correction gamma implique que les six intensités souhaitées 0 %, 20 %, 40 %, 60 %, 80 %, et 100 % sont affichés à
0 %, 2 %, 10 %, 28 %, 57 %, et 100 % dans un standard 2,5 gamma CRT ou LCD, faisant la plupart des couleurs très sombres. Les
intensités dans le bas de la gamme, particulièrement entre 0 et 3, sont quasiment indiscernables les unes des autres sur un écran non
conforme ou non réglé sRGB.
Les couleurs sont ici représentées avec lanotation courte (trois chiffres hexadécimaux).
Couleurs garanties sur le Web
*000* 300 600 900 C00 *F00*
*003* 303 603 903 C03 *F03*
006 306 606 906 C06 F06
009 309 609 909 C09 F09
00C 30C 60C 90C C0C F0C
*00F* 30F 60F 90F C0F *F0F*
030 330 630 930 C30 F30
033 333 633 933 C33 F33
036 336 636 936 C36 F36
039 339 639 939 C39 F39
03C 33C 63C 93C C3C F3C
03F 33F 63F 93F C3F F3F
060 360 660 960 C60 F60
063 363 663 963 C63 F63
066 366 666 966 C66 F66
069 369 669 969 C69 F69
06C 36C 66C 96C C6C F6C
06F 36F 66F 96F C6F F6F
090 390 690 990 C90 F90
093 393 693 993 C93 F93
096 396 696 996 C96 F96
099 399 699 999 C99 F99
09C 39C 69C 99C C9C F9C
09F 39F 69F 99F C9F F9F
0C0 3C0 6C0 9C0 CC0 FC0
0C3 3C3 6C3 9C3 CC3 FC3
0C6 3C6 6C6 9C6 CC6 FC6
0C9 3C9 6C9 9C9 CC9 FC9
0CC 3CC 6CC 9CC CCC FCC
0CF 3CF 6CF 9CF CCF FCF
*0F0* 3F0 *6F0* 9F0 CF0 *FF0*
0F3 *3F3* *6F3* 9F3 CF3 *FF3*
*0F6* *3F6* 6F6 9F6 *CF6* *FF6*
0F9 3F9 6F9 9F9 CF9 FF9
*0FC* *3FC* 6FC 9FC CFC FFC
*0FF* *3FF* *6FF* 9FF CFF *FFF*
Color Hexadecimal
orange #FFA500
CSS 2, SVG et CSS 2.1 permettent aux auteurs de pages web d'utiliser les dites « couleurs système », qui sont le nom des couleurs
10
dont la valeur provient du système d'exploitation . Cela rend possible aux auteurs de documents web de styliser leur contenu en
ligne avec les couleurs définies dans l'environnement de travail de l'utilisateur. Depuis début 2004, il se trouve que le module de
11
couleur CSS 3 abandonnera une fois encore ces valeurs, les rendantobsolètes, mais cela pourrait changer .
/* modèle RVB */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255,0,0) } /* intervalle entier 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* intervalle à virgule flottante 0,0 % - 100,0 % */
Accessibilité
L'utilisation de la couleur dans les pages Web est soumise à deux règles d'accessibilité selon les normes d'accessibilité WCAG
12
définies par le W3C :
Aucune information ne doit être véhiculée uniquement par la couleur . En effet, celle-ci ne sera pas perceptible
pour certains utilisateurs, comme les personnes aveugles naviguant à l'aide d'un lecteur d'écran. Elle sera
également difficilement compréhensible pourd'autres utilisateurs ayant un handicap visuel, notamment les
daltoniens. La couleur doit donc être accompagnée par un autre moyen de véhiculer l'information, qu'il soit
graphique, textuel ou structurel. Cette règle relève du niveau de priorité 1 des WCAG, c'est-à-dire du niveau
minimal d'accessibilité d'un site.
Lorsque la couleur est utilisée de cette manière, un niveau decontraste suffisant avec l'arrière-plan doit être
assuré. Cette règle s'applique aux images comme aux contenus textuels. Elle relève, selon le cas, du niveau
intermédiaire ou optimal d'accessibilité d'un site. La mesure de ce niveau de contraste et les seuils admissibles
13
varient légèrement selon les méthodes d'application des WCAG .
Voir aussi
Bibliographie
Articles connexes
Codage informatique des couleurs
Teinte saturation lumière
Notes et références
a. Le croisillon n'est pas un dièse.
b. Pour convertir une valeur décimale en une valeur hexadécimale,
1. ramener l'étendue des valeurs à [0,255]. Si elles sont comprises entre 0 et 1, multipliez la valeur par 255
avant la conversion ;
2. divisez ce nombre par 16 avec reste ;
3. le quotient est le premier chiffre du code, le reste est le second. La numérationhexadécimale représente
les nombres de 0 à 9 comme la notation décimale ; ceux compris entre 10 et 15 se notent avec les lettres A,
B, C, D, E, F (majuscules ou minuscules).
exemple :
201 = (12×16)+9, donc le premier chiffre est l'hexadécimal qui représente la valeur 12, C, et le second
est 9. Le code hexadécimal estC9.
1. Les couleurs en CSS (en)[1] (http://www.w3.org/TR/CSS2/syndata.html#color-units), traduction non officielle : [2] (htt
p://www.yoyodesign.org/doc/w3c/css2/syndata.html#color-units)
2. IE8 interprète mal le bgcolor avec trois chiffres hexadécimaux (http://www.plus2clics.com/?p=528)
3. HTML 4.01 Specification section 6.5 "Colors"(http://www.w3.org/TR/REC-html40/types.html#h-6.5)
4. Le guide du code HTML,« Les couleurs standardisées ou palette de couleurs »(http://www.guide-code-html.com/cou
leurs-standards.php).
5. HTML 3.2 Specification "The BODY element"(http://www.w3.org/TR/REC-html32#body)
6. Public discussion on SVG mailing listRe: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt(http://lists.w3.org/
Archives/Public/www-svg/2002Apr/0052.html)
7. W3C TR CSS3 Color Module, SVG color keywords(http://www.w3.org/TR/css3-color/#svg-color)
8. W3C TR SVG 1.0, recognized color keyword names(http://www.w3.org/TR/SVG/types.html#ColorKeywords)
9. Le guide des couleurs web(https://www.crazy-colors.net/fr/)
10. Voir system-colors (http://www.w3.org/TR/CSS21/ui.html#system-colors)
11. css2-system (http://www.w3.org/TR/css3-color/#css2-system)
12. (en) Web Content Accessibility Guidelines 1.0, Don't rely on color alone (http://www.w3.org/TR/WCAG10/#gl-color)
13. (en) Techniques For Accessibility Evaluation AndRepair Tools (W3C) (http://www.w3.org/TR/AERT#color-contrast)
et Techniques for WCAG 2.0 (W3C)(http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G18.html)