Aller au contenu

Couleurs Tailwind CSS : palette complète v4 et v3

Toutes les couleurs de Tailwind CSS, de 50 à 950, avec leurs valeurs officielles en OKLCH (v4) et HEX (v3). Cliquez sur une nuance pour copier sa classe, sa variable CSS ou son code.

Voir les couleurs UI
Version
Copier comme

Nouveaux dans Tailwind v4 : Mauve, Olive, Mist et Taupe, quatre gris teintés.

Valeurs de chaque couleur

Choisissez une couleur pour voir ses onze nuances avec la classe, l'OKLCH, le HEX, le RGB et la couleur de texte qui contraste le mieux.

Blue · Tailwind v4

NuanceClasseOKLCHHEXRGBTexte
50Aa19.3:1
100Aa17.2:1
200Aa14.8:1
300Aa11.6:1
400Aa8.0:1
500Aa5.6:1
600Aa5.2:1
700Aa6.8:1
800Aa8.8:1
900Aa10.4:1
950Aa14.8:1

Tailwind v4 définit ses couleurs en OKLCH et certaines sortent de la plage sRGB. Le HEX est la couleur sRGB la plus proche.

Qu'est-ce que la palette de couleurs de Tailwind CSS

Tailwind CSS inclut une palette de couleurs prédéfinie, organisée en familles nommées (Slate, Red, Blue…) avec onze nuances par famille, de 50 (la plus claire) à 950 (la plus foncée). Cette numérotation est devenue un standard repris par de nombreuses autres bibliothèques.

Chaque couleur s'utilise avec des classes comme bg-blue-500 ou text-red-700. Dans le tableau ci-dessus, vous pouvez copier le nom de la classe, la variable CSS ou le code en HEX, RGB, HSL ou OKLCH.

Quelle nuance utiliser pour quoi

Il n'y a pas de règle fixe, mais la plupart des interfaces faites avec Tailwind suivent un schéma similaire au sein de chaque famille :

50–100
Fonds. Surfaces douces, cartes et zones mises en avant.
200–300
Bordures. Séparateurs, bordures de champs et états désactivés.
500–600
Action. Boutons, liens et éléments actifs. Le 600 contraste généralement mieux avec du texte blanc.
700–900
Texte. Titres et texte sur des fonds clairs de la même famille.
950
Mode sombre. Fonds sombres avec une pointe de couleur au lieu du noir pur.

Tailwind v3 et v4 : ce qui change dans les couleurs

La numérotation et les noms sont les mêmes, mais pas les valeurs : la v4 a recalibré toute la palette. C'est pourquoi cette page affiche séparément les valeurs officielles de chaque version.

blue-500 = oklch(62.3% 0.214 259.815)

Tailwind v4

  • Couleurs définies en OKLCH, avec des pas de clarté plus réguliers.
  • Nuances plus vives, pensées pour les écrans à gamut étendu (Display P3).
  • Chaque couleur existe comme variable CSS : var(--color-blue-500).
  • Quatre nouveaux gris teintés : Mauve, Olive, Mist et Taupe.

blue-500 = #3b82f6

Tailwind v3

  • Couleurs définies en HEX (sRGB).
  • 22 familles : 5 gris et 17 couleurs.
  • S'utilisent avec des classes ou avec la fonction theme('colors.blue.500').
  • Reste la version de nombreux projets existants.

Utiliser les couleurs Tailwind dans votre CSS

En plus des classes, vous pouvez utiliser n'importe quelle couleur de la palette dans votre propre CSS. En v4, ce sont des variables CSS normales ; en v3, on y accède avec la fonction theme().

Tailwind v4

@import "tailwindcss";

.card {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

@theme {
  --color-brand-500: oklch(62.3% 0.214 259.815);
}

Tailwind v3

.card {
  background: theme('colors.blue.50');
  border: 1px solid theme('colors.blue.200');
  color: theme('colors.blue.900');
}

Pour ajouter votre propre couleur en v4, déclarez-la dans @theme avec le préfixe --color- et vous obtiendrez automatiquement ses classes (bg-brand-500, text-brand-500…).

Questions fréquentes

Les noms et la numérotation sont identiques, mais la v4 a recalibré la palette en OKLCH : les nuances sont un peu plus vives et les pas de clarté plus réguliers. C'est pourquoi le HEX de blue-500 n'est pas le même dans les deux versions. La v4 ajoute aussi quatre nouveaux gris : Mauve, Olive, Mist et Taupe.

C'est l'échelle standard de Tailwind : 50 est la nuance la plus claire (presque blanche) et 950 la plus foncée (presque noire), avec des pas intermédiaires pensés pour couvrir fonds, textes, bordures et états de façon cohérente dans toute une interface.

Dans Tailwind v4, chaque couleur est disponible comme variable CSS, par exemple var(--color-blue-500). En v3, on utilise la fonction theme('colors.blue.500') dans ses fichiers CSS.

Tailwind v4 définit ses couleurs en OKLCH, et certaines sortent de la plage sRGB qu'un code HEX peut représenter. Dans ces cas, nous affichons le HEX le plus proche ; si votre projet accepte OKLCH, utilisez cette valeur pour obtenir la couleur exacte.

La colonne « Texte » de chaque couleur indique si le blanc ou le noir contraste le mieux, avec son ratio. Pour référence, le texte normal demande au moins 4,5:1 ; vous pouvez vérifier n'importe quelle combinaison dans le vérificateur de contraste.

OKLCH est un espace colorimétrique où la luminosité est calculée de façon perceptuelle : deux couleurs de même clarté paraissent aussi claires à l'œil humain. Cela donne des échelles de couleurs plus régulières que celles basées sur le RGB traditionnel.