Lescouleurs du Web sont un jeu decouleurs appelées par unmot-clé dans les langages de description de pageHyperText Markup Language (HTML) etCascading Style Sheet (CSS).
Les auteurs de pages web peuvent spécifiernumériquement les couleurs des éléments qui composent un document web de plusieurs manières : par un code agglutinant les valeurshexadécimalesRGB ; par un triplet donnant ces valeurs en décimal de 0 à 255 ou par un pourcentage ; par des référencesTeinte Saturation Luminosité. Pour simplifier le codage, les auteurs peuvent appeler les couleurs d'unepalette de 216 couleurs réparties dans l'espace de couleur des écrans par unmot-clé basé sur une désignation enanglais.
L'économie de moyens graphiques est à l'origine du nombre de couleurs. Lesordinateurs 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 desindex de palette sur unoctet. Lesnoms 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és, que les programmes delocalisation des ordinateurs ne traduisent pas.
Les premières versions deMosaic et dunavigateur Netscape utilisaient lesnoms des couleurs X11 comme base pour leur liste de couleurs, puisque les deux logiciels ont commencé comme applicationsX Window System.
Lacolorimé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.
Les écrans produisent des couleurs par un système desynthèse additive au moyen de trois types deluminophores rouges, verts et bleus suffisamment petits pour qu'ils se confondent à la distance normale d'observation. L'intensité ducourant électrique qui les traverse déterminent leurluminosité. Lavision humaine peut distinguer, pour chaque couleur, une centaine de niveaux de luminosité. On peut doncquantifier les courants deluminophores sur sept ou huitbits. Lecodage sur huit bits, qui correspond à l'octet, élément de base desprocesseurs, s'impose.
Le codage informatique le plus simple de la couleur consiste à donner, pour chaquepixel, c'est-à-dire pour tout élément de l'image, trois valeurs sur un octet, correspondant directement à la luminosité. HTML et CSS acceptent la notationrgb(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 valeurshexadé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 lateinte 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, lasaturation et laluminosité par un pourcentage.
La spécification[1] duHTML 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 passensible à 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 valeurhexadé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 paletteVGA Windows. »[3]
Lesnavigateurs web ont défini nombre de mots-clés 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 desnoms de couleur X11 fournie par lesystème de fenêtrage X. Ces couleurs ont été normalisées parSVG 1.0, et sont reconnues par les visiteursSVG Full. Elles ne font pas partie deSVG Tiny.
Les noms utilisés dans leframework .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].
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Un ensemble de couleurs qui pouvaient être affichées directement sur les écrans avec unecarte graphique à 256 couleurs était nécessaire à l'époque de la définition desnormes 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). Lessystèmes d'exploitation pouvaient exploiter les 40 valeurs non attribuées.
| 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és.
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 tels queX11 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 duXXIe 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].
Le tableau suivant montre toutes les couleurs « garanties pour le web », mais aussi en souligné les couleursvraiment garanties. L'absence decorrection 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).
| *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* |
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[8]. 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 letableau ci-dessus, où les couleurs vraiment sécurisées sont soulignées.
Le langage desfeuilles 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 dusystème d'exploitation[9]. 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 rendantobsolètes, mais cela pourrait changer[10].
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 */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 leW3C[11] :
