Couleur du Web

L'expression couleurs du Web désigne un jeu de couleurs appelées par un mot-clé dans les langages de description de page HyperText Markup Language (HTML) et Cascading Style Sheet (CSS).

Les auteurs de pages web peuvent spécifier numériquement 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é. Pour simplifier le codage, les auteurs peuvent appeler les couleurs d'une palette de 216 couleurs réparties dans l'espace de couleur des écrans par un mot-clé basé sur une désignation en anglais.

L'économie de moyens graphiques est à l'origine du nombre de couleurs. Les ordinateurs personnels contemporains de la définition des couleurs du web avaient une capacité de traitement suffisamment limitée pour qu'on prèfère traiter des index de palette sur un octet. Les noms de couleur associés sont plus explicites que des codes. Ils reflètent l'usage américain quand la décision des premiers auteurs coïncide avec celui-ci. Ce sont des mots-clé, que les programmes de localisation des ordinateurs ne traduisent pas.

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 applications X Window System.

La colorimétrie des couleurs sur l'écran dépend de sa fabrication et de son réglage, mais les couleurs du web devraient, dans tous les cas, donner des nuances distinctes les unes des autres.

Codage informatique des couleurs

Les écrans produisent des couleurs par un système de synthèse additive au moyen de trois types de luminophores rouges, verts et bleus suffisamment petits pour qu'ils se confondent à la distance normale d'observation. L'intensité du courant électrique qui les traverse déterminent leur luminosité. La vision humaine peut distinguer, pour chaque couleur, une centaine de niveaux de luminosité. On peut donc quantifier les courants de luminophores sur sept ou huit bits. Le codage sur huit bits, qui correspond à l'octet, élément de base des processeurs, s'impose.

Le codage informatique le plus simple de la couleur consiste à donner, pour chaque pixel, c'est-à-dire pour tout élément de l'image, trois valeurs sur un octet, correspondant directement à la luminosité. HTML et CSS acceptent la notation rgb(45,40,15)​ où les nombres représentent la valeur en pourcentage pour le rouge, le vert et le bleu, et la notation condensée #08A12C​, où le code après # agglutine trois valeurs hexadécimales qui sont directement celle des octets de commande des luminophores.

Les langages de description de page HTML CSS acceptent aussi une description plus intuitive, teinte saturation lumière (Hue Saturation Lightness), définissant la teinte par un angle entre 0 (rouge) et 360°, où le vert se trouve à 120 et le bleu à 240, et les couleurs intermédiaires en dégradé proportionnel, la saturation et la luminosité par un pourcentage.

Noms des couleurs HTML

La spécification[1] du HTML 4.01 définit 16 couleurs nommées appelées par 18 mots-clés en anglais (il y a deux paires de synonymes), et dont l'emploi n'est pas sensible à la casse. (Les traductions[2] en français entre parenthèses sont indicatives et ne sont pas des attributs valides en HTML.) Ces attributs et la valeur hexadécimale de rouge-vert-bleu équivalente sont, par ordre alphabétique :

Valeur Couleur Valeur Couleur Valeur Couleur Valeur Couleur
#00FFFF aqua / cyan
(bleu-vert eau)
#008000 green
(vert)
#000080 navy
(bleu marine)
#C0C0C0 silver
(argent)
#000000 black
(noir)
#808080 gray
(gris)
#808000 olive
(jaune olive)
#008080 teal
(sarcelle)
#0000FF blue
(bleu)
#00FF00 lime
(vert citron)
#800080 purple
(violet)
#FFFFFF white
(blanc)
#FF00FF fuchsia / magenta
(fuchsia)
#800000 maroon
(bordeaux)
#FF0000 red
(rouge)
#FFFF00 yellow
(jaune)

Ces couleurs sont incluses dans les spécifications du HTML 3.0 qui fait remarquer que « Ces couleurs sont issues des 16 couleurs standards supportées avec la palette VGA Windows. »[3]

Noms de couleurs SVG 1.0

Les navigateurs web ont défini nombre de mot-clé de couleur. Un navigateur particulier pourrait ne pas reconnaître toutes ces couleurs, mais depuis 2005 tous les navigateurs modernes d'utilisation courante ont avalisé la liste complète. Beaucoup de ces couleurs sont issues de la liste des noms de couleur X11 fournie par le système de fenêtrage X. Ces couleurs ont été normalisées par SVG 1.0, et sont reconnues par les visiteurs SVG Full. Elles ne font pas partie de SVG Tiny.

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 /usr/lib/X11/rgb.txt) ne devrait pas être directement utilisée pour choisir des couleurs pour le web[4].

La liste des « couleurs X11 » du web de la spécification du CSS3, ainsi que leurs équivalents hexadécimaux et décimaux, est présentée ci-dessous[5],[6].

Nom HTML Code hex.
R V B
Code déc.
R V B
Rouges
IndianRedCD 5C 5C205 92 92
LightCoralF0 80 80240 128 128
SalmonFA 80 72250 128 114
DarkSalmonE9 96 7A233 150 122
LightSalmonFF A0 7A255 160 122
CrimsonDC 14 3C220 20 60
RedFF 00 00255 0 0
FireBrickB2 22 22178 34 34
DarkRed8B 00 00139 0 0
Maroon80 00 00128 0 0
Roses
PinkFF C0 CB255 192 203
LightPinkFF B6 C1255 182 193
HotPinkFF 69 B4255 105 180
DeepPinkFF 14 93255 20 147
MediumVioletRedC7 15 85199 21 133
PaleVioletRedDB 70 93219 112 147
Orangés
CoralFF 7F 50255 127 80
TomatoFF 63 47255 99 71
OrangeRedFF 45 00255 69 0
DarkOrangeFF 8C 00255 140 0
OrangeFF A5 00255 165 0
Jaunes
GoldFF D7 00255 215 0
YellowFF FF 00255 255 0
LightYellowFF FF E0255 255 224
LemonChiffonFF FA CD255 250 205
LightGoldenrodYellowFA FA D2250 250 210
PapayaWhipFF EF D5255 239 213
MoccasinFF E4 B5255 228 181
PeachPuffFF DA B9255 218 185
PaleGoldenrodEE E8 AA238 232 170
KhakiF0 E6 8C240 230 140
DarkKhakiBD B7 6B189 183 107
Violets
LavenderE6 E6 FA230 230 250
ThistleD8 BF D8216 191 216
PlumDD A0 DD221 160 221
VioletEE 82 EE238 130 238
OrchidDA 70 D6218 112 214
FuchsiaFF 00 FF255 0 255
MagentaFF 00 FF255 0 255
MediumOrchidBA 55 D3186 85 211
MediumPurple93 70 DB147 112 219
BlueViolet8A 2B E2138 43 226
DarkViolet94 00 D3148 0 211
DarkOrchid99 32 CC153 50 204
DarkMagenta8B 00 8B139 0 139
Purple80 00 80128 0 128
Indigo4B 00 8275 0 130
SlateBlue6A 5A CD106 90 205
DarkSlateBlue48 3D 8B72 61 139
Nom HTML Code hex.
R V B
Code déc.
R V B
Verts
GreenYellowAD FF 2F173 255 47
Chartreuse7F FF 00127 255 0
LawnGreen7C FC 00124 252 0
Lime00 FF 000 255 0
LimeGreen32 CD 3250 205 50
PaleGreen98 FB 98152 251 152
LightGreen90 EE 90144 238 144
MediumSpringGreen00 FA 9A0 250 154
SpringGreen00 FF 7F0 255 127
MediumSeaGreen3C B3 7160 179 113
SeaGreen2E 8B 5746 139 87
ForestGreen22 8B 2234 139 34
Green00 80 000 128 0
DarkGreen00 64 000 100 0
YellowGreen9A CD 32154 205 50
OliveDrab6B 8E 23107 142 35
Olive80 80 00128 128 0
DarkOliveGreen55 6B 2F85 107 47
MediumAquamarine66 CD AA102 205 170
DarkSeaGreen8F BC 8F143 188 143
LightSeaGreen20 B2 AA32 178 170
DarkCyan00 8B 8B0 139 139
Teal00 80 800 128 128
Bleus
Aqua00 FF FF0 255 255
Cyan00 FF FF0 255 255
LightCyanE0 FF FF224 255 255
PaleTurquoiseAF EE EE175 238 238
Aquamarine7F FF D4127 255 212
Turquoise40 E0 D064 224 208
MediumTurquoise48 D1 CC72 209 204
DarkTurquoise00 CE D10 206 209
CadetBlue5F 9E A095 158 160
SteelBlue46 82 B470 130 180
LightSteelBlueB0 C4 DE176 196 222
PowderBlueB0 E0 E6176 224 230
LightBlueAD D8 E6173 216 230
SkyBlue87 CE EB135 206 235
LightSkyBlue87 CE FA135 206 250
DeepSkyBlue00 BF FF0 191 255
DodgerBlue1E 90 FF30 144 255
CornflowerBlue64 95 ED100 149 237
MediumSlateBlue7B 68 EE123 104 238
RoyalBlue41 69 E165 105 225
Blue00 00 FF0 0 255
MediumBlue00 00 CD0 0 205
DarkBlue00 00 8B0 0 139
Navy00 00 800 0 128
MidnightBlue19 19 7025 25 112
Nom HTML Code hex.
R V B
Code déc.
R V B
Marrons et bruns
CornsilkFF F8 DC255 248 220
BlanchedAlmondFF EB CD255 235 205
BisqueFF E4 C4255 228 196
NavajoWhiteFF DE AD255 222 173
WheatF5 DE B3245 222 179
BurlyWoodDE B8 87222 184 135
TanD2 B4 8C210 180 140
RosyBrownBC 8F 8F188 143 143
SandyBrownF4 A4 60244 164 96
GoldenrodDA A5 20218 165 32
DarkGoldenrodB8 86 0B184 134 11
PeruCD 85 3F205 133 63
ChocolateD2 69 1E210 105 30
SaddleBrown8B 45 13139 69 19
SiennaA0 52 2D160 82 45
BrownA5 2A 2A165 42 42
Blancs
WhiteFF FF FF255 255 255
SnowFF FA FA255 250 250
HoneydewF0 FF F0240 255 240
MintCreamF5 FF FA245 255 250
AzureF0 FF FF240 255 255
AliceBlueF0 F8 FF240 248 255
GhostWhiteF8 F8 FF248 248 255
WhiteSmokeF5 F5 F5245 245 245
SeashellFF F5 EE255 245 238
BeigeF5 F5 DC245 245 220
OldLaceFD F5 E6253 245 230
FloralWhiteFF FA F0255 250 240
IvoryFF FF F0255 255 240
AntiqueWhiteFA EB D7250 235 215
LinenFA F0 E6250 240 230
LavenderBlushFF F0 F5255 240 245
MistyRoseFF E4 E1255 228 225
Gris
GainsboroDC DC DC220 220 220
LightGreyD3 D3 D3211 211 211
SilverC0 C0 C0192 192 192
DarkGrayA9 A9 A9169 169 169
Gray80 80 80128 128 128
DimGray69 69 69105 105 105
LightSlateGray77 88 99119 136 153
SlateGray70 80 90112 128 144
DarkSlateGray2F 4F 4F47 79 79
Black00 00 000 0 0

Couleurs garanties sur le web

Cette section ne cite pas suffisamment ses sources (février 2020). 
Pour l'améliorer, ajoutez des références de qualité et vérifiables (comment faire ?) ou le modèle {{Référence nécessaire}} sur les passages nécessitant une source.

Un ensemble de couleurs qui pouvaient être affichées directement sur les écrans avec une carte graphique à 256 couleurs était nécessaire à l'époque de la définition des normes du Web. Pour la palette de couleurs garanties sur le web (web-safe colors), un ensemble donnant six niveaux de rouge, de vert et de bleu a été choisi, donnant 216 couleurs (6 × 6 × 6 = 216). Les systèmes d'exploitation pouvaient exploiter les 40 valeurs non attribuées.

Niveaux « sûrs »
hex octet décimal  %
0 0 0x00 0 0
1 3 0x33 51 20
2 6 0x66 102 40
3 9 0x99 153 60
4 C 0xCC 204 80
5 F 0xFF 255 100

Les codes de ces 216 couleurs choisies pour leur simplicité, sans considération d'esthétique ou d'utilité, peuvent tous s'appeler en utilisant la forme abrégée #NNN. La taille importante de l'échelon, un cinquième du maximum, garantit que les couleurs sont différentes et identifiables quelle que soit la fabrication ou le réglage de l'écran[7]. Seule une petite partie correspond à ceux qu'appellent les mots-clé.

La liste des couleurs a été présentée comme si elle avait des propriétés spéciales. Les applications peuvent modifier la table de correspondance de la palette des cartes graphiques à 256 couleurs. Les couleurs du web sont celles choisies par les principales applications de navigateur de l'époque qui 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[réf. nécessaire].

Dans les premières années du XXIe 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[réf. souhaitée]. L'utilisation des couleurs garanties web est tombé en désuétude, mais persiste dans le folklore[réf. souhaitée].

Tableau de couleur

Cette section ne cite pas suffisamment ses sources (février 2020). 
Pour l'améliorer, ajoutez des références de qualité et vérifiables (comment faire ?) ou le modèle {{Référence nécessaire}} sur les passages nécessitant une source.

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[réf. nécessaire].

Les couleurs sont ici représentées avec la notation courte (trois chiffres hexadécimaux).

Couleurs toujours 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*

Couleurs vraiment garanties pour le web

Cette section ne cite pas suffisamment ses sources (février 2020). 
Pour l'améliorer, ajoutez des références de qualité et vérifiables (comment faire ?) ou le modèle {{Référence nécessaire}} sur les passages nécessitant une source.

Les concepteurs sont souvent encouragés à rester fidèles aux 216 couleurs garanties pour le web dans l'élaboration de leur site web ; les moniteurs de couleur 8 bits étaient plus courants quand la palette de 216 couleurs a été établie qu'ils ne le sont aujourd'hui. David Lehn et Hadley Stern ont découvert que seules 22 des 216 couleurs de la palette sont fidèlement affichées sans remappage incohérent sur des moniteurs 16 bits. Ils appelèrent ces 22 couleurs la palette vraiment garantie ("really safe" palette) ; elle est composée principalement de tons de vert et de jaune, comme on peut le voir dans le tableau ci-dessus, où les couleurs vraiment sécurisées sont soulignées.

Couleurs utilisées dans les CSS

Le langage des feuilles de style en cascade (Cascading Style Sheets, CSS) définit le même nombre de couleurs et les mêmes noms des couleurs que dans les spécifications du HTML 4, c'est-à-dire les 16 couleurs énumérées précédemment.

De plus, CSS 2.1 ajoute le nom de couleur 'orange' à la liste :

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 dont la valeur provient du système d'exploitation[8]. 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 couleur CSS 3 abandonnera une fois encore ces valeurs, les rendant obsolètes, mais cela pourrait changer[9].

Les spécifications CSS3 ont introduit également les valeurs de l'espace de couleur TSL aux feuilles de styles :

/* 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 % */
/* RVB avec canal alpha, ajouté à partir de CSS3 */
p { color: rgba(255,0,0,0.5) }  /* intervalle à virgule flottante 0 - 1, 0,5 étant semi-transparent */
/* modèle TSL, ajouté à partir de CSS3 */
p { color: hsl(0, 100%, 50%) }   /* rouge */
p { color: hsl(120, 100%, 50%) } /* vert */ 
p { color: hsl(120, 100%, 25%) } /* vert clair */ 
p { color: hsl(120, 100%, 75%) } /* vert foncé */ 
p { color: hsl(120, 50%, 50%) }  /* vert pastel */
/* TSL avec canal alpha */
p { color: hsla(120, 100%, 50%, 1) }   /* vert */
p { color: hsla(120, 100%, 50%, 0.5) } /* vert semi-transparent */
p { color: hsla(120, 100%, 50%, 0.1) } /* vert très transparent */

Accessibilité

L'utilisation de la couleur dans les pages Web est soumise à deux règles d'accessibilité selon les normes d'accessibilité WCAG définies par le W3C[10] :

  • 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 pour d'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 de contraste 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 varient légèrement selon les méthodes d'application des WCAG[11].

Articles connexes

Notes et références


    • Portail d’Internet
    • Portail des couleurs
    Cet article est issu de Wikipedia. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.