Rechercheur de couleurs Tailwind CSS Trouvez la classe de couleur CSS Tailwind la plus proche pour n'importe quel code HEX.
Rechercheur de couleurs Tailwind
Trouvez la classe de couleur CSS Tailwind la plus proche pour n'importe quel code HEX.
Entrez votre couleur
Tapez un code HEX ou utilisez le sélecteur de couleurs.
Afficher les correspondances
Voyez les 10 couleurs Tailwind CSS les plus proches classées par distance.
Copier le nom de la classe
Copiez le nom de la classe de couleur Tailwind (par exemple, blue-500) pour votre projet.
What Is Rechercheur de couleurs Tailwind?
L'outil de recherche de couleurs Tailwind CSS associe n'importe quelle couleur HEX à la couleur la plus proche dans la palette par défaut de Tailwind CSS. Tailwind comprend 22 familles de couleurs (slate, gray, zinc, red, orange, etc.) chacune avec 11 nuances (50-950), totalisant 242 couleurs prédéfinies. Cet outil calcule la distance RGB euclidienne entre votre couleur d'entrée et chaque couleur Tailwind, classant les 10 correspondances les plus proches. Il est inestimable pour les développeurs qui migrent des conceptions vers Tailwind, associent des couleurs de marque à des classes Tailwind ou trouvent la bonne classe d'utilitaire Tailwind pour une spécification de conception. Chaque correspondance affiche un échantillon visuel, le nom de la classe Tailwind (par exemple, blue-500), la valeur HEX réelle et la métrique de distance afin que vous puissiez juger la qualité de la correspondance.
Why Use Rechercheur de couleurs Tailwind?
-
Recherche toutes les 242 couleurs de palette par défaut de Tailwind pour trouver la correspondance la plus proche
-
Comparaison visuelle côte à côte de l'entrée vs. la couleur Tailwind
-
Affiche le nom exact de la classe Tailwind prêt à être utilisé dans le code
-
La métrique de distance aide à juger la qualité de la correspondance
-
Les 10 premiers résultats pour choisir la meilleure option
Common Use Cases
Conception vers Tailwind
Convertissez les couleurs de conception Figma/Sketch en classes d'utilitaires Tailwind les plus proches.
Intégration de la marque
Trouvez les couleurs Tailwind les plus proches des directives de marque pour un prototypage rapide.
Migration du legacy
Mappez les couleurs CSS existantes aux équivalents Tailwind lors de la migration du framework.
Exploration des couleurs
Découvrez les couleurs Tailwind similaires à une couleur que vous aimez pour un style utilitaire cohérent.
Technical Guide
L'outil de recherche calcule la distance euclidienne dans l'espace de couleur RGB : D = sqrt((R1-R2)² + (G1-G2)² + (B1-B2)²) entre la couleur d'entrée et chacune des 242 couleurs de la palette par défaut de Tailwind. Les résultats sont classés par distance ascendante. Une distance de 0 signifie une correspondance exacte. Des distances inférieures à 20 indiquent des correspondances très proches ; au-dessus de 50, cela signifie une différence notable. La palette Tailwind est organisée en 22 familles de couleurs avec 11 nuances chacune (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950). La nuance 500 est généralement la couleur « de base » de chaque famille. Les couleurs Tailwind 3.x sont conçues avec l'uniformité perceptive à l'esprit, ce qui signifie que des étapes d'ombrage égales (par exemple, 400 à 500) produisent des différences de luminosité visuelle approximativement égales dans toutes les familles de couleurs.
Tips & Best Practices
-
1Une distance inférieure à 10 signifie que la couleur Tailwind est pratiquement indiscernable de votre entrée
-
2Si la correspondance la plus proche a une grande distance, envisagez d'étendre Tailwind avec une couleur personnalisée
-
3Le format du nom de la classe est "nomDeLaCouleur-nuance" (par exemple, bg-blue-500, text-red-600)
-
4Les couleurs 500-nuances de Tailwind sont l'intensité "standard" - plus clair est 50-400, plus foncé est 600-950
-
5Vous pouvez étendre la palette de couleurs de Tailwind avec des couleurs personnalisées dans tailwind.config.js pour des correspondances exactes
Related Tools
Convertisseur HEX vers RGB
Convertissez les codes de couleur HEX en valeurs RVB instantanément avec un aperçu de couleur interactif.
🎨 Color Tools
Sélecteur de couleurs
Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.
🎨 Color Tools
Palettes de couleurs de marque
Parcourez les palettes de couleurs officielles de plus de 50 marques et entreprises technologiques populaires.
🎨 Color Tools
Couleurs Material Design
Parcourez la palette de couleurs Material Design complète avec toutes les nuances et accents.
🎨 Color Tools
Couleurs vers variables CSS
Convertissez un ensemble de couleurs en propriétés personnalisées CSS (variables).
🎨 Color ToolsFrequently Asked Questions
Q Que se passe-t-il si aucune couleur Tailwind n'est suffisamment proche ?
Q Cela fonctionne-t-il avec Tailwind v4 ?
Q Quelle distance est considérée comme une bonne correspondance ?
About This Tool
Rechercheur de couleurs Tailwind is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.