Recherche de nom de couleur CSS, gratuit

Comment utiliser

1. Saisissez une valeur de couleur : tapez ou collez un code hex (#3b82f6), une valeur RGB ou HSL, ou cliquez sur le sélecteur pour choisir une couleur visuellement.
2. Obtenez le nom de la couleur : le nom CSS nommé le plus proche, une référence Pantone et un nom lisible s'affichent instantanément.
3. Explorez les couleurs voisines : voyez une palette de couleurs nommées similaires pour trouver la meilleure correspondance ou une alternative pour votre design.

Pourquoi utiliser la recherche de nom de couleur ?

Quand vous travaillez avec un design system, une documentation d'accessibilité ou une communication client, disposer d'un nom lisible pour une couleur est bien plus utile qu'un code hex. « Cornflower Blue » communique clairement ; « #6495ed » pas. Cet outil fait le pont entre les valeurs machine et les noms humains, aidant les designers à documenter les palettes, expliquer les choix de couleurs et retrouver les noms CSS standards pour leurs valeurs hex.

Fonctionnalités

• Nom CSS le plus proche : trouve la couleur CSS nommée la plus proche (parmi la liste complète de 148 couleurs CSS) pour tout code hex ou RGB.
• Formats d'entrée multiples : accepte hex (#rrggbb), RGB, HSL et HSV.
• Sélecteur de couleur : utilisez le sélecteur natif pour une sélection visuelle.
• Couleurs voisines : affiche des couleurs nommées similaires pour trouver des alternatives.
• Métadonnées de couleur : affiche teinte, saturation, luminosité et luminosité perçue.

Questions fréquentes

Comment l'outil trouve-t-il le nom le plus proche ?

L'outil calcule la distance perceptuelle entre votre couleur et toutes les couleurs CSS nommées à l'aide de la formule de différence CIEDE2000, qui correspond bien à la perception humaine des différences de couleur. La correspondance la plus proche est renvoyée comme nom.

Ces couleurs sont-elles identiques aux mots-clés CSS ?

Oui. L'outil inclut toutes les 148 couleurs nommées CSS standard (de la spécification CSS Color Module Level 4) comme « rebeccapurple », « dodgerblue » et « tomato ». Vous pouvez les utiliser directement en CSS à la place des valeurs hex.

Et si ma couleur n'a pas de nom exact ?

La plupart des couleurs n'ont pas de nom CSS exact. L'outil renvoie la couleur nommée perceptuellement la plus proche et affiche la différence (delta E) pour vous indiquer à quel point la correspondance est proche.

De X11 à CSS Color Module Level 4 : la longue route vers «rebeccapurple»

Les couleurs nommées CSS que la plupart des gens utilisent aujourd'hui sont héritées de la liste de couleurs du système X Window (rgb.txt), qui a été assemblée au MIT pour l'environnement graphique X11 en 1986. La liste a grandi organiquement au cours de la décennie suivante, remplie de noms fantaisistes et obscurs comme «papayawhip», «peachpuff» et «papayawhip». Quand Mosaic (1993) puis Netscape Navigator (1994) ont standardisé la couleur en HTML, ils ont gardé un sous-ensemble des noms X11. CSS1 (décembre 1996) a formalisé seulement 16 couleurs nommées correspondant à la palette VGA originale: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) a ajouté «orange» comme 17e. CSS2.1 (juin 2011) a gardé les 17. CSS3 Color Module (juin 2014, finalisé 2018) a ajouté le reste des noms X11, portant le total à 147. En juin 2014, la couleur «rebeccapurple» (#663399) a été ajoutée en l'honneur de Rebecca, la fille d'Eric Meyer décédée d'un cancer du cerveau; elle avait dit que le violet était sa couleur préférée. Elle a été ajoutée à CSS Color Module Level 4, portant le total à 148. La valeur hex #663399 est la seule couleur nommée CSS ajoutée en mémoire d'une personne spécifique.

La couleur CSS au-delà des couleurs nommées: oklch, lab, color()

Les couleurs nommées ne couvrent qu'un coin de ce que les écrans modernes peuvent montrer. CSS Color Module Level 4 (Candidate Recommendation, brouillon actuel) introduit un ensemble beaucoup plus large de syntaxes de couleur. lab() et lch() vous permettent de spécifier des couleurs dans CIE Lab et LCh, qui sont des espaces de couleur perceptuellement uniformes. oklab() et oklch() (Björn Ottosson, 2020) sont des versions améliorées qui gèrent mieux les couleurs saturées vives; oklch(70% 0.15 240) est un bleu ciel vif. color(display-p3 1 0.5 0) donne accès au gamut de couleur P3 plus large que les iPhones, iPads et Macs modernes peuvent afficher, environ 25% plus saturé que le sRGB auquel les couleurs nommées sont limitées. La syntaxe de couleur relative (oklch(from blue calc(l - 10%) c h)) vous permet de dériver une couleur d'une autre. La prise en charge du navigateur pour les quatre fonctions de couleur a atteint >90% en 2024. Pour les designs de l'ère 2025, utilisez les couleurs nommées pour le prototypage, puis portez à oklch() pour les palettes de production qui fonctionnent à travers le spectre de gamut de couleur.

Comment la «couleur la plus proche» est réellement calculée

La «distance» entre deux couleurs n'est pas un concept unique. Différentes formules donnent des réponses différentes et chacune correspond à différents cas d'utilisation.

• Distance euclidienne en sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Rapide, mais ne correspond pas à la perception humaine, deux couleurs qui semblent identiques peuvent être éloignées en RGB et deux couleurs très différentes peuvent être proches. Évitez pour les requêtes de «nom le plus proche».
• Delta E CIE76. Même formule euclidienne mais dans l'espace CIE Lab, qui est à peu près perceptuellement uniforme. À peu près, pas exactement. Bonne première approximation; ΔE ≤ 2,3 est considéré comme «à peine perceptible» dans des conditions contrôlées.
• Delta E CIEDE2000. Le standard industriel actuel, publié par la CIE en 2001. Ajoute des corrections pour la luminosité, la chromaticité et la rotation de teinte qui correspondent mieux à comment les humains perçoivent réellement les différences de couleur. ΔE2000 ≤ 1 est imperceptible pour la plupart des observateurs; ≤ 5 ressemble à une couleur similaire. Cet outil utilise CIEDE2000 pour la «correspondance la plus proche».
• Distance euclidienne en OKLab. L'espace de couleur 2020 de Björn Ottosson est conçu pour que la distance euclidienne simple approxime ΔE2000 de près. Plus rapide que ΔE2000 et la qualité perceptuelle est similaire. De plus en plus le standard dans les outils de design.

Où nommer les couleurs aide vraiment

• Documentation de système de design. «Action primaire: Royal Blue (#4169e1)» se lit mieux qu'une simple valeur hex dans les spécifications de design et les directives de marque.
• Communication client. «Utilisons coral et steel blue» fonctionne en réunion; «#ff7f50 et #4682b4» non. Les noms ancrent la conversation avant que vous ne vous engagiez à des valeurs exactes.
• Audits d'accessibilité. En documentant quelles couleurs échouent au contraste WCAG par rapport à un fond, avoir des noms humains rend les rapports d'audit utilisables par les non-développeurs.
• Traduction de code hérité. Les anciens fichiers CSS utilisent souvent des couleurs nommées. Lors de la migration vers des design tokens ou une palette personnalisée, vous devez savoir à quelles couleurs exactes «lightseagreen» et «mediumaquamarine» correspondent.
• Prototypes rapides. Taper background: tomato est plus rapide que choisir un hex dans une roue chromatique. Les couleurs nommées sont des valeurs par défaut étonnamment bonnes pour esquisser des mises en page avant que les couleurs finales ne soient choisies.
• Nommer les couleurs de marque. Si votre rouge de marque est proche de crimson (#dc143c), l'appeler «Brand Crimson» en interne est plus mémorable que «Red 8».
• Correspondance d'échantillons. Les designers collent une couleur échantillonnée à partir d'une photographie ou capture d'écran et demandent «de quelle couleur est ceci proche?» pour démarrer une palette à partir d'une référence du monde réel.

Erreurs et surprises avec les couleurs nommées CSS

• gray vs grey. CSS accepte les deux orthographes, mais la liste X11 n'avait à l'origine que «gray». «grey» a été ajouté plus tard. lightgray et lightgrey sont des alias, même couleur. Tenez-vous à une orthographe dans une base de code.
• Les variantes «dark» ne sont pas toujours plus foncées que la base. darkgray (#a9a9a9) est en fait plus clair que gray (#808080), une particularité historique célèbre de la liste X11 que CSS a héritée. Même piège avec darkgrey.
• aqua et cyan sont la même couleur. Les deux sont #00ffff. CSS inclut les deux comme alias hérités. fuchsia et magenta sont aussi identiques (#ff00ff).
• «orange» est une couleur nommée CSS mais les variantes «pink» sont différentes. orange = #ffa500. Mais il n'y a pas un seul «pink», CSS a pink, lightpink, hotpink, deeppink, palevioletred, tous notablement différents.
• La «couleur la plus proche» dépend de ce que votre cerveau pense être la couleur. Deux personnes échantillonnant la même puce de peinture peuvent choisir des noms différents. CIEDE2000 capture la perception moyenne, pas la vôtre. Vérifiez toujours les échantillons visuellement plutôt que de faire confiance uniquement au nombre de distance.
• Les couleurs nommées sont toutes sRGB. Les couleurs nommées CSS sont définies comme des triplets sRGB 8 bits. Sur un écran P3 ou BT.2020, les couleurs vives comme tomato et fuchsia peuvent sembler plus ternes que la même teinte spécifiée dans color(display-p3 ...). Pour les prototypes, bien; pour la production sur du matériel moderne, portez à la syntaxe wide-gamut.
• Les couleurs nommées seules ne passent pas les vérifications d'accessibilité. yellow sur white est illisible; red sur black est limite. Le statut nommé d'une couleur ne dit rien sur le contraste. Associez toujours un choix de couleur à une vérification de contraste WCAG.

Plus de questions fréquentes

Qui a réellement choisi les noms comme «papayawhip» et «peachpuff»?

Aucune personne unique; le fichier rgb.txt de X11 a grandi à travers plusieurs contributeurs au MIT et chez d'autres fournisseurs Unix à la fin des années 1980. Beaucoup de noms venaient des catalogues de peinture Sinclair Paints et d'autres de l'époque. Le nommage est informel et incohérent à dessein, les contributeurs nommaient les couleurs d'après des objets qu'ils avaient sur leur bureau ou par leur fenêtre. Il n'y avait pas de comité central. Quand CSS3 a adopté la liste X11 en gros en 2014, toutes les particularités sont venues avec.

Dois-je utiliser rebeccapurple en production?

La prise en charge du navigateur est universelle depuis 2014, donc cela fonctionne partout. C'est exactement équivalent à #663399. Utilisez le nom qui se lit le mieux dans votre code; «rebeccapurple» est un petit mais visible hommage sur chaque page qui l'utilise.

Quelle est la différence entre CIEDE2000 et les formules ΔE plus simples?

ΔE76 (distance euclidienne en CIE Lab) est rapide et donne des réponses raisonnables mais sous-estime les différences dans les couleurs saturées et surestime dans les couleurs sombres. CIEDE2000 ajoute cinq termes de correction (pour la luminosité, la chromaticité, la rotation de teinte et deux termes croisés) qui correspondent aux données empiriques sur comment les gens perçoivent réellement les différences de couleur. La correction est significative; la même paire de couleurs peut donner ΔE76 = 4 et ΔE2000 = 2 (verdict perceptuel très différent). Pour «cette couleur est-elle assez proche de cette autre», utilisez ΔE2000. Pour le traitement par lots où la vitesse compte, la distance euclidienne OKLab est une approximation rapide.

Puis-je ajouter mes propres noms de couleurs personnalisés?

Pas comme mots-clés CSS, la liste de couleurs nommées est fixée par la spec. Mais les Custom Properties CSS (variables) vous donnent la même ergonomie: :root { --brand-coral: #ff7f50; } puis color: var(--brand-coral). Les design tokens sont essentiellement cette idée formalisée, et les systèmes de design modernes les utilisent universellement.

Mes données de couleur sont-elles envoyées quelque part?

Non. Toute conversion de couleur et calcul de distance s'exécute dans votre navigateur. Ouvrez l'onglet Réseau dans DevTools et choisissez une couleur, vous verrez zéro requête sortante. Sûr pour les couleurs de marque non publiées ou tout travail de palette interne.