CodeKitHubEn quoi consiste cet outil ?
Tailwind CSS propose une échelle de couleurs par défaut fixe plutôt que de vous laisser choisir des valeurs arbitraires pour les couleurs d'interface courantes. Chacune des 22 familles nommées (comme amber ou slate) possède exactement 11 nuances, numérotées de 50 à 950, et chaque nuance a une seule valeur hex officielle documentée par Tailwind lui-même, utilisée à l'identique dans les utilitaires bg-, text-, border- et ring-.
Cette référence intègre localement cette palette officielle complète, si bien que chercher une couleur ou un nom de classe ne nécessite pas d'ouvrir la documentation de Tailwind, de lancer une compilation, ni de faire passer la classe par PurgeCSS juste pour voir son rendu. Les recherches par hex utilisent la distance euclidienne RGB pour trouver la nuance officielle la plus proche, et les recherches par classe sont exactes — chaque valeur ici correspond aux valeurs par défaut documentées de Tailwind.
Pourquoi l'utiliser ?
- Collez un code hex issu d'un fichier de conception ou d'une capture d'écran et obtenez instantanément le nom de classe Tailwind le plus proche, au lieu de deviner à quelle nuance numérotée il correspond.
- Saisissez un nom de classe comme slate-900 ou bg-purple-500 pour voir sa valeur hex et RGB exacte sans fouiller dans la documentation de Tailwind.
- Parcourez la grille complète de 22 familles x 11 nuances pour comparer les nuances côte à côte avant d'en choisir une.
- Obtenez les variantes bg-, text-, border- et ring- de n'importe quelle nuance en un clic, puisque Tailwind utilise la même échelle numérique pour toutes.
- Gratuit, instantané et entièrement local — aucun envoi de fichier, aucun compte, aucune étape de compilation.
Mode d'emploi
- Pour trouver un nom de classe à partir d'un code hex : saisissez ou collez la valeur hex (avec ou sans #) dans le champ de recherche — la nuance Tailwind officielle la plus proche apparaît au-dessus de la grille, avec la distance de couleur si ce n'est pas une correspondance exacte.
- Pour trouver une valeur hex à partir d'un nom de classe : saisissez la classe ou le nom de famille (par ex. amber-500, bg-blue-600, ou simplement teal) — une correspondance exacte affiche le hex, le RGB et toutes les variantes utilitaires ; un nom de famille seul filtre la grille sur cette famille.
- Pour tout parcourir : laissez le champ de recherche vide et cliquez sur n'importe quel échantillon de la grille — ses détails apparaissent dans le panneau au-dessus et son code hex est copié automatiquement.
- Cliquez sur n'importe lequel des boutons de variante bg-/text-/border-/ring- dans le panneau de détail pour copier ce nom de classe exact.
Exemple
Entrée
#c4b5fdRésultat
violet-300 — Correspondance exacte, #C4B5FD, rgb(196, 181, 253)Ce hex fait partie des valeurs par défaut documentées de Tailwind lui-même, donc la distance est de 0 et la correspondance est exacte plutôt qu'approximative.
Foire aux questions
Sont-ce les couleurs par défaut officielles de Tailwind CSS ?
Oui — les 242 valeurs hex (22 familles x 11 nuances) proviennent de la palette par défaut officiellement documentée par Tailwind. Tailwind v4 représente les couleurs en interne en OKLCH, mais la même palette par défaut et ses équivalents hex documentés restent inchangés par rapport à la v3, donc ces valeurs sont valables pour l'une ou l'autre version.
Que signifie une recherche par hex qui n'est pas une correspondance exacte ?
Si vous collez un code hex qui ne fait pas partie des 242 valeurs par défaut de Tailwind (une couleur de marque personnalisée, par exemple), l'outil affiche la nuance officielle la plus proche selon la distance RGB et l'étiquette « Correspondance la plus proche » avec la distance indiquée — ce ne sera pas identique pixel pour pixel à votre saisie, juste la valeur par défaut Tailwind la plus proche.
Pourquoi bg-, text-, border- et ring- utilisent-ils tous les mêmes numéros ?
Tailwind applique une seule échelle de couleurs partagée sur toutes les catégories utilitaires, donc bg-amber-500, text-amber-500, border-amber-500 et ring-amber-500 sont tous la même valeur hex sous-jacente appliquée à une propriété CSS différente. C'est pourquoi le panneau de détail affiche les quatre variantes ensemble pour n'importe quelle nuance recherchée.
Puis-je rechercher un groupe de famille comme simplement « blue » sans numéro de nuance ?
Oui — saisir un seul nom de famille (sans numéro) filtre la grille sur les 11 nuances de cette famille, pour les comparer côte à côte avant de choisir une nuance précise.
Cela couvre-t-il les couleurs de thème Tailwind personnalisées que j'ai définies dans ma configuration ?
Non — cette référence ne couvre que la palette par défaut intégrée de Tailwind, pas les couleurs que vous avez ajoutées ou remplacées dans un bloc theme.extend.colors de tailwind.config.js ou un bloc @theme en v4. Si votre projet personnalise la palette, vos couleurs réellement affichées peuvent différer de ce qui est montré ici pour le même nom de classe.