Colori Tailwind: usare ed estendere la palette

I colori Tailwind sono un insieme di famiglie con nome, da red a rose più una serie di grigi come slate, gray, zinc, neutral e stone, ciascuna con undici tonalità numerate 50, da 100 a 900 a passi di cento, e 950. Li applichi con utility come bg-blue-600, text-slate-900 e border-rose-300. In Tailwind v4 l’intera palette è definita in OKLCH come variabili CSS, che estendi o sostituisci in un blocco @theme invece che in un file di configurazione JavaScript.

Come è organizzata la palette predefinita

Ogni famiglia segue la stessa scala. Da 50 a 200 sono tinte per sfondi e riempimenti al passaggio del mouse, 300 e 400 sono accenti morbidi, 500 e 600 sono il centro saturo, e da 700 a 950 servono per testo, bordi e superfici scure. Dato che ogni famiglia usa gli stessi passi, sostituire blue con violet in un componente di solito funziona senza altro.

Scegli un solo grigio e tienilo. Mescolare un testo gray-500 con bordi slate-200 dà un aspetto vagamente sporco, difficile da definire e facile da evitare.

Usare i colori Tailwind nel markup

Esistono utility di colore per quasi ogni proprietà che accetta un colore: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* e i punti della sfumatura from-*, via-* e to-*. Aggiungi una barra e un numero per impostare 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>

Nella v4 ogni tonalità è anche una variabile che puoi usare nel CSS semplice: color: var(--color-slate-400). Così è facile stilizzare widget di terzi, SVG o un canvas con gli stessi colori delle tue utility.

Aggiungere colori personalizzati in Tailwind v4

Nella v4 configuri il tema nel CSS. Ogni variabile che inizia con --color- dentro @theme diventa un colore, con tutte le utility generate per lui. Dai ai colori il nome di un ruolo o del brand, e dagli una scala completa se ti serviranno le tinte.

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

Costruire la scala in OKLCH è il motivo per cui funziona. La luminosità in OKLCH corrisponde a quanto un colore appare luminoso, quindi passi uguali sembrano uguali, cosa che l’HSL non garantisce. OKLCH spiegato approfondisce, e oklch.com è un buon posto per provare i valori.

Sostituire del tutto la palette

Per eliminare i colori predefiniti e tenere solo i tuoi, azzera prima lo spazio dei nomi con --color-*: initial; all’inizio di @theme. Utility come bg-blue-500 smetteranno di esistere, una protezione utile in un progetto con un brand rigoroso.

Colori personalizzati in Tailwind v3

I progetti più vecchi configurano ancora i colori in JavaScript. Usa extend per aggiungere colori accanto a quelli predefiniti, oppure imposta colors direttamente per sostituirli.

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

Contrasto: quali tonalità vanno bene per il testo

I numeri delle tonalità non sono una scala di contrasto. Il testo bianco su blue-600 supera il 4,5:1 che le WCAG chiedono per il testo normale, mentre il bianco su blue-500 no. Controlla la coppia reale, usando i rapporti qui sotto o uno strumento di WebAIM, e leggi contrasto dei colori e accessibilità per le regole.

Fai tua la palette

La palette predefinita è usata da un numero enorme di siti, ed è per questo che tanti prodotti condividono lo stesso pulsante indigo-600 e lo stesso sfondo slate-50. Quell’uniformità è la versione web di perché tutti i feed si assomigliano.

1. 1

   Scegli una tinta

   Parti dal colore del tuo brand e leggine la tinta in OKLCH. Gli schemi di colori per un sito aiutano se non ne hai ancora uno.

2. 2

   Costruisci la scala

   Mantieni la tinta, varia la luminosità da circa il 97% al 22% e abbassa la saturazione a entrambe le estremità.

3. 3

   Dai il nome anche ai ruoli

   Aggiungi --color-ink, --color-paper e simili, così i componenti dicono a cosa serve un colore.

4. 4

   Tieni una sola fonte

   Tratta il blocco @theme come i tuoi design token e riusa gli stessi valori nelle tue grafiche.

L’ultimo passo è dove i brand di solito deviano: il sito riceve la nuova scala mentre i post social e le slide tengono i colori dell’anno scorso. Un kit del brand di Gradiently conserva le tue palette insieme a font e loghi, così il Designer impagina i post negli stessi colori del tuo tema Tailwind, e un Mark dà al brand un aspetto sfumato che nessun altro sito condivide.