Couleur du Web — Wikipédia

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és, 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.

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

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

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^[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 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^[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 rendant obsolè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 le W3C^[11] :

• 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^[12].

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?

• Codage informatique des couleurs
• Teinte saturation lumière
• Outil de gestion des couleurs

• Portail d’Internet
• Portail des couleurs