Générateur de nuances Tailwind

Créer une échelle de nuances pratique

Une seule couleur de marque suffit rarement pour une interface complète. Les boutons ont besoin d'états au survol, les cartes de fonds clairs, les bordures d'une teinte plus discrète et le texte parfois d'un complément plus foncé. Ce générateur de nuances Tailwind transforme une valeur HEX en une rampe 50-950 familière, pour que vous puissiez explorer rapidement le comportement de cette couleur sur des surfaces claires et sombres. Les valeurs générées sont déterministes et faciles à copier, ce qui les rend utiles pour les prototypes, les revues de design, les propriétés personnalisées CSS et la documentation des design tokens.

L'outil utilise des paliers de luminosité HSL pour conserver une teinte reconnaissable tout en poussant la couleur vers des tons très clairs et des nuances profondes. Ce n'est pas un algorithme officiel de Tailwind et il ne cherche pas à reproduire exactement les palettes réglées à la main de Tailwind. Il vous offre plutôt une base propre à ajuster en contexte. Si votre couleur de base est déjà très pâle ou très sombre, examinez attentivement les valeurs intermédiaires et décidez si la rampe nécessite un affinage manuel.

Utiliser les nuances générées en CSS

Copiez la sortie CSS lorsque vous voulez des variables prêtes pour le navigateur comme --brand-500 et --brand-700. Copiez la sortie JSON lorsque vous préparez des tokens pour un fichier de configuration, un style dictionary ou une page de documentation. Dans une interface typique, 50 et 100 conviennent aux surfaces douces, 200 et 300 aux bordures ou aux badges, 500 à la couleur d'action principale, et 600 à 800 aux états de survol, d'appui ou de texte. Les valeurs 900 et 950 sont les plus fortes ; réservez-les aux thèmes sombres ou aux éléments très mis en avant.

Vérifier le contraste avant de publier

Les échelles de nuances sont pratiques, mais elles ne garantissent pas automatiquement un texte accessible. Une couleur qui semble équilibrée en échantillon peut échouer au contraste derrière de petites étiquettes ou des contrôles désactivés. Après avoir copié une échelle, testez les combinaisons réellement utilisées par votre interface : texte principal sur fonds clairs, texte blanc sur les boutons d'action, anneaux de focus autour des champs et bordures face aux surfaces voisines. Considérez ce générateur comme une première étape dans le workflow d'un système de couleurs, puis vérifiez les associations finales avec un vérificateur de contraste avant de publier.