Couleurs UI : testez une palette Tailwind sur une vraie interface
Choisissez une famille de couleurs Tailwind et voyez son rendu sur des boutons, graphiques, formulaires, cartes et badges. Ajustez les nuances principales, générez une palette aléatoire et exportez le résultat.
Comment utiliser l'aperçu des couleurs
- 1
Choisissez une famille
Choisissez n'importe quelle famille de couleurs dans la barre supérieure. L'adresse de la page enregistre la famille choisie, vous pouvez donc partager le lien.
- 2
Ajustez les nuances
Modifiez le 600 (principal), le 500 (secondaire) ou le 200 (doux) avec le sélecteur, ou générez une palette aléatoire. Toute l'interface se met à jour instantanément.
- 3
Exportez la palette
Quand elle vous plaît, exportez l'échelle complète de 50 à 950 pour Tailwind v4, Tailwind v3, Figma ou CSS. Cliquez sur n'importe quelle nuance de l'échelle pour la copier.
Questions fréquentes
À voir une palette appliquée avant de l'intégrer à votre projet : comment les nuances claires et foncées fonctionnent ensemble, si les boutons ressortent assez et si les graphiques et formulaires restent lisibles.
Le 600 sert aux actions et éléments mis en avant, le 500 aux éléments secondaires et graphiques, le 100–200 aux fonds et états doux, et le 700–800 au texte sur fonds clairs.
Oui. L'adresse de la page inclut la famille choisie, par exemple ?family=yellow, et elle se charge directement à l'ouverture du lien.
Vous pouvez exporter l'échelle complète en variables Tailwind v4, configuration Tailwind v3, styles Figma, variables CSS ou seulement les codes HEX, RGB, HSL et OKLCH.