Outils › Convertisseur Tailwind

Trouvez la classe Tailwind
pour n'importe quelle couleur

Saisissez n'importe quelle couleur HEX et trouvez instantanément la classe Tailwind CSS la plus proche. Cliquez sur n'importe quelle couleur dans la palette pour voir sa classe.

Saisissez la couleur
—
—
Exemples d'utilisation
text- — copier
bg- — copier
border- — copier
ring- — copier
Correspondances les plus proches
Palette complète Tailwind CSS

Comment fonctionne la recherche

L'algorithme compare votre couleur avec les ~220 couleurs de la palette Tailwind CSS v3 et trouve la plus proche par distance euclidienne dans l'espace RGB. Le résultat est le nom exact de la classe.

Quand en avez-vous besoin

Quand vous recevez une couleur d'un designer en HEX et devez trouver rapidement la classe Tailwind correspondante. Ou quand vous voulez vérifier que votre couleur est dans la palette standard Tailwind.

Tailwind CSS v3

L'outil utilise la palette complète de Tailwind CSS v3 — incluant slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink et rose.

Questions fréquentes
Que faire si ma couleur n'est pas dans Tailwind ?
L'outil trouvera la couleur la plus proche. Si la différence est grande, vous pouvez ajouter une couleur personnalisée dans tailwind.config.js via la section extend.colors, en utilisant le HEX exact dont vous avez besoin.
Tailwind v4 est-il pris en charge ?
Actuellement la palette Tailwind v3 est utilisée. Dans v4 le système de couleurs a changé, mais les noms de couleurs de base restent compatibles.
Comment utiliser la classe dans un projet ?
Par exemple pour le bleu, l'outil donnera la classe blue-500. Utilisez-la comme text-blue-500, bg-blue-500, border-blue-500 etc. — les exemples prêts sont affichés dans la carte de gauche.
Cet outil est-il gratuit ?
Oui, complètement gratuit et sans limites. Sans inscription, tout fonctionne dans votre navigateur.