Pourquoi convertir une couleur HEX en Tailwind CSS ?
Lorsque vous integrez un design Figma ou Photoshop dans un projet Tailwind CSS, les couleurs du design ne correspondent pas toujours exactement aux couleurs predéfinies de Tailwind. Plutot que de créer des couleurs personnalisees pour chaque nuance, il est souvent preferable d'utiliser la couleur Tailwind la plus proche. Cela maintient la coherence du design system, réduit la taille du CSS généré et facilite la maintenance a long terme.
Comment fonctionne la correspondance ?
Notre algorithme compare votre couleur avec les 220+ couleurs de la palette Tailwind CSS v3 en utilisant la distance euclidienne dans l'espace colorimetrique. Pour chaque couleur Tailwind, nous calculons la différence entre les composantes R, G et B. La couleur avec la plus petite distance est la correspondance la plus proche. Un score de différence de 0 signifie une correspondance exacte, tandis qu'un score eleve indique qu'il serait preferable de définir une couleur personnalisee.
La palette de couleurs Tailwind CSS
Tailwind CSS propose une palette soigneusement construite de 22 familles de couleurs (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), chacune avec 11 nuances (50 à 950). Cette palette couvre la grande majorité des besoins en design d'interface, avec des couleurs harmonieuses et des contrastes accessibles.