Couleurs Tailwind : utiliser et étendre la palette

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.

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é.

<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>

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.

@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);
}

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é va plus loin, et 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.

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

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, et lisez contraste des couleurs et accessibilité pour les règles.

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.

1. 1

   Choisissez une teinte

   Partez de votre couleur de marque et lisez sa teinte en OKLCH. Les palettes de couleurs pour site web aident si vous n’en avez pas encore.

2. 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. 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. 4

   Gardez une seule source

   Traitez le bloc @theme comme vos 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.