Couleur du Web

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.

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 :

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]

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].

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.

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 XXI^e 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.

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 :

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 */

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].