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
- Image Color Palette Extractor — Find the color palette of any image — a photo, logo, screenshot or design.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- CSS Variables to Tailwind — Turn your :root color variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.