Liste des Noms de Couleurs CSS avec leurs Codes Hex

Que sont les noms de couleurs ?

Un nom de couleur est un mot qui tient lieu de code hexadécimal ou de valeur rgb() : crimson au lieu de #DC143C, ou navy au lieu de rgb(0, 0, 128). Certains de ces noms sont des couleurs CSS officielles, reconnues telles quelles par tous les navigateurs ; d’autres sont des noms d’usage qui circulent dans le design sans appartenir à aucune norme. Cette page réunit 220 noms de couleurs, classés en 12 familles — rouge, orange, jaune, vert, cyan, bleu, violet, rose, marron, gris, noir et blanc — avec, pour chacun, l’échantillon, le nom, le code hex et la valeur rgb() correspondante.

Un nom ne remplace jamais complètement un code : il n’y a que 220 noms retenus ici contre 16,7 millions de valeurs hex possibles. Mais pour décrire une couleur à voix haute, l’écrire sur une maquette ou se rappeler ce que produit background-color: tomato dans une feuille de style, le nom se lit et se retient plus vite qu’une suite de six caractères hexadécimaux.

Comment l’utiliser

1. Cherchez un nom ou un code. Tapez dans le champ de recherche : « crimson » et « dc143c » filtrent tous les deux vers la même couleur, et le compteur au-dessus de la liste indique en direct combien de couleurs correspondent.
2. Filtrez sur les couleurs CSS officielles si besoin. Cochez « Couleurs officielles CSS uniquement » pour ne garder que les 121 noms utilisables tels quels dans une feuille de style. Les résultats restent regroupés sous un titre par famille, chaque titre renvoyant vers la page de nuances de cette famille.
3. Copiez ce qu’il vous faut. Cliquez sur un nom pour le copier, ou sur le code hex ou la valeur rgb() pour copier celui-ci ; une coche confirme la copie pendant deux secondes, et une étiquette CSS signale les noms officiels.

Quand utiliser un nom plutôt qu’un code hex

Un nom de couleur gagne partout où quelqu’un doit lire la feuille de style. background-color: tomato se comprend d’un coup d’œil, alors que background-color: #FF6347 demande de connaître la couleur par cœur ou d’ouvrir un outil pour la vérifier. C’est pourquoi les noms restent utiles en prototypage rapide, dans les exemples de documentation et les feuilles de style de démonstration, là où la lisibilité du code compte plus que la précision exacte de la teinte.

Les palettes de production, elles, restent presque toujours en hex. Une palette de marque a besoin de valeurs exactes et reproductibles, d’un fichier Figma à une variable CSS, et seuls 121 des 220 noms de cette page correspondent à une couleur CSS reconnue : les 99 autres n’ont pas de définition officielle, et un autre nuancier peut placer « Sauge » ou « Bordeaux » un peu plus clair ou plus foncé. Le hex ne varie jamais, c’est pour cela qu’il reste la valeur qu’on fige dans le code — le nom sert surtout à la retrouver ou à la communiquer.

Limites à connaître

CSS définit environ 148 noms de couleur, en comptant séparément les variantes gray/grey — gray et grey, darkgray et darkgrey, slategray et slategrey fonctionnent toutes de façon identique, et cette liste n’en affiche qu’une orthographe par couleur. Sur ces 148, 121 entrent dans les douze familles présentées ici. S’y ajoutent 99 noms d’usage, comme Bordeaux, Sauge ou Espresso, qui n’appartiennent à aucune norme. Les noms sont aussi insensibles à la casse : crimson, Crimson et CRIMSON désignent toujours la même couleur.

Les noms officiels viennent de l’ancienne palette X11 et en gardent les bizarreries — la plus nette : DarkGray (#A9A9A9) est en réalité plus clair que Gray (#808080), sans aucune logique de progression derrière cette nomenclature. Enfin, toutes les valeurs affichées sont en sRVB : ce que vous voyez dépend du gamut et du calibrage de votre écran, et l’impression en CMJN ne reproduit pas toutes les teintes listées ici.

Pourquoi est-ce gratuit ?

FreeToGenerate.com garde tous ses outils vraiment gratuits. Cette liste tourne entièrement dans votre navigateur : rien à installer, aucun compte à créer, aucun filigrane et aucune version payante qui débloquerait le reste des 220 couleurs. Cherchez et copiez autant de codes que nécessaire, aussi souvent que vous voulez.