FrançaisFR

Générateur de nuancier pour Tailwind CSS – 50 à 950

Choisissez une couleur de base et un nom : vous obtenez toutes les nuances de 50 à 950 et la configuration prête à l’emploi.

Vos textes et fichiers restent dans votre navigateur : rien n’est envoyé à un serveur.

Cliquez sur une nuance pour copier sa valeur HEX. Le nombre indique le contraste de la couleur de texte la plus lisible (blanc ou noir) sur ce fond.

Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
Aperçu
Enregistré. Vos modifications sont maintenant actives.
CommencerEn savoir plusNouveau

Mode d’emploi

  1. Choisissez une couleur de base ou saisissez un code HEX, puis indiquez le nom que vous utiliserez dans les classes, par exemple brand.
  2. Les nuances de 50 (la plus claire) à 950 (la plus foncée) sont réparties selon la luminosité OKLCH. Si « Garder ma couleur dans la nuance la plus proche » est activé, votre couleur apparaît telle quelle dans la palette.
  3. Pour la v4, collez le bloc @theme dans votre CSS ; pour la v3, la section colors dans tailwind.config.js. Vous pouvez ensuite utiliser des classes comme bg-brand-500.
  4. L’aperçu montre la palette appliquée à un bouton, un badge et un message d’alerte.

Questions fréquentes

Pourquoi la palette est-elle calculée en OKLCH ?

OKLCH repose sur la luminosité perçue. Les nuances paraissent ainsi régulières, et des couleurs comme le jaune et le bleu ne font pas de sauts de luminosité. Les couleurs par défaut de Tailwind v4 sont d’ailleurs définies en oklch().

Est-ce identique aux couleurs intégrées de Tailwind ?

Non. L’outil utilise ses propres courbes de luminosité et de saturation (chroma) : les valeurs diffèrent donc de la palette officielle. Il sert à construire rapidement une échelle du même genre à partir de votre propre couleur de marque.

Que deviennent les couleurs que l’écran ne peut pas afficher ?

La luminosité et la teinte sont conservées, seule la saturation est réduite jusqu’à ce que la couleur tienne dans le sRGB. Les couleurs très saturées peuvent donc paraître un peu plus douces dans certaines nuances.

Tailwind CSS est une marque de Tailwind Labs Inc. Cet outil n’est ni affilié à Tailwind Labs ni approuvé par cette société.

Outils similaires

Sélecteur de couleurHEX, RGB, HSL et CMJN d’un coup d’œilVérificateur de contrasteRatio de contraste, niveaux AA et AAADégradé CSSDégradés linéaires, radiaux, coniquesGénérateur d’ASCII artTexte et photos en caractères

Tous les outils