Colori di Tailwind CSS: la palette OKLCH della v4, colori personalizzati e sfumature

Com’è strutturata la palette di colori di Tailwind

La palette predefinita di Tailwind v4.3 ha 26 scale con nome. Diciassette sono cromatiche: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink e rose. Nove sono neutre: slate, gray, zinc, neutral e stone dalla v3, più mauve, olive, mist e taupe aggiunte durante la v4. In più ci sono black e white.

Ogni scala ha le stesse 11 sfumature: 50, 100, da 200 fino a 900, e 950. Il 50 è quasi bianco, il 950 quasi nero. Una classe è formata da utility, colore e sfumatura: bg-blue-500, text-rose-700, border-zinc-200.

Il numero della sfumatura indica una posizione nella scala, non un valore di luminosità. La sfumatura 500 va dal 55,1% di luminosità OKLCH in gray al 79,5% in yellow, ed è per questo che yellow-500 e blue-500 si comportano in modo molto diverso come colori del testo.

Il blu di Tailwind: tutte le sfumature con OKLCH, hex e contrasto

Ecco la scala blue completa come la definisce Tailwind v4. La colonna hex riporta il colore sRGB più vicino, trovato riducendo la croma e mantenendo luminosità e tinta. I rapporti di contrasto sono valori WCAG 2 misurati su quell’hex.

Blue-600 è la prima sfumatura che supera 4,5:1 per il testo normale sul bianco. Blue-500 passa sul nero con 5,58:1 ma fallisce sul bianco con 3,76:1. Nessuna sfumatura di blu supera 4,5:1 su entrambi, quindi tema chiaro e tema scuro richiedono sfumature diverse.

Quali sfumature di Tailwind superano WCAG AA sul bianco

La sfumatura più chiara che supera il test dipende dalla tinta. Orange, amber, yellow, lime, green, emerald, teal, cyan e sky sono ancora chiari al 500, quindi per il testo normale serve il 700. Red, blue, violet, purple, fuchsia, pink e rose passano al 600, indigo già al 500. Yellow è l’eccezione: persino yellow-600 fallisce per il testo grande con 2,93:1.

La luminosità prevede il risultato meglio del numero della sfumatura. Su tutti i 286 colori, ogni sfumatura con luminosità OKLCH sotto il 58% supera 4,5:1 sul bianco, e ogni sfumatura sopra il 59,2% fallisce. Leggi la L nel valore della classe e conosci la risposta prima ancora di testarla.

Tutte le scale neutre tranne olive passano al 500. Olive-500 ha una luminosità del 58% con una tinta giallastra e arriva solo a 4,25:1, quindi il testo gray-500 e il testo olive-500 non sono intercambiabili.

Colori di Tailwind v3 e v4 a confronto

La v3 definiva i colori come valori hex in tailwind.config.js sotto theme.extend.colors. La v4 sposta la configurazione nel CSS: i colori sono variabili del tema dentro @theme, scritte in OKLCH ed esposte come variabili CSS, quindi var(--color-blue-500) funziona nel CSS normale e negli stili inline.

La palette è stata ricalibrata, non ridisegnata. Convertito in OKLCH, blue-500 della v3 (#3b82f6) ha esattamente la stessa luminosità e la stessa tinta di blue-500 della v4. È salita solo la croma, da 0,188 a 0,214. Il resto della scala blue segue lo stesso schema, tranne blue-400, che è diventato anche più scuro di 0,7 punti. Il contrasto cambia appena, mentre i colori appaiono più vivaci.

Quella croma in più va oltre sRGB. 94 dei 286 colori della v4 sono fuori da sRGB e dentro Display P3, tutti cromatici. La scala orange ha 9 sfumature su 11 fuori, la scala blue 4 (da 200 a 500). Su uno schermo P3 vedi il colore pieno, su uno schermo sRGB il browser ne mostra uno vicino. La v4 punta a Safari 16.4, Chrome 111 e Firefox 128 o successivi, che supportano tutti oklch().

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

.card {
    border-color: var(--color-blue-500);
}

Come aggiungere colori personalizzati in Tailwind v4

Dichiara una variabile nel namespace --color- dentro @theme. La parte dopo --color- diventa il nome della classe, quindi --color-brand ti dà bg-brand, text-brand, border-brand, ring-brand e tutte le altre utility di colore, più var(--color-brand) nel CSS. Sono accettati hex, rgb(), hsl() e oklch().

Per sostituire la palette predefinita invece di estenderla, azzera prima il namespace con --color-*: initial, poi definisci solo i colori che ti servono. Le utility vengono generate solo per le classi che usi davvero, quindi la maggior parte dei progetti tiene i colori predefiniti.

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

Un singolo --color-brand va bene per un solo colore d’accento. Appena ti servono stati hover, sfondi tenui o la modalità scura, definisci una scala completa con sfumature numerate.

Come creare una scala personalizzata completa da 50 a 950

La scala qui sotto è stata generata da #e4572e. La sua luminosità del 63,7% corrisponde alla sfumatura 500, quindi il colore del brand resta esattamente al 500. Le altre sfumature seguono la curva di luminosità di Tailwind e mantengono la stessa tinta; la croma raggiunge il massimo tra 500 e 600 e cala verso entrambi gli estremi, e tutte le sfumature rientrano in sRGB, quindi i valori hex sono esatti.

Come le tinte calde di Tailwind, questa scala richiede il 600 per il testo normale sul bianco. Brand-500 dà 3,68:1, sufficiente solo per testo grande e icone.

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

Quando incolli, mantieni la precisione completa. Arrotondare la luminosità allo 0,1% e la croma a tre decimali spinge brand-600 appena fuori da sRGB: non è un problema, ma non corrisponde più esattamente all’hex.

Come funzionano i modificatori di opacità come bg-blue-500/50

Una barra dopo il colore ne imposta l’alfa: bg-blue-500/50 è blue-500 al 50%. La v3 lo compilava in rgb(59 130 246 / 0.5), che funzionava solo con i colori che Tailwind poteva scomporre in canali. I colori personalizzati definiti come variabili CSS richiedevano un formato speciale rgb(var(--brand) / <alpha-value>).

La v4 compila il modificatore in color-mix() in Oklab, mescolando il colore con transparent. Funziona con qualsiasi colore: variabili del tema, valori arbitrari come bg-[#e4572e]/50 e le tue variabili CSS.

L’opacità cambia il contrasto. Sul bianco, blue-500/50 viene reso come #95bfff e blue-500/10 come #eaf2ff. Il testo in blue-600 si legge con 5,25:1, ma text-blue-600/60 scende a 2,62:1 e fallisce anche per il testo grande.

• blue-500#2b7fff
• blue-500/50 sul bianco#95bfff
• blue-500/20 sul bianco#d5e5ff
• blue-500/10 sul bianco#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

Come trovare la classe Tailwind più vicina a qualsiasi hex

Confronta l’hex con tutte le 286 sfumature in base alla distanza percettiva in Oklab (ΔEOK). Sotto circa 0,02 la differenza è difficile da vedere affiancando i due colori, quindi la classe Tailwind può sostituire il tuo colore. Sopra circa 0,04 conviene invece aggiungere un colore personalizzato.

La tabella mostra corrispondenze reali. I vecchi valori hex della v3 riportano alla stessa classe della v4, mentre un tipico arancione di brand come #ff5733 cade tra orange-600 e red-400. La pagina Tailwind di PickShade fa questa ricerca per qualsiasi colore e mostra le tre classi più vicine.

Domande e risposte