Comment utiliser : Trouveur de nom de couleur
- Saisissez un code HEX (ex.
#55AAEE) ou une couleur CSS quelconque, ou utilisez le sélecteur. - Lisez le nom le plus proche et le degré de correspondance (ΔE : plus il est bas, plus c'est proche).
- Copiez un nom de variable prêt à l'emploi pour CSS, SCSS, JavaScript ou Tailwind.
- Pour nommer une palette complète, collez plusieurs couleurs dans la zone en masse et copiez le bloc
:rootgénéré.
Pourquoi nommer les couleurs ?
Un code HEX comme #55AAEE ne dit rien lors d'une revue de code, alors que --cerulean parle immédiatement. Des noms de couleur descriptifs rendent les design tokens lisibles, aident designers et développeurs à parler de la même couleur et évitent que des variables comme --blue-2-new-final s'infiltrent dans une base de code.
Fonctionnement de la correspondance
L'outil compare votre couleur à environ 5 000 noms sélectionnés à la main, issus du projet open source color-names (licence MIT). Les distances sont mesurées dans l'espace colorimétrique perceptuellement uniforme OKLab : le nom « le plus proche » est donc celui qui ressemble réellement le plus à la couleur, et non simplement celui dont les valeurs numériques sont les plus voisines. La valeur ΔEOK indique à quel point la correspondance est proche : en dessous d'environ 2, la différence est pratiquement imperceptible ; entre 2 et 5, la couleur est proche ; au-delà de 5, le nom n'est qu'une description approximative.
Vous voyez également le mot-clé CSS officiel le plus proche parmi les 148 existants (comme royalblue ou tomato), que vous pouvez utiliser directement en CSS.
Conventions de nommage des tokens
| Contexte | Convention | Exemple |
|---|---|---|
| Propriété personnalisée CSS | kebab-case | --ocean-blue |
| Variable SCSS | kebab-case avec préfixe | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Clé de thème Tailwind | kebab-case | bg-ocean-blue |
Noms descriptifs ou sémantiques
Les noms descriptifs (bleu océan) conviennent parfaitement à une palette brute. Les composants doivent en général référencer des tokens sémantiques (--color-primary, --color-danger) qui pointent vers les noms descriptifs : vous pouvez ainsi changer d'identité visuelle sans tout renommer. Générez une échelle complète de nuances pour chaque couleur de base avec le Générateur de couleurs Tailwind.
Aussi recherché comme : nom de couleur, trouver le nom d'une couleur, nom couleur hex, quelle couleur est-ce, noms de variables css, design tokens.
Outils complémentaires : Trouveur de nom de couleur
- Extracteur de palette d'image — Trouvez la palette de couleurs de n'importe quelle image : photo, logo, capture d'écran ou maquette.
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
- Variables CSS vers Tailwind — Transformez vos variables de couleur :root en thème Tailwind en un seul collage : configuration Tailwind v3 tailwind.config.js ou @theme de la v4, avec des valeurs littérales ou des références var().
- Mélangeur de couleurs — Choisissez deux couleurs et un nombre d’étapes pour obtenir des couleurs de transition régulièrement réparties, idéales pour les dégradés, les bordures, les graphiques et les états de survol.
Questions fréquentes
Quelle est la couleur #008080 ?
#008080 est le Sarcelle (teal en anglais), qui fait aussi partie des mots-clés de couleur CSS officiels. Collez n'importe quel code ci-dessus pour l'identifier.Ces noms de couleur sont-ils officiels ?
tomato) sont officiels en CSS. Les autres noms proviennent d'une liste communautaire sélectionnée et constituent des libellés descriptifs, et non des standards.Quelle est la précision de la correspondance ?
Puis-je nommer plusieurs couleurs à la fois ?
:root obtenu. Les noms en double reçoivent un suffixe numérique.