Générateur de couleurs Tailwind
Créez une échelle Tailwind 50-950 depuis une couleur de marque.
Ce que couvre cette page
Cette page explique le flux de travail et renvoie directement vers la section correspondante de l’outil principal Chromaforge.
- Générez des palettes depuis une couleur de base.
- Vérifiez le contraste avant de publier du texte UI.
- Exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.
- Fonctionne localement dans le navigateur.
Comment ca fonctionne
Tailwind CSS organise ses couleurs en échelles de 11 nuances : 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 et 950. La nuance 500 est generalement la couleur "de base", les nuances inferieures sont plus claires et les supérieures plus sombres.
Chromaforge prend votre couleur de marque et la place automatiquement sur l'échelle, puis calcule les 10 autres nuances en ajustant la luminosité et la saturation de manière cohérente. Le résultat respecte la logique perceptuelle : les incréments de luminosité ne sont pas linéaires mais calibrés pour paraître visuellement équidistants.
L'export produit directement le bloc de configuration pour tailwind.config.js :
- Bloc
colorspret a coller dans votre configuration Tailwind 3 ou 4. - Noms de variables personnalisables (brand, primary, accent...).
- Preview en temps réel des 11 nuances avec leur code hexadecimal.
- Valeurs RGB disponibles pour les utilitaires d'opacite Tailwind (
bg-brand-500/50).
Si votre couleur de depart ne tombe pas exactement sur la nuance 500, Chromaforge ajuste le mapping pour preserver au maximum votre couleur originale.
Exemples pratiques
Pourquoi generer une échelle Tailwind personnalisee plutôt que d'utiliser les couleurs par defaut ?
- Couleur de marque unique : le violet de votre logo n'est pas le
purple-500de Tailwind. Générez votre propre échellebrandpour l'utiliser partout avec les classes utilitaires habituelles. - Thematisation multi-tenant : chaque client a sa couleur principale. Générez une échelle par tenant et injectez-la via CSS variables.
- Composants shadcn/ui : shadcn utilise des variables CSS HSL. Exportez les valeurs HSL de chaque nuance pour les coller dans votre
globals.css. - Migration depuis un design Figma : vous avez une palette Figma avec 8 nuances ? Regénérez-la en 11 nuances Tailwind-compatibles.
FAQ — Couleurs Tailwind
Tailwind 4 a change la gestion des couleurs. Cet outil est-il compatible ?
Oui. Tailwind CSS v4 utilise des variables CSS nativement dans le fichier CSS plutôt qu'un fichier de configuration JS. Chromaforge peut exporter vos couleurs en custom properties CSS (--color-brand-500: oklch(...)) directement compatibles avec la nouvelle syntaxe Tailwind 4. Selectionnez le format "CSS variables" a l'export.
Puis-je generer plusieurs échelles en meme temps ?
Depuis l'outil principal Chromaforge, vous pouvez definir plusieurs couleurs de base (primaire, secondaire, accent, neutre) et exporter l'ensemble en un seul bloc de configuration. Chaque couleur produit sa propre échelle 50-950.
Comment savoir quelle nuance utiliser pour les textes et les fonds ?
La convention Tailwind recommande les nuances 700-900 pour le texte sur fond clair et 100-300 pour le texte sur fond sombre. Pour les fonds de surface, 50-100 sont tres clairs, 200-300 donnent une teinte legere. Validez toujours avec le vérificateur de contraste avant intégration.
L'outil gere-t-il les couleurs oklch utilisees dans Tailwind 4 ?
Chromaforge calcule en interne en HSL et sRGB. L'export en oklch est disponible pour Tailwind 4. La conversion assure que les couleurs restent visuellement cohérentes, mais des ajustements mineurs peuvent etre nécessaires pour les gamuts P3 elargis.