Générateur de nuances Tailwind CSS
Générez les 11 nuances Tailwind CSS (50 à 950) d’une couleur et copiez le code pour Tailwind v4, v3 ou en variables CSS.
Cliquez sur une nuance pour copier son code. Votre couleur est placée sur la nuance la plus proche de sa luminosité.
Tout fonctionne dans votre navigateur : aucune donnée n’est envoyée.
À propos de cet outil
Ce générateur de nuances Tailwind CSS crée, à partir d’une seule couleur, une échelle complète de 11 nuances numérotées de 50 à 950, comme les couleurs natives de Tailwind. Votre couleur est placée sur la nuance dont la luminosité est la plus proche, et les autres sont calculées dans l’espace OKLCH en gardant la même teinte. Idéal pour transformer la couleur d’une marque en palette utilisable dans un projet web.
Donnez un nom à la couleur (brand par défaut) et choisissez le format du code : bloc @theme pour Tailwind v4 avec des valeurs oklch(), objet pour tailwind.config.js en Tailwind v3, variables CSS ou JSON. Cliquez sur une nuance pour copier son code HEX. Le bouton Au hasard propose une couleur de départ et le lien de partage conserve votre couleur.
- 11 nuances de 50 à 950 en un clic
- Code Tailwind v4 (@theme) en oklch()
- Config Tailwind v3, variables CSS ou JSON
- Nom de couleur personnalisable
- Copie d’une nuance d’un simple clic
Comment l’utiliser
- Saisissez votre « Couleur de base » en HEX ou choisissez-la au sélecteur.
- Indiquez le « Nom de la couleur » utilisé dans le code.
- Choisissez le « Format du code » : Tailwind v4, Tailwind v3, variables CSS ou JSON.
- Cliquez sur « Copier » et collez le code dans votre projet.
Questions fréquentes
Ma couleur est-elle envoyée sur un serveur ?
Non. Les nuances sont calculées dans votre navigateur et aucune donnée n’est envoyée. La couleur de base figure seulement dans l’adresse de la page pour le lien de partage.
Le générateur de nuances Tailwind est-il gratuit ?
Oui, il est gratuit et s’utilise sans compte ni inscription.
Quelle différence entre les formats Tailwind v4 et v3 ?
Le format v4 produit un bloc @theme avec des variables --color-nom-50 à --color-nom-950 en oklch(). Le format v3 produit un objet colors à placer dans tailwind.config.js, avec des codes HEX.
Pourquoi ma couleur n’est-elle pas toujours la nuance 500 ?
L’outil place votre couleur sur la nuance dont la luminosité est la plus proche : une couleur claire peut devenir la 200, une couleur foncée la 800. Votre code exact est conservé à cette position et marqué « votre couleur ».