Comment générer une palette Tailwind 50-950 depuis une seule couleur ?
Génère une palette Tailwind 50-950 depuis une seule couleur de base, en utilisant OKLCH pour une échelle de lightness perceptuellement uniforme.
Les générateurs standard font ça en HSL ce qui donne « 300 a l'air identique à 400 ». On utilise OKLCH = paliers lisibles qui matchent Tailwind v3 / v4.
Choisis ton « ancre » : à quel palier ta couleur d'origine se trouve (typiquement 500). Export en variables CSS ou en snippet de config Tailwind.
Comment l'utiliser
- Choisis une couleur de base : HEX (par exemple #3b82f6), picker natif, pipette d'écran (Chrome/Edge), ou un des 6 préréglages de marque.
- Choisis une « ancre » : à quel palier Tailwind ta couleur d'origine doit atterrir. Défaut 500. Pour des couleurs très claires, choisis 200, pour des très sombres 800. L'ancre est marquée d'une étoile (★).
- À droite, tu vois l'échelle complète 50-950. Chaque échantillon est cliquable, copie le HEX. 50-200 pour « fonds et bordures subtiles », 300-500 pour « états interactifs principaux », 600-950 pour « texte et accents ».
- « Aperçu contraste » affiche le ratio de contraste de chaque échantillon avec texte blanc (A) et texte noir (A). T'aide à décider quels paliers marchent pour les boutons.
- Deux exports : variables CSS (à déposer dans globals.css) ou un snippet de config Tailwind prêt (à déposer dans tailwind.config.js).
Quand c'est utile
Là où le générateur de palette Tailwind aide, scénarios typiques :
- Charte graphique → Tailwind : tu as une couleur de marque (par exemple #3b82f6 indigo) et tu as besoin d'une échelle complète pour le design. Le générateur construit 50, 100, ..., 950 en suivant la convention Tailwind.
- Dark mode : en Tailwind v4, une palette OKLCH veut dire qu'inverser l'échelle (50 ↔ 950, 100 ↔ 900) donne un dark mode sensé.
- Design system : palette complète pour N couleurs de marque + 1 niveaux de gris = un système complet.
- Migration HSL → OKLCH : un vieux projet HSL à migrer vers OKLCH : le générateur montre ce que Tailwind v4 produirait depuis ta couleur de marque.
- Pédagogie : compare nos échantillons basés OKLCH aux défauts officiels de Tailwind v3 : ils sont très proches, parce que Tailwind utilise aussi OKLCH depuis 2024.
Besoin d'affiner la couleur de base d'abord ? Utilise le convertisseur de couleurs pour récupérer HEX / OKLCH. Choisir des paires d'accent et neutres est plus facile dans l'outil d'harmonie de couleurs, et fais passer les combinaisons finales texte/fond dans le vérificateur de contraste avant de livrer.