# Couleurs Tailwind : utiliser et étendre la palette

[Canonical HTML page](https://gradiently.design/fr/guide/tailwind-colors)

La palette par défaut est un bon point de départ et un mauvais point d’arrivée, car des milliers de sites la partagent. Voici comment fonctionnent les couleurs Tailwind en v4, et comment ajouter les vôtres sans rien casser.

## The short version

- Les couleurs Tailwind sont des familles nommées comme blue, violet et slate, chacune avec des nuances de 50 pour la plus claire à 950 pour la plus sombre.
- Dans Tailwind v4, chaque couleur est une variable CSS comme `--color-blue-500`, définie en OKLCH, et vous ajoutez ou remplacez des couleurs dans un bloc `@theme` de votre CSS.
- Toute variable nommée `--color-quelquechose` dans `@theme` devient un ensemble complet d’utilitaires, dont `bg-quelquechose`, `text-quelquechose` et `border-quelquechose`.
- Le modificateur d’opacité, comme dans `bg-sky-500/50`, fonctionne aussi avec les couleurs personnalisées, car la v4 mélange la transparence avec `color-mix()`.
- Le contraste dépend de la paire, pas du numéro de nuance : vérifiez les combinaisons texte et fond plutôt que de supposer que 500 sur blanc est lisible.

Les **couleurs Tailwind** forment un ensemble de familles nommées, de red à rose, plus une série de gris comme slate, gray, zinc, neutral et stone, chacune avec onze nuances numérotées 50, 100 à 900 par centaines, et 950. Vous les appliquez avec des utilitaires comme `bg-blue-600`, `text-slate-900` et `border-rose-300`. Dans Tailwind v4, toute la palette est définie en OKLCH sous forme de variables CSS, que vous étendez ou remplacez dans un bloc `@theme` plutôt que dans un fichier de configuration JavaScript.

## Comment la palette par défaut est organisée

Chaque famille suit la même échelle. De 50 à 200, ce sont des teintes claires pour les fonds et les survols, 300 et 400 sont des accents doux, 500 et 600 le cœur saturé, et de 700 à 950 servent au texte, aux bordures et aux surfaces sombres. Comme chaque famille utilise les mêmes paliers, remplacer `blue` par `violet` dans un composant fonctionne en général tout seul.

- blue-100: #dbeafe
- blue-200: #bfdbfe
- blue-300: #93c5fd
- blue-400: #60a5fa
- blue-500: #3b82f6
- blue-600: #2563eb
- blue-700: #1d4ed8
- blue-800: #1e40af
- blue-900: #1e3a8a
- blue-950: #172554

La famille blue en hexadécimal sRGB, issue de la palette v3. Les valeurs v4 sont écrites en OKLCH et un peu plus vives sur les écrans à gamut étendu, mais l’échelle est la même.

| Groupe | Familles | Usage typique |
| --- | --- | --- |
| Gris | slate, gray, zinc, neutral, stone | Texte, bordures, surfaces |
| Chaudes | red, orange, amber, yellow | Alertes, avertissements, énergie |
| Verts | lime, green, emerald, teal | Succès, nature, calme |
| Bleus | cyan, sky, blue, indigo | Liens, actions principales |
| Violets et roses | violet, purple, fuchsia, pink, rose | Accents, marques créatives |

Les familles par défaut regroupées par température. Slate et zinc tirent vers le froid, stone vers le chaud, neutral n’a aucune teinte.

Choisissez un seul gris et tenez-vous-y. Mélanger un texte `gray-500` avec des bordures `slate-200` donne un aspect vaguement sale, difficile à nommer et facile à éviter.

## Utiliser les couleurs Tailwind dans votre balisage

Il existe des utilitaires de couleur pour presque toutes les propriétés qui prennent une couleur : `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `decoration-*`, `shadow-*`, `accent-*`, `caret-*` et les arrêts de dégradé `from-*`, `via-*` et `to-*`. Ajoutez une barre oblique et un nombre pour régler l’opacité.

```html
<div class="rounded-xl bg-slate-900 p-6 text-slate-100">
  <p class="text-sm text-slate-400">Status</p>
  <p class="text-2xl font-semibold">All systems normal</p>
  <span class="mt-4 inline-flex rounded-full bg-emerald-500/15 px-3 py-1 text-emerald-300">
    Live
  </span>
</div>

<!-- One off values when nothing in the palette fits -->
<button class="bg-[#0b5c4a] text-[oklch(97%_0.02_160)]">Book a table</button>
```

Une carte sombre tirée d’une seule famille de gris, plus un accent à 15 % d’opacité. Les valeurs arbitraires entre crochets couvrent la rare exception.

En v4, chaque nuance est aussi une variable utilisable en CSS classique : `color: var(--color-slate-400)`. Cela facilite le style de widgets tiers, de SVG ou d’un canvas avec les mêmes couleurs que vos utilitaires.

## Ajouter des couleurs personnalisées dans Tailwind v4

En v4, vous configurez le thème en CSS. Toute variable qui commence par `--color-` dans `@theme` devient une couleur, avec tous ses utilitaires générés. Nommez les couleurs par rôle ou par marque, et donnez-leur une échelle complète si vous aurez besoin de nuances.

```css
@import "tailwindcss";

@theme {
  /* A brand ramp on one hue, written in OKLCH */
  --color-ember-50: oklch(97% 0.02 45);
  --color-ember-100: oklch(94% 0.04 45);
  --color-ember-200: oklch(88% 0.07 45);
  --color-ember-300: oklch(80% 0.11 45);
  --color-ember-400: oklch(71% 0.15 45);
  --color-ember-500: oklch(63% 0.17 45);
  --color-ember-600: oklch(55% 0.16 45);
  --color-ember-700: oklch(47% 0.14 45);
  --color-ember-800: oklch(39% 0.11 45);
  --color-ember-900: oklch(31% 0.08 45);
  --color-ember-950: oklch(22% 0.05 45);

  /* Single role colours */
  --color-ink: oklch(18% 0.02 270);
  --color-paper: oklch(98% 0.01 85);
}
```

Désormais `bg-ember-500`, `text-ink`, `border-ember-200/60` et `from-ember-400` existent tous.

- ember-50: #fff1ea
- ember-200: #ffcab2
- ember-300: #f9a782
- ember-400: #ec7f4b
- ember-500: #d95f19
- ember-600: #b94a00
- ember-700: #973900
- ember-900: #502007
- ember-950: #2d1205

L’échelle ember ci-dessus, convertie en hexadécimal. Garder la teinte à 45 et faire varier la luminosité par paliers rend chaque nuance reconnaissable comme la même couleur.

Construire l’échelle en OKLCH, c’est ce qui fait que cela marche. En OKLCH, la luminosité correspond à la clarté perçue d’une couleur, donc des paliers égaux paraissent égaux, ce que le HSL ne peut pas promettre. [OKLCH expliqué](https://gradiently.design/fr/guide/oklch-explained) va plus loin, et [oklch.com](https://oklch.com) est un bon endroit pour essayer des valeurs.

### Remplacer entièrement la palette

Pour supprimer les couleurs par défaut et ne garder que les vôtres, réinitialisez d’abord l’espace de noms avec `--color-*: initial;` en haut de `@theme`. Des utilitaires comme `bg-blue-500` cesseront alors d’exister, ce qui est un garde-fou utile sur un projet à la marque stricte.

## Couleurs personnalisées dans Tailwind v3

Les projets plus anciens configurent encore les couleurs en JavaScript. Utilisez `extend` pour ajouter des couleurs à côté de celles par défaut, ou définissez `colors` directement pour les remplacer.

```js
// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        ember: {
          50: '#fff1ea',
          500: '#d95f19',
          900: '#502007',
        },
        ink: '#14121f',
      },
    },
  },
}
```

La méthode v3. Lors de la mise à niveau, ces couleurs passent dans `@theme` sous la forme `--color-ember-500` et ainsi de suite.

## Contraste : quelles nuances sont sûres pour le texte

Les numéros de nuance ne sont pas une échelle de contraste. Un texte blanc sur `blue-600` atteint le 4,5:1 que les WCAG demandent pour le texte courant, alors qu’un texte blanc sur `blue-500` ne l’atteint pas. Vérifiez la paire réelle, avec les ratios ci-dessous ou un outil de [WebAIM](https://webaim.org/resources/contrastchecker/), et lisez [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) pour les règles.

| Texte sur fond | Contraste | Texte courant |
| --- | --- | --- |
| slate-900 sur blanc | 17,85:1 | Réussi |
| gray-500 sur blanc | 4,83:1 | Réussi, de justesse |
| gray-400 sur blanc | 2,54:1 | Échoue |
| blanc sur blue-600 | 5,17:1 | Réussi |
| blanc sur blue-500 | 3,68:1 | Grand texte seulement |
| slate-400 sur slate-900 | 6,96:1 | Réussi |

Ratios calculés à partir des valeurs hexadécimales v3. Recalculez-les pour vos couleurs v4 exactes, qui diffèrent légèrement.

## Faites de la palette la vôtre

La palette par défaut est utilisée sur un nombre immense de sites, c’est pourquoi tant de produits partagent le même bouton `indigo-600` et le même fond `slate-50`. Cette uniformité est la version web de [pourquoi tous les fils se ressemblent](https://gradiently.design/fr/guide/why-every-feed-looks-the-same).

### Ressemble à tous les autres sites

- L’indigo ou le bleu par défaut comme couleur de marque
- Plusieurs familles de gris mélangées
- La couleur d’accent utilisée partout
- Les couleurs du thème clair reprises en mode sombre

### Vous ressemble

- Une échelle personnalisée sur votre propre teinte
- Un seul gris, teinté vers la couleur de la marque
- L’accent réservé aux actions et à un seul point fort
- Un jeu sombre choisi à part, voir [les dégradés en mode sombre](https://gradiently.design/fr/guide/dark-mode-gradients)

1. **Choisissez une teinte** Partez de votre couleur de marque et lisez sa teinte en OKLCH. [Les palettes de couleurs pour site web](https://gradiently.design/fr/guide/website-color-scheme) aident si vous n’en avez pas encore.
2. **Construisez l’échelle** Gardez la teinte, faites varier la luminosité d’environ 97 % à 22 %, et baissez la chroma aux deux extrémités.
3. **Nommez aussi les rôles** Ajoutez `--color-ink`, `--color-paper` et d’autres du même genre, pour que les composants disent à quoi sert une couleur.
4. **Gardez une seule source** Traitez le bloc `@theme` comme vos [design tokens](https://gradiently.design/fr/guide/design-tokens), et réutilisez les mêmes valeurs dans vos visuels.

C’est à la dernière étape que les marques dérivent souvent : le site reçoit la nouvelle échelle tandis que les posts et les présentations gardent les couleurs de l’an dernier. Un kit de marque Gradiently range vos palettes avec vos polices et vos logos, pour que le Designer mette en page les posts dans les couleurs de votre thème Tailwind, et un Mark donne à la marque un style en dégradé qu’aucun autre site ne partage.

## FAQ

### Quelles couleurs Tailwind propose-t-il par défaut ?

Des familles allant de red, orange, amber et yellow aux verts, bleus, violets et roses jusqu’à rose, plus des gris dont slate, gray, zinc, neutral et stone. Chacune a les nuances 50, 100 à 900 et 950, plus black et white.

### Comment ajouter des couleurs personnalisées dans Tailwind v4 ?

Définissez des variables comme `--color-brand-500` dans un bloc `@theme` de votre CSS. Tailwind en génère `bg-brand-500`, `text-brand-500` et tous les autres utilitaires de couleur.

### Tailwind utilise-t-il OKLCH ?

Oui. Depuis la v4, la palette par défaut est définie en OKLCH, et vous pouvez écrire vos propres couleurs en OKLCH, en hexadécimal, en RGB ou dans tout autre format de couleur CSS.

### Comment utiliser une couleur Tailwind en CSS classique ?

En v4, utilisez directement la variable, par exemple `var(--color-slate-400)`. En v3, utilisez la fonction `theme()`, comme `theme(colors.slate.400)`.

### Quelles nuances Tailwind sont accessibles pour le texte ?

Cela dépend de la paire. Sur blanc, gray-500 et plus sombre conviennent au texte courant, et un texte blanc passe sur blue-600 mais pas sur blue-500 : vérifiez toujours la combinaison précise.