Noms de Couleurs HTML

Noms de Couleurs HTML — Les 148 Couleurs Nommées CSS avec Recherche et Filtre

Tous les noms de couleurs HTML dans une référence interrogeable : la liste complète des couleurs nommées CSS avec leurs valeurs HEX, RGB et HSL, des échantillons en direct et la copie en un clic. Contrairement aux tableaux statiques, vous pouvez filtrer par famille de couleur — tous les bleus, tous les verts — et trier par teinte, luminosité ou saturation, exactement comme un designer choisit une couleur en pratique.

La spécification CSS Color Level 4 définit exactement 148 mots-clés de couleur : 141 noms uniques plus 7 graphies britanniques « grey ». Beaucoup de références citent encore 140 — la spécification dit autre chose. La page inclut aussi un outil de recherche de la couleur nommée la plus proche : collez n'importe quel code hex et obtenez le mot-clé CSS officiel le plus proche, classé par distance perceptuelle ΔE (CIELAB).

Comment Utiliser la Référence des Couleurs HTML

Trouver et copier une couleur prend quelques secondes :

1. Saisissez un nom ou un code hex dans la recherche — la grille se filtre en temps réel pendant la frappe, en acceptant des noms comme tomato et des fragments de hex comme ff63.
2. Filtrez par famille ou changez le tri — choisissez « Bleus » et triez par luminosité pour voir tous les bleus CSS, du plus clair au plus foncé.
3. Cliquez sur un échantillon pour copier son HEX instantanément — ou cliquez sur le nom pour ouvrir les détails avec RGB, HSL, des snippets CSS prêts à coller et des bannières à partager sur Instagram, WhatsApp et X.
4. Trouvez la couleur nommée la plus proche de n'importe quel hex — collez un code comme #517CBD dans l'outil et obtenez le mot-clé officiel le plus proche avec sa distance exacte.

Exemples de Noms de Couleurs HTML

Quelques requêtes réelles pour montrer ce que renvoie la référence :

L'outil accepte aussi le format court à 3 chiffres : #fa0 est étendu en #FFAA00 avant la comparaison.

Ce Que Sont les Couleurs Nommées CSS

Les couleurs nommées sont des mots-clés texte qui fonctionnent comme valeur dans toute propriété de couleur CSS : color: rebeccapurple s'affiche à l'identique de color: #663399. Le navigateur résout le nom en RGB au moment du parsing — il n'y a aucune différence de performance entre un mot-clé et un code hex.

Les 16 noms de base (black, white, red, lime, navy, teal…) datent de HTML 4.01 (1997). Les autres viennent du système de couleurs X11, utilisé dans les interfaces Unix depuis les années 1980, adopté par SVG puis intégré officiellement à CSS3 — d'où des curiosités comme PapayaWhip, Bisque et NavajoWhite. CSS Color Level 4 a ajouté la dernière entrée en 2014 : rebeccapurple.

L'Histoire de RebeccaPurple

rebeccapurple (#663399) est la seule couleur CSS nommée d'après une personne. Rebecca Meyer, fille du pionnier du CSS Eric Meyer, est décédée d'un cancer du cerveau le 7 juin 2014 — le jour de son sixième anniversaire. Le jour même, la communauté du web a proposé d'ajouter à la spécification la nuance de violet qu'elle aimait, et le CSS Working Group l'a approuvée en quelques heures. Le prénom complet « Rebecca » a été retenu à la demande de son père : elle venait de délaisser le surnom « Becca ». Aujourd'hui encore, les développeurs utilisent ce mot-clé en hommage.

Cas d'Usage Courants

• Prototypes et démos : background: cornflowerblue s'écrit plus vite et se lit mieux dans un exemple de code qu'un hex — c'est pourquoi les couleurs nommées dominent les tutoriels.
• Trouver un nom sémantique pour une couleur de marque : collez votre hex dans l'outil et découvrez si un mot-clé officiel est assez proche pour des maquettes rapides.
• Choisir une nuance dans une famille : filtrez « Verts » et triez par luminosité pour parcourir les 23 verts CSS dans l'ordre, au lieu de chercher dans un tableau alphabétique.
• Enseignement et documentation : des noms comme tomato et papayawhip se retiennent facilement — parfaits pour expliquer le CSS aux débutants.
• Email et Markdown : les couleurs nommées survivent au copier-coller dans les environnements sans sélecteur de couleur.

Erreurs Courantes avec les Couleurs CSS

• Utiliser green en voulant le vert pur : green vaut #008000, une nuance à demi-luminosité. Le vert pur (rgb(0, 255, 0)) s'appelle lime — un héritage de HTML 4.01 qui surprend encore.
• Écrire grey comme mot-clé isolé : seul gray est valide dans la forme simple. La graphie britannique ne fonctionne que dans les noms composés — darkgrey, slategrey et cinq autres sont des alias valides.
• Supposer que les couleurs nommées correspondent aux classes Tailwind : text-purple-700 et rebeccapurple viennent de palettes totalement distinctes. Pour une correspondance exacte, comparez les hex — ils coïncident très rarement.
• Compter sur 140 couleurs : la spécification définit 148 mots-clés. Une validation basée sur d'anciennes listes à 140 entrées rejettera des mots-clés valides.

Questions Fréquentes

Combien de noms de couleurs HTML existe-t-il ?

La spécification CSS Color Level 4 définit exactement 148 mots-clés de couleur, plus les valeurs spéciales transparent et currentColor. Cela représente 141 noms uniques et 7 alias en graphie britannique « grey ». Les 16 noms de base viennent de HTML 4.01 ; le reste dérive du jeu X11/SVG, et rebeccapurple a été ajouté en 2014.

Pourquoi existe-t-il une couleur CSS appelée rebeccapurple ?

Elle a été ajoutée en 2014 à la mémoire de Rebecca Meyer, la fille de six ans du pionnier du CSS Eric Meyer, décédée d'un cancer du cerveau le jour de son anniversaire. La communauté du web a proposé la couleur le jour même et le CSS Working Group l'a approuvée en quelques heures. C'est la seule couleur CSS nommée d'après une personne réelle.

Quelle est la différence entre lime et green en CSS ?

lime est le vert pur à luminosité maximale : #00FF00. green est la nuance plus foncée #008000, à demi-luminosité. Cette nomenclature vient du jeu original de 16 couleurs de HTML 4.01, où green désignait le ton moyen. Pour le vert le plus vif possible, utilisez lime.

Grey est-il un nom de couleur CSS valide ?

Pas comme mot-clé isolé — seul gray (#808080) est valide dans la forme simple. Les deux graphies fonctionnent toutefois dans les noms composés : darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey et les variantes slate sont toutes légales — c'est précisément pour cela que le total atteint 148 mots-clés et non 141.

Peut-on trouver le nom CSS le plus proche d'un code hex ?

Oui — collez le hex dans l'outil de recherche de couleur nommée de cette page. Il convertit votre couleur et les 148 mots-clés dans l'espace CIELAB et classe les résultats par distance ΔE, qui modélise la perception humaine bien mieux que la distance RGB brute. Vous obtenez la meilleure correspondance plus les alternatives les plus proches.

Ressources

• MDN — <named-color> — La liste canonique des couleurs nommées dans la documentation des navigateurs, avec échantillons rendus.
• W3C — CSS Color Module Level 4 — Le tableau officiel de la spécification définissant les 148 mots-clés et leurs valeurs RGB exactes.
• Eric Meyer — In Memoriam, 2 — Le billet à l'origine de l'histoire de rebeccapurple, écrit par le père de Rebecca.