Centre de Connaissances & Guide
Générateur de Palettes de Couleurs et Échelles pour Tailwind CSS (50-950)
Générateur de Palettes de Couleurs et Échelles pour Tailwind CSS (50-950)
Cet outil fonctionne à 100% côté client dans votre navigateur. Vos codes sources, jetons d'accès, clés API et données sensibles ne quittent jamais votre appareil.
Formule & Méthode de Calcul
Luminance Scale = Lerp(Base Color, White [50]) ➔ Base Color [500] ➔ Lerp(Base Color, Black [950])
The generator isolates the primary hue and mathematically scales the lightness channel up for background tints (50 to 400) and down for text shades (600 to 950).
Bonnes Pratiques & Conseils
- Lock the 500 Shade to Your Brand: In Tailwind, the 500 shade is traditionally the vibrant, primary brand color used for primary buttons and active states. Build the rest of the scale symmetrically around it.
- Use 50 and 900 for Backgrounds: The absolute lightest shades (50 and 100) are explicitly designed for massive background panels, while the darkest (900 and 950) are designed for highly legible typography.
- Export to Tailwind Config: Once generated, copy the raw JavaScript object directly into the `theme.extend.colors` block of your `tailwind.config.js` file to instantly compile the utility classes.
Foire Aux Questions
Pourquoi les teintes sombres paraissent-elles ternes ou boueuses ?
Si vous réduisez la luminosité en utilisant du noir pur, les couleurs éclatantes (comme le jaune ou le cyan) vireront au vert olive terne. Les générateurs avancés décalent légèrement la teinte vers le bleu ou le violet dans les nuances plus sombres afin de préserver la vivacité perçue.
Puis-je utiliser le format RVB au lieu du format HEX ?
Tailwind prend nativement en charge le Hex, le RVB (RGB) et le HSL. Toutefois, si vous souhaitez exploiter les utilitaires d'opacité d'arrière-plan intégrés de Tailwind (comme `bg-blue-500/50`), vous devez configurer les couleurs à l'aide de variables RVB brutes.
How many colors should a UI have?
A professional dashboard typically requires one Primary scale (Brand), one Neutral scale (Grays/Text), and four Semantic scales (Success, Warning, Danger, Info).