Comment utiliser : Générateur de couleurs Tailwind
- Veuillez saisir la couleur de votre marque au format HEX, RGB, HSL ou OKLCH.
- Donnez un nom à la palette (par exemple
brand) — elle devientbg-brand-500et ses « amis ». - Conservez l’option « étape la plus proche » afin que votre couleur exacte corresponde à la nuance dont la luminosité est identique, ou définissez-la explicitement à 500.
- Choisissez un format d'exportation et copiez-le dans votre fichier de configuration Tailwind, CSS ou SCSS.
Qu'est-ce qu'une échelle de couleurs de 50 à 950 ?
Les systèmes de design tels que Tailwind CSS décrivent chaque couleur comme une gamme de nuances : 50 correspond à une teinte proche du blanc pour les arrière-plans, 500 à la couleur principale, et 900 à 950 à des nuances profondes destinées au texte et au mode sombre. Disposer de l’ensemble de cette gamme vous permet de styliser de manière cohérente les états de survol et d’activation, les bordures, les badges et les thèmes sombres — au lieu de devoir à chaque fois choisir à l’œil nu une version plus claire ou plus foncée.
Comment ce générateur construit l’échelle
- Votre couleur est convertie en OKLCH, un espace colorimétrique uniformément perçu, de sorte que chaque étape correspond à un écart visuel régulier.
- Chaque étape dispose d’une luminosité cible calquée sur la palette de Tailwind v4 (≈97 % pour 50 jusqu’à ≈26 % pour 950). Votre couleur est placée sur l’étape la plus proche et les cibles voisines sont légèrement décalées afin que la gamme s’y intègre en douceur.
- La chroma (intensité chromatique) atteint son maximum entre 500 et 600 et diminue progressivement vers les deux extrémités, à l’instar des palettes ajustées manuellement, afin que les teintes ne paraissent pas fluo et que les nuances ne soient pas ternes.
- Toute nuance située en dehors de la gamme sRGB est adaptée à cette gamme en réduisant la chroma tout en conservant la teinte et la luminosité.
Utilisation de la palette
Tailwind v4 lit les couleurs à partir du CSS : collez le @theme bloc dans votre feuille de style principale et des classes telles que bg-brand-100 apparaissent. Tailwind v3 utilise theme.extend.colors dans tailwind.config.js. Les exportations de variables CSS et SCSS fonctionnent dans n’importe quel projet — y compris Webflow, où vous pouvez créer des variables de couleur correspondantes dans le panneau « Variables ».
Conseils d’accessibilité
En règle générale, le texte sur fond blanc nécessite une nuance suffisamment foncée pour atteindre un rapport de 4,5:1 (souvent 600 ou plus foncé), tandis que le texte sur fond sombre fonctionne généralement à partir de 300 ou plus clair. L’indication sous chaque échantillon vous renseigne à ce sujet ; vérifiez les combinaisons spécifiques à l’aide du Contrast Checker ou de l’APCA Contrast Checker.
Aussi recherché comme : palette tailwind, générateur de nuances, générateur de teintes, échelle de couleurs, couleurs du système de conception, palette de couleurs de la marque, 50-900.
Outils complémentaires : Générateur de couleurs Tailwind
- Extracteur de palette d'image — Trouvez la palette de couleurs de n'importe quelle image : photo, logo, capture d'écran ou maquette.
- Mélangeur de couleurs — Choisissez deux couleurs et un nombre d’étapes pour obtenir des couleurs de transition régulièrement réparties, idéales pour les dégradés, les bordures, les graphiques et les états de survol.
- Variables CSS vers Tailwind — Transformez vos variables de couleur :root en thème Tailwind en un seul collage : configuration Tailwind v3 tailwind.config.js ou @theme de la v4, avec des valeurs littérales ou des références var().
- Convertisseur OKLCH — Explorez l’espace de couleur OKLCH, perceptuellement uniforme, grâce à des curseurs en temps réel.