Trouveur de nom de couleur CSS

Trouver le mot-clé CSS le plus proche

Le CSS propose une longue liste de mots-clés de couleurs nommées, des choix familiers comme black, white et red à des noms plus précis tels que cornflowerblue, papayawhip et mediumseagreen. Ce trouveur de nom de couleur relie n'importe quelle valeur HEX au nom CSS disponible le plus proche. Saisissez une couleur : le navigateur la compare à la table de mots-clés intégrée grâce à la distance RGB. Le nom le plus proche, sa valeur HEX et plusieurs alternatives voisines s'affichent immédiatement.

Les couleurs nommées sont utiles pour des démos rapides, l'enseignement, la documentation et des exemples lisibles. Elles peuvent aussi aider à décrire une couleur à quelqu'un quand des tokens exacts ne sont pas nécessaires. Cependant, la liste des couleurs nommées est limitée et inégalement répartie : il y a beaucoup de roses et de bleus pâles, mais moins de teintes de marque modernes et précises. Le mot-clé le plus proche doit donc être considéré comme une approximation et non comme un remplacement parfait de votre code HEX d'origine.

Comment fonctionne la recherche de la couleur la plus proche

Chaque mot-clé CSS possède une valeur fixe de rouge, de vert et de bleu. Le script convertit votre HEX en RGB, puis mesure la distance au carré avec chaque couleur nommée en comparant les trois canaux. Le nom à la plus petite distance est affiché comme correspondance la plus proche. Cette méthode est rapide et prévisible, idéale pour un outil côté client. Ce n'est pas une formule complète de différence de couleur perceptuelle : deux couleurs à distance RGB similaire ne paraissent donc pas toujours aussi proches à l'œil humain.

Quand utiliser des noms plutôt que du HEX

Pour les design systems en production, HEX, RGB, HSL ou les propriétés personnalisées sont généralement préférables aux noms, car ils préservent l'intention exacte. Les noms brillent dans les exemples, prototypes rapides, articles de blog et conversations où la lisibilité compte plus que la précision. Si vous utilisez une couleur nommée dans du CSS livré, testez-la dans l'interface complète comme n'importe quel autre token. Le mot-clé le plus proche peut encore nécessiter un contrôle du contraste avant de servir d'arrière-plan, de couleur de texte ou d'indicateur d'état.