Noms de couleurs HTML – Utilisation en HTML

Les couleurs jouent un rôle crucial dans la conception des sites web, en évoquant des émotions, en transmettant des messages et en créant une expérience visuellement attrayante. Dans le domaine du HTML et du CSS, les noms de couleurs constituent un moyen pratique de spécifier les couleurs sans avoir recours aux valeurs hexadécimales ou RGB. Les noms de couleurs sont attribués de différentes manières. Elles sont souvent nommées d’après des plantes, des animaux ou d’autres choses auxquelles elles ressemblent. Par exemple, la couleur orange a reçu son nom lorsqu’elle a été utilisée pour décrire le fruit orange. Les couleurs sont également nommées d’après les pigments qui étaient historiquement utilisés pour les créer, et le nom d’une couleur peut être influencé par une histoire intéressante, ainsi que par des sentiments ou des émotions associés à cette couleur.

Cet article explore le monde des noms de couleurs HTML, leur utilisation, leurs limites et la signification des couleurs dans la conception de sites web. Nous calculerons ici combien de couleurs existent selon le modèle de couleurs RGB et combien de couleurs sont présentes dans la norme HTML, comment les noms de certaines couleurs sont apparus et pourquoi nous les utilisons toujours et pas seulement des codes de couleurs.

Combien de couleurs existe-t-il ?

Le nombre de couleurs dans le monde va bien au-delà des couleurs traditionnelles de l’arc-en-ciel. Si vous consultez le système RGB, vous constaterez qu’il existe 256^3 = 16 777 216 couleurs, et qu’elles peuvent toutes avoir leur propre nom ! Avec des millions de couleurs, les gens ont dû faire preuve de créativité pour les nommer toutes. Bien que la plupart des couleurs ne soient que des nuances d’une couleur plus commune, il est toujours intéressant de savoir d’où viennent ces noms et ce qu’ils peuvent symboliser.

Noms de couleurs HTML

la spécification W3C des noms de couleurs distingue les couleurs de base et les couleurs étendues. HTML4 dispose d’une liste de 140 noms de couleurs, dont 16 couleurs de base – aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. En HTML5, vous pouvez utiliser un total de 147 noms de couleurs, dont 17 couleurs de base. Le nom de couleur de base supplémentaire en HTML5 est orange.

La figure illustre 17 couleurs de base avec des codes HEX :

Vous pouvez également définir les couleurs d’un site web à l’aide des codes de couleur HTML – HEX, RGB, RGBA, HSL et HSLA. Pour plus d’informations, veuillez consulter l’article Codes de couleur HTML.

Un peu d’histoire…

D’où viennent les noms de couleurs HTML ? Les couleurs étaient à l’origine un produit du système X Window (X), une interface utilisateur graphique (GUI) publiée par le Massachusetts Institute of Technology. En 1986, la liste des couleurs de l’interface graphique comprenait 69 nuances de base pour la version X10R3. Puis vint la X11R2 en 1988 avec l’ajout de trois couleurs, dont des nuances identiques de gris (gray & grey). On dit que les programmeurs de Hewlett-Packard ne se souvenaient plus de l’orthographe correcte et ont décidé d’utiliser deux orthographes pour éviter les erreurs.

En 1989, une mise à jour importante créée par Paul Raveling (X11R4) est sortie, comprenant une foule de neutres légers tels que “papaya whip” et “lemon chiffon”, ainsi que d’autres teintes bien nommées telles que “whited almond” et “peach puff”. Dans les années 80, les couleurs pouvaient varier considérablement d’un écran à l’autre, selon le fabricant de la machine. N’ayant pas été sanctionné par l’American National Standards Institute (ANSI), qui édicte des normes pour les propriétés des couleurs sur le Web, Raveling a décidé de prendre les choses en main. Il a tiré ces noms de la société de peinture Sinclair Paints, aujourd’hui disparue, et a calibré les couleurs pour son propre moniteur HP.

X11 a ensuite reçu un ensemble de noms de couleurs plus audacieux grâce à un autre programmeur, John C. Thomas. Il a changé le nom des nuances pour éviter toute confusion chez les utilisateurs. Une boîte de 72 crayons de couleur Crayola l’aurait aidé dans cette tâche. C’est ainsi que sont nés “aquamarine”, “orchidée” et “saumon”, pour n’en citer que quelques-uns.

En 2001, le World Wide Web Consortium (W3C) a publié le premier projet de travail du module de couleur CSS 3, qui incluait les couleurs. La base de données des manes de couleurs a fait l’objet de discussions animées et de critiques sévères. Le système de dénomination des couleurs a été critiqué. Par exemple, “dark grey” était plus clair que “grey” ; toutes les couleurs n’avaient pas de version foncée ou claire, la distribution des couleurs était inégale, penchant vers le rouge et le vert et s’éloignant du bleu.

D’autres points de discorde concernaient des questions linguistiques et culturelles. Pour de nombreuses personnes dont l’anglais n’était pas la langue maternelle, certains noms de couleurs semblaient répugnants ; d’autres voyaient dans le “rouge indien” des connotations raciales potentielles et considéraient que de nombreux noms de couleurs avaient une connotation régionale. Il convient de noter que ces problèmes sont toujours d’actualité(5).

La figure suivante montre le modèle de cube RGB avec les couleurs que Paul Raveling et John Thomas ont incluses. Raveling a ajouté un groupe de teintes blanc cassé en utilisant les noms de Sinclair Paints. Thomas a ajouté des teintes franches en reprenant des noms de Crayola :

En 2014, une nouvelle nuance est apparue dans la liste des noms de couleurs HTML. Le “RebeccaPurple” a été introduit en l’honneur de Rebecca Meyer, fille d’Eric Meyer, programmeur respecté et auteur de CSS. La couleur (#663399) était la préférée de la jeune fille. Rebecca est décédée d’un cancer du cerveau à l’âge de six ans.

L’évolution des noms de couleurs

Alors pourquoi avons-nous besoin de noms de couleurs HTML ? Après tout, nous pouvons utiliser des codes de couleur ! La réponse peut être multiple, mais l’essentiel est probablement que les gens ne considèrent pas la couleur comme un ensemble de chiffres et de lettres ; il est plus naturel d’utiliser un nom de couleur pour une personne. L’histoire des noms de couleur est un sujet fascinant qui en dit long sur l’évolution de la langue, de la culture et de la technologie. Des anciens Égyptiens aux concepteurs de sites web modernes, les gens ont utilisé des noms de couleur pour décrire et définir le monde qui les entoure depuis des milliers d’années.

Les noms des couleurs ont évolué au fil du temps, et ce que nous considérons aujourd’hui comme une certaine couleur n’était peut-être pas le cas dans le passé. Par exemple, la couleur que nous appelons aujourd’hui “orange” était appelée “yellow-red” dans l’Antiquité. Quant au violet, il s’agissait autrefois d’une couleur réservée à la royauté, car elle était fabriquée à partir de teintures coûteuses. L’origine des noms de couleurs remonte à l’Antiquité, lorsque les gens nommaient souvent les couleurs d’après des objets de la nature ou des phénomènes culturels. Par exemple, la couleur “red” a été nommée d’après le mot sanskrit “raktam”, qui signifie sang. La couleur “green” vient du mot “grēne” en vieil anglais, qui signifiait à l’origine “jeune” ou “immature”, reflétant la couleur des jeunes plantes et des feuilles.

Certains des noms de couleurs les plus populaires aujourd’hui sont des noms de couleurs HTML, qui sont utilisés pour définir les couleurs dans la conception de sites web. Ces noms incluent des couleurs telles que “cornflowerblue”, “lavender”, “lemonchiffon”, “papayawhip”, “palegoldenrod” et “whitesmoke”. Les concepteurs utilisent les noms de couleurs pour évoquer certaines émotions et ambiances dans leurs œuvres, ce qui peut être un outil puissant pour communiquer leur vision.

Quelques points importants sur les noms de couleurs en HTML

1. Pour utiliser les noms de couleur HTML, vous devez les orthographier correctement ! Les noms de couleur HTML ne sont pas sensibles à la casse, vous pouvez donc utiliser des lettres minuscules et majuscules. Par exemple, “darkred”, “DarkRed” et “DARKRED” sont valables.
2. Les noms de couleurs HTML ont une gamme limitée de couleurs. Ils ne couvrent pas toutes les nuances ou variations possibles. Si vous avez besoin d’une couleur spécifique qui n’est pas représentée par un nom de couleur HTML, vous devrez peut-être utiliser les codes HEX, RGB ou d’autres codes de couleur. Vous pouvez utiliser des convertisseurs de couleurs qui sont des outils en ligne gratuits vous permettant de convertir des couleurs entre différents codes de couleurs tels que les noms de couleurs HTML, RGB, HEX, HSL, HSV, HWB, LAB, CMYK, LCH, XYZ, etc.
3. Les noms de couleurs HTML sont généralement très compatibles avec les navigateurs modernes. Toutefois, certains navigateurs très anciens ou rarement utilisés peuvent ne prendre en charge que certains noms de couleurs HTML ou présenter de légères différences dans la manière dont ils sont interprétés.
4. Il convient de noter qu’il existe des listes étendues de noms de couleurs disponibles dans divers cadres, bibliothèques et ressources de conception CSS, et qu’elles ne font pas partie de la norme HTML elle-même mais sont souvent utilisées. Bien que les noms de couleurs étendus ne soient pas universellement reconnus ou pris en charge par tous les navigateurs et toutes les plateformes, ils peuvent être utilisés dans certains contextes où la compatibilité n’est pas un problème.
5. Pour utiliser les couleurs HTML dans vos pages web, assurez-vous que les noms de couleurs que vous choisissez respectent les directives en matière d’accessibilité. Utilisez des combinaisons de couleurs suffisamment contrastées pour garantir la lisibilité aux utilisateurs malvoyants. Des outils tels que Vérificateur de contraste de couleurs peuvent vous aider à vérifier que les couleurs que vous avez choisies respectent les normes d’accessibilité recommandées.
6. Les noms de couleurs HTML sont subjectifs et peuvent avoir des interprétations ou des associations différentes selon les langues, les cultures ou les contextes. En outre, les couleurs elles-mêmes et les palettes de couleurs sont associées à certaines émotions et humeurs, qui peuvent varier d’une culture à l’autre ! Par exemple, dans la société occidentale, la couleur blanche est associée aux mariages, à la pureté et à la propreté. En revanche, dans de nombreuses cultures asiatiques, cette couleur symbolise la mort, le deuil et l’humilité. Tenez compte de la signification et du contexte lorsque vous choisissez des couleurs pour la localisation de vos sites.
7. Les noms de couleur HTML peuvent être utilisés dans divers attributs HTML qui vous permettent de spécifier une couleur. Nous verrons cela plus en détail dans la section suivante de l’article.

Travailler avec les noms de couleurs HTML

Les noms de couleurs HTML et CSS font partie du quotidien de ceux qui travaillent dans le domaine du développement web. En HTML et XHTML, les couleurs peuvent être utilisées pour le texte, l’arrière-plan, les bordures de cadre, les tableaux et les cellules de tableau individuelles. Vous pouvez définir la couleur de la manière suivante :

• Utilisation de l’attribut style en ligne. Vous pouvez appliquer l’attribut style avec les balises HTML <body>, <p>, <table>, <div>, <h1> ou <h2>, etc. N’oubliez pas que l’utilisation d’un attribut style remplace tout style défini dans la balise HTML <style> ou dans une feuille de style externe.
• Utilisation de CSS internes. L’option de style CSS interne est populaire pour appliquer des propriétés à des pages individuelles en encapsulant tous les styles dans l’élément <style> placé dans le <head> des documents HTML.

Voici un exemple d’utilisation des noms de couleurs HTML pour coloriser le texte, les arrière-plans et les bordures. Nous utilisons différentes manières de spécifier les couleurs :

<html>
	<head>
		<title>HTML color names</title>
		<style>
			h2 {
			color:DarkRed;
			}
			p {
			color:DimGray;
			}
		</style>
	</head>
	<body style="background-color:OldLace;">
		<h2>Color Names List</h2>
		<p>The HTML5 standard set of 147 color names, known as X11 color names, provides a color names list to represent different hues.</p>
		<h2>Basic Color Names</h2>
		<p style="background-color:White; border-style:solid; border-color:DarkRed"> There are 17 basic color names in HTML5. They are widely supported across different browsers and platforms.</p>
	</body>
</html>

Le code HTML rendu se présente comme suit :

Pour plus d’informations sur la manière de modifier la couleur du texte, de l’arrière-plan ou de la bordure, veuillez consulter l’article Travailler avec la couleur HTML et le chapitre Articles pratiques. Les articles de ce chapitre répondent à des questions courantes et contiennent des exemples C# qui fournissent les informations nécessaires à l’utilisation d’Aspose.HTML for .NET pour résoudre des tâches spécifiques.

Limites

• L’une des principales limitations des noms de couleurs HTML est leur ensemble restreint. Cela signifie que certaines nuances ou variations ne sont pas représentées par les noms de couleurs HTML et qu’il faut utiliser d’autres méthodes de représentation des couleurs, telles que les codes HEX ou RGB.
• Une autre limitation est que tous les navigateurs n’affichent pas les noms de couleurs HTML de la même manière. Les couleurs peuvent être interprétées de manière légèrement différente selon les navigateurs et les appareils. Ce manque de précision est particulièrement critique pour les projets de conception qui nécessitent une correspondance précise des couleurs.
• D’autres limitations sont liées au contrôle de la transparence et à la préparation du document pour l’impression. Pour cela, il faut utiliser les codes couleur (RGBA, HSLA, CMYK, etc.), qui sont idéaux pour ces tâches.

Faits amusants

1. Les couleurs Grey et Gray, Cyan et Aqua, Fuchsia et Magenta ont les mêmes valeurs HEX et RGB :

Il semble que les programmeurs de Hewlett-Packard ne se souvenaient pas de l’orthographe correcte du mot “gray” par “a” (Gray), de sorte qu’une option dupliquée (Grey) a été ajoutée pour éviter les erreurs dans le code. Cette duplication a influencé quelques autres noms de couleurs HTML :

• Darkgray & Darkgrey – HEX #A9A9A9, RGB(169, 169, 169)
• Darkslategray & Darkslategrey – HEX #2F4F4F, RGB(47, 79, 79)
• Dimgray & Dimgrey – HEX #696969, RGB(105, 105, 105)
• Lightslategray & Lightslategrey – HEX #778899, RGB(119, 136, 153)
• Lightgray & Lightgrey – HEX #D3D3D3, RGB(211, 211, 211)
• Slategray & Slategrey – HEX #708090, RGB(112, 128, 144)

2. Nous savons tous que le rouge correspond au code couleur #ff0000. Le nom de couleur HTML Bleu correspond à #0000ff. Et nous nous attendons à ce que le Vert corresponde à #00ff00. Mais non ! Le nom de couleur Vert correspond à #008000. Et pour #00ff00, il faut utiliser Lime.

3. Examinons les nuances de gris. On ne s’attend pas à ce que le gris foncé soit plus clair que le gris !

Suggestions pour renommer les couleurs HTML

Des changements sont discutés pour trois couleurs, pour lesquelles il est proposé de remplacer les anciens noms par de nouveaux :

Les programmeurs, les concepteurs et les utilisateurs continuent de discuter des noms de couleurs, et c’est bien ainsi. Nous donnons des exemples de certaines discussions qui n’ont pas encore été prises en compte dans les spécifications officielles. Des changements sont proposés pour trois couleurs, les anciens noms devant être remplacés par de nouveaux :

• De IndianRed à ChestnutRose
• Du mocassin à la pêche
• NavajoWhite à OldPaper

IndianRed tire son nom d’un célèbre pigment rouge de l’Inde et n’a rien à voir avec les Amérindiens. Le nom “IndianRed” vient de la latérite rouge que l’on trouve en Inde et qui est composée d’oxydes de fer naturels. Elle a été identifiée pour la première fois par le scientifique écossais Francis Buchanan-Hamilton. La première utilisation du rouge indien en tant que terme de couleur en anglais remonte à 1672.

Il convient de noter que “IndianRed” – le nom de la couleur des crayons Crayola – a été rebaptisé en “chestnut” (marron) par l’entreprise, probablement en raison des discussions autour de ce nom.

La couleur mocassin est principalement une couleur de la famille des couleurs jaunes. Il s’agit d’un mélange d’orange et de brun. Le mocassin n’a peut-être pas de signification particulière. Il s’agit simplement du nom d’un type de chaussure. Une objection potentielle à ce nom de couleur vient peut-être du fait qu’il s’agit d’un type de chaussure historiquement amérindien.

NavajoWhite est une nuance pastel pâle de jaune-orange souvent utilisée pour les intérieurs dans les peintures de maison. Le nom de la couleur fait référence au fond du drapeau de la nation Navajo. Bien qu’il s’agisse d’une couleur claire, elle n’est pas blanche ou blanc cassé, comme son nom l’indique. Elle est similaire à d’autres couleurs, telles que la pêche, le blé et le mocassin.

Noms de couleurs en ligne

L’application gratuite en ligne Noms de couleurs recherche le nom d’une couleur par sa valeur de code couleur. Vous pouvez saisir les codes de couleur dans n’importe quel format, comme HTML Color Name, RGB, HEX, HSL, HSV, HWB, LAB, LCH, CMYK, XYZ, OKLAB ou OKLCH. Vous obtiendrez alors une liste de noms de couleurs présentant une “similarité” maximale. L’application fonctionne sur les ordinateurs, les tablettes et les appareils mobiles. Elle peut être utile aux artistes et aux concepteurs qui doivent utiliser des couleurs. Identifiez les couleurs avec notre application de noms de couleurs et utilisez-les ou partagez-les ! Sûre, sécurisée et claire.

Note: Dans l’application, sous “similarité”, nous entendons la similarité en cosinus qui est basée sur le cosinus de l’angle entre les deux vecteurs dans un espace colorimétrique multidimensionnel (par exemple, RGB, HSV). La similarité en cosinus est définie comme le produit en points des vecteurs divisé par le produit de leurs longueurs. La valeur 1 indique des couleurs identiques et la valeur 0 indique l’orthogonalité (aucune similarité).

Conclusions

• Les noms de couleur HTML offrent une approche pratique de la spécification des couleurs dans le développement web. L’utilisation de noms de couleurs dans de nombreux domaines prouve que beaucoup de gens n’aiment pas utiliser des codes et des nombres. Les gens ne pensent pas en termes de #FFA500 à propos de certaines nuances mais pensent en termes d’analogies – une orange ! L’utilisation de noms pour définir les couleurs est plus naturelle pour les gens.
• HTML et CSS proposent 147 couleurs nommées dont les noms sont inspirés par la nature, l’émotion ou l’origine historique, et le système RGB prend en charge 16 777 216 couleurs.
• Les noms de couleurs HTML présentent plusieurs limites, notamment un ensemble restreint qui peut ne pas couvrir toutes les nuances ou variations, ce qui conduit les concepteurs à utiliser les codes HEX ou RGB pour une représentation plus précise des couleurs.
• Une syntaxe correcte, le respect des lignes directrices en matière d’accessibilité et le contexte culturel sont essentiels lors de l’utilisation des noms de couleurs HTML, qui peuvent être appliqués au texte, aux arrière-plans et aux bordures dans la conception de sites web.

Voir aussi

• Module de couleur CSS niveau 4
• L’évolution des noms de couleurs : de l’Antiquité au marketing moderne
• “Tomate” contre “#FF6347”- l’histoire tragicomique des noms de couleurs CSS
• Modifier trois noms de couleur