Nouveautés du convertisseur de couleur : nom CSS auto et aperçu bouton/carte en direct

Deux ajouts récents sont passés inaperçus si vous n'avez pas rouvert l'outil depuis un moment. Ni l'un ni l'autre ne change la façon dont vous convertissez un HEX en RGB — ils s'attaquent à une question différente : « est-ce que je reconnais cette couleur, et est-ce qu'elle tient vraiment dans une interface ? » Voici ce qui a changé, avec des exemples concrets.

Nouveauté n°1 : le nom de couleur CSS/X11 le plus proche, sous le HEX

Réponse rapide : dès qu'une couleur est choisie, une ligne apparaît juste sous le grand code HEX affiché en haut de l'outil, avec le nom CSS/X11 le plus proche de cette couleur — calculé automatiquement, sans rien à cliquer.

Avant, l'outil affichait uniquement le code HEX en grand, sans autre repère. Désormais, une petite ligne de texte sous ce code indique le nom de couleur nommée le plus proche. Si vous choisissez #7C3AED, la ligne sous le HEX indiquera un nom de la famille des violets connus en CSS ; si vous partez d'un rouge-orangé vif proche de #FF6347, elle indiquera un nom de cette famille de rouge.

Le calcul compare la couleur choisie à la liste des couleurs nommées standard du CSS (héritées des couleurs X11) et retient celle dont la distance colorimétrique est la plus faible. Ce n'est pas une correspondance exacte — un code HEX à six chiffres représente plus de 16 millions de teintes possibles, la liste nommée n'en couvre qu'environ 148 — mais un repère de lecture rapide qui évite de rester face à un code hexadécimal froid sans aucun contexte.

Ce qui a changé concrètement : avant, seul le HEX brut était visible en haut de l'outil. Maintenant, une ligne supplémentaire sous ce HEX affiche automatiquement le nom le plus proche, mise à jour à chaque changement de couleur — sélecteur, champ HEX, champ RGB/HSL/HSV ou preset rapide.

Nouveauté n°2 : l'aperçu de palette sur bouton, carte et texte de lien

Réponse rapide : une nouvelle section, sous l'échelle de nuances 50-900, affiche la couleur choisie appliquée en direct à un bouton principal, un bouton secondaire, un lien texte et une carte avec badge — le tout construit à partir des mêmes variables CSS générées (--color-50 à --color-900) que l'échelle de nuances.

C'est une section entièrement nouvelle, pas une modification d'un aperçu existant. Avant, la seule façon de « voir » une couleur en dehors de la conversion pure était l'aplat coloré du sélecteur, ou les carrés individuels de l'échelle de nuances. Maintenant, la même couleur de base est projetée simultanément sur plusieurs composants réalistes : le bouton principal utilise une nuance plus foncée pour un texte blanc lisible, le bouton secondaire reste en contour, la carte utilise un fond très clair avec un badge dans la nuance foncée, et un texte de corps utilise une nuance intermédiaire choisie pour rester lisible sur le fond clair de la carte.

Voici, à titre d'illustration statique de ce à quoi ressemble ce type de rendu (l'outil, lui, recalcule les nuances exactes de votre couleur en direct) :

Aperçu — bouton, lien & carte

Bouton principal Bouton secondaire Lien texte →

Badge de statut

Titre de carte d'exemple

Ce corps de texte utilise une nuance intermédiaire pour rester lisible sur le fond clair de la carte, le tout dérivé de la même couleur de base.

Un chiffre de ratio de contraste (illustratif dans cet exemple) accompagne l'aperçu réel dans l'outil, avec un lien direct vers le vérificateur WCAG pour valider n'importe quelle paire de la maquette.

Pourquoi ces deux nouveautés vont naturellement ensemble

Prises séparément, le nom de couleur et l'aperçu de maquette semblent répondre à des besoins différents — l'un est un repère de vocabulaire, l'autre un test visuel. Mais ils interviennent au même moment d'une session de choix de couleur : juste après avoir arrêté une teinte de base, et juste avant de la considérer comme définitive.

Le nom répond à « comment je décris cette couleur à quelqu'un d'autre, rapidement ? » — utile en réunion, dans un commentaire de ticket, ou pour vérifier que deux personnes parlent bien de la même famille de teinte.
L'aperçu bouton/carte répond à « est-ce que cette couleur tient dans une vraie interface ? » — utile juste avant de copier le code dans une feuille de style, pour repérer un problème de lisibilité qu'un simple aplat isolé ne montre jamais.

Dans les deux cas, l'idée directrice est la même : sortir du code hexadécimal isolé et le remettre dans un contexte — un contexte de langage pour le nom, un contexte d'interface pour la maquette.

Comment les utiliser concrètement dans une session de design

Voici un enchaînement possible (à adapter selon votre flux de travail) pour tirer parti des deux nouveautés lors du choix d'une couleur de marque ou d'accent :

Étape	Ce que vous faites	Ce que l'outil affiche
1	Choisir ou saisir une couleur candidate	Le HEX se met à jour, suivi du nom CSS/X11 le plus proche juste en dessous
2	Vérifier le ratio de contraste sur votre fond réel	Le vérificateur WCAG/RGAA affiche AA/AAA avec aperçu en direct
3	Descendre à la section « Aperçu de palette sur une mini-maquette UI »	La couleur apparaît sur un bouton principal, un bouton secondaire, un lien et une carte avec badge
4	Comparer avec l'échelle de nuances 50-900 juste au-dessus	Les mêmes nuances (`--color-500`, `--color-700`, etc.) sont visibles isolément et en contexte
5	Copier le code ou exporter l'échelle	Export CSS, Tailwind ou JSON de l'échelle de nuances complète

L'intérêt de ce nouvel enchaînement est de repousser la décision finale après avoir vu la couleur en contexte, plutôt que de la valider uniquement sur la base d'un aplat isolé ou d'un chiffre de contraste théorique.

🎨 À retenir : ces deux nouveautés ne changent rien aux conversions existantes — elles ajoutent un repère de nom sous le HEX et une nouvelle section d'aperçu en contexte (bouton, carte, lien), toutes deux calculées automatiquement dans le navigateur dès qu'une couleur est choisie.

Essayez les nouveautés sur votre propre couleur

Choisissez une couleur et voyez son nom CSS/X11 apparaître sous le HEX, puis descendez à la section aperçu pour la tester sur un bouton, une carte et un lien.

Essayer l'outil →

Questions fréquentes

Ces deux nouveautés remplacent-elles les fonctionnalités existantes du convertisseur ?

Non, elles s'ajoutent à l'existant sans rien retirer. La conversion HEX/RGB/HSL/HSV/CMJN, le vérificateur de contraste WCAG/RGAA, les palettes complémentaire/analogue/triadique et l'échelle de nuances 50-900 fonctionnent exactement comme avant. Le nom de couleur et l'aperçu de mini-maquette apparaissent en plus, respectivement sous le code HEX et dans une nouvelle section dédiée de la page.

Faut-il une action particulière pour voir le nom de couleur ou l'aperçu bouton/carte ?

Aucune. Les deux s'actualisent automatiquement dès qu'une couleur est choisie ou modifiée, que ce soit via le sélecteur, un champ HEX/RGB/HSL/HSV, ou un preset rapide. Il n'y a ni bouton à activer ni onglet caché : le nom apparaît sous le HEX en haut de page, et la mini-maquette se met à jour dans la section « Aperçu de palette sur une mini-maquette UI ».

L'aperçu bouton/carte utilise-t-il la couleur choisie telle quelle ou une variante ?

Les deux. La maquette réutilise la même courbe de luminosité que l'échelle de nuances 50-900 pour dériver sept variables (--color-50 à --color-900) à partir de la teinte et de la saturation de la couleur choisie. Le bouton principal et le badge utilisent une nuance plus foncée (--color-600) pour rester lisibles en texte blanc, tandis que le fond de carte utilise une nuance très claire (--color-50) : c'est la même logique qu'un vrai design system, pas un simple aplat de la couleur brute.

Le nom de couleur affiché est-il calculé sur l'appareil ou envoyé à un serveur ?

Le calcul se fait entièrement dans le navigateur, comme le reste de l'outil : aucune couleur ni aucune donnée n'est envoyée à un serveur externe. Le nom le plus proche est trouvé en comparant la couleur choisie à une liste de couleurs nommées CSS/X11 par distance colorimétrique, directement en JavaScript côté client.

Ces nouveautés changent-elles la façon dont l'échelle de nuances 50-900 est calculée ?

Non. L'aperçu de mini-maquette consomme les mêmes valeurs de nuance que la section Échelle de nuances 50-900 existante — il ne recalcule rien de différent, il applique simplement ces nuances à trois composants d'interface (bouton, carte, lien) au lieu de les afficher seules en carrés de couleur. Les deux sections restent synchronisées sur la même couleur de base.

Méthodologie : les nouveautés décrites dans ce guide ont été vérifiées directement dans le code source de l'outil avant publication. Les exemples de rendu bouton/carte sont fournis à titre illustratif ; le chiffre de contraste précis dépend de la couleur exacte que vous choisissez et s'affiche en direct dans l'outil. Ce contenu est informatif et ne remplace pas un audit d'accessibilité professionnel.

Nouveautés du convertisseur de couleur : nom CSS automatique et aperçu bouton/carte en direct