Noms de Couleurs HTML
Les 148 couleurs nommées HTML/CSS avec codes HEX, RGB et HSL. Cherchez, filtrez par famille, triez par teinte et trouvez la couleur la plus proche d'un hex.
Mis à jour juin 2026
Vérifié par Rafael Duarte
Lime vs Green
Valeur pureEn CSS, lime est le vert pur #00FF00 — green est en réalité la nuance 50 % plus foncée #008000.
Aqua vs Cyan
IdentiquesAqua et cyan correspondent exactement à #00FFFF. Ce sont des synonymes dans tous les navigateurs.
Gray vs Grey
SynonymesCSS accepte les deux orthographes : 7 paires gray/grey contribuent au total de 148 mots-clés.
141 couleurs trouvées
Recherche de la Couleur Nommée la Plus Proche
Collez n'importe quel code hex et trouvez la couleur nommée CSS la plus proche, classée par distance de couleur ΔE (CIELAB).
L'histoire de RebeccaPurple #663399
En 2014, la communauté du web s'est unie pour honorer 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. Sur proposition de la communauté, la nuance de violet qu'elle aimait a été ajoutée pour toujours à la spécification CSS sous le nom rebeccapurple — la seule couleur CSS nommée d'après une personne.
Comment utiliser les noms de couleurs HTML/CSS
Cherchez, filtrez et trouvez la couleur la plus proche
1. Saisissez un nom ou un hex
La grille filtre en temps réel — accepte des noms comme `tomato` ou des fragments de hex comme `ff63`.
2. Filtrez par famille ou triez
Choisissez "Bleus" et triez par luminosité pour voir tous les bleus du plus clair au plus foncé.
3. Copiez ou trouvez la plus proche
Cliquez pour copier le HEX, ou collez un code dans le localisateur pour trouver le mot-clé CSS le plus ressemblant.
Ce que fait cet outil
Les 148 mots-clés, réellement cherchables
Localisateur de couleur la plus proche
Collez n'importe quel hex et recevez le mot-clé CSS officiel le plus ressemblant par distance ΔE (CIELAB).
Filtre par famille de couleur
Tous les bleus, tous les verts — comme un designer choisit vraiment une couleur.
Tri par teinte, luminosité ou saturation
Pas seulement l'ordre alphabétique — parcourez toute une famille en progression visuelle.
Extraits CSS prêts à l'emploi
Les détails de chaque couleur incluent HEX, RGB, HSL et du code prêt à coller.
Bannières partageables pour les réseaux sociaux
Chaque couleur génère une carte PNG prête pour Instagram (carré) ou X/WhatsApp (large), déjà formatée avec nom, HEX, RGB et HSL.
Cartes de distinction rapide
Compare côte à côte les paires qui prêtent le plus à confusion — lime vs green, aqua vs cyan, gray vs grey — avec échantillon visuel et explication.
Exemples
Quand vous allez utiliser ça
Les scénarios les plus courants chez celles et ceux qui utilisent l'outil
Prototypes et démos
background: cornflowerblue est plus rapide à écrire et plus lisible qu'un hex.
Trouver un nom sémantique pour une couleur de marque
Collez votre hex dans le localisateur et voyez s'il existe un mot-clé assez proche pour des maquettes rapides.
Choisir une teinte dans une famille
Filtrez "Verts" et triez par luminosité au lieu de chercher dans un tableau alphabétique.
Enseignement et documentation
Des noms comme tomato et papayawhip sont mémorables pour expliquer le CSS aux débutants.
E-mail et Markdown
Les couleurs nommées survivent au copier-coller dans les clients e-mail et les éditeurs Markdown qui n'ont pas de sélecteur de couleur.
Erreurs courantes avec les couleurs CSS
Utiliser `green` en voulant du vert pur
green est #008000, soit la moitié de la luminosité. Le vert pur est lime.
Écrire `grey` seul
Seul gray est valide comme mot-clé isolé — grey ne fonctionne que dans des noms composés comme darkgrey.
Compter sur 140 couleurs
Le spec définit 148 mots-clés — les validations basées sur d'anciennes listes rejettent des noms valides.
Croire que ça correspond aux couleurs de Tailwind
text-purple-700 de Tailwind et rebeccapurple du CSS viennent de palettes totalement différentes. Pour une correspondance exacte, comparez toujours les valeurs hex.
Compter `transparent` et `currentColor` comme couleurs nommées
Ces deux mots-clés sont des valeurs spéciales du spec, pas des couleurs parmi les 148 — le localisateur n'accepte pas ce type d'entrée.
Pourquoi utiliser cet outil
Contrairement aux tableaux statiques, vous filtrez par famille de couleur et triez par teinte, luminosité ou saturation — comme un designer choisit vraiment une couleur, pas par ordre alphabétique.
Le localisateur de couleur la plus proche utilise la distance perceptuelle ΔE (CIELAB), qui modélise la perception humaine bien mieux qu'une distance RGB brute.
La plupart de ces 148 mots-clés viennent du système X11, utilisé dans les interfaces Unix depuis les années 1980 puis adopté par le SVG et le CSS — d'où des noms curieux comme PapayaWhip et NavajoWhite dans la liste.
lime vs. green
La confusion la plus fréquente avec les couleurs CSS
Questions fréquentes
Exactement 148 mots-clés — 141 noms uniques plus 7 alias avec l'orthographe britannique "grey". Les 16 couleurs de base viennent du HTML 4.01 ; le reste du X11/SVG, et rebeccapurple a été ajoutée en 2014.
Références
Outils connexes
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind Design Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
