Qu'est-ce que Recherche de couleurs Tailwind ?

Tailwind Color Finder accepte n'importe quelle valeur de couleur —hex, rgb(), hsl() ou un nom CSS comme teal— et renvoie aussitôt la classe utilitaire Tailwind CSS la plus proche. Plutôt que comparer les palettes à l'œil, collez la valeur issue de votre outil de design et récupérez le nom exact de la classe prêt à intégrer dans votre code.

La mise en correspondance utilise la distance perceptuelle ΔE dans l'espace CIE Lab plutôt qu'une soustraction RGB brute, donc le résultat reflète ce que l'œil voit comme proche, pas ce qui est numériquement le plus près. Toute la palette par défaut de Tailwind v3/v4 est parcourue, des familles slate à rose, des tons 50 à 950, plus le noir et le blanc, et les dix meilleures correspondances sont listées avec leur distance.

Comment utiliser

1. Saisissez un code couleur hexadécimal depuis votre maquette de design ou choisissez une couleur à l’aide du sélecteur de couleurs.
2. L’outil affiche instantanément la classe de couleur Tailwind CSS la plus proche avec une comparaison visuelle côte à côte.
3. Copiez le nom de la classe Tailwind (ex. : bg-blue-500) directement dans votre code. Consultez la distance de couleur pour évaluer la précision de la correspondance.

Quand l'utiliser

• Traduire les codes hex d'une charte ou d'un fichier Figma en classes Tailwind sur un nouveau projet.
• Auditer une feuille de styles ancienne contenant des hex bruts et migrer vers les classes utilitaires.
• Choisir la nuance sémantique pertinente (red-500 vs rose-500) quand on ne vous donne qu'un seul hex.

Résultat

Votre designer vous transmet la couleur de marque #2563EB. Collez-la et l’outil montre qu’elle correspond exactement à blue-500. Pour #3A7BC8, il identifie sky-600 comme la correspondance la plus proche avec un score de distance indiquant la proximité.

FAQ

Comment l'outil détermine-t-il la couleur Tailwind la plus proche ?

Il convertit les deux hex en CIE Lab et calcule la ΔE76, une distance perceptuelle qui approche la différence ressentie entre deux teintes. ΔE inférieur à 1 est quasi indistinguable ; au-dessus de 5, le décalage de teinte ou de luminosité saute aux yeux.

Quelle version de la palette Tailwind est utilisée ?

La palette par défaut v3/v4 : 22 familles (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), tons 50 à 950, plus le noir et le blanc. Les couleurs personnalisées du thème ne sont pas incluses.

Pourquoi mon hex tombe-t-il sur un ton que je n'attendais pas ?

La distance Lab combine teinte, saturation et luminosité. Un vert terne peut être plus proche d'un slate que d'un teal vif parce que l'écart de luminosité domine. Si le premier résultat ne colle pas, parcourez le top dix et choisissez par famille de teinte.

Peut-on copier le résultat en variable CSS plutôt qu'en classe Tailwind ?

Le panneau de détail affiche le nom de la classe (bg-blue-500) et le hex correspondant. Copiez le hex et encadrez-le par var(--brand) si vous travaillez avec des propriétés CSS personnalisées plutôt qu'avec les utilitaires. Et quand rien dans la palette n'est assez proche, l'outil affiche la classe à valeur arbitraire (bg-[#hex]) construite à partir de votre couleur exacte, pour rester précis sans toucher à votre thème.

Puis-je coller rgb(), hsl() ou un nom de couleur CSS au lieu d'un hex ?

Oui. Le champ comprend les hex (#2563EB ou 2563EB, à 3 ou 6 chiffres), rgb()/rgba(), hsl()/hsla() avec degrés ou teinte sans unité, et l'ensemble des couleurs nommées CSS (teal, rebeccapurple, cornflowerblue, etc.). Les canaux alpha sont ignorés — la comparaison se fait sur l'équivalent RGB opaque.

Outils similaires