# Colori Tailwind: usare ed estendere la palette

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

La palette predefinita è un buon punto di partenza e un cattivo punto d’arrivo, perché la condividono migliaia di siti. Ecco come funzionano i colori Tailwind nella v4 e come aggiungere i tuoi senza rompere nulla.

## The short version

- I colori Tailwind sono famiglie con nome come blue, violet e slate, ciascuna con tonalità da 50, la più chiara, a 950, la più scura.
- In Tailwind v4 ogni colore è una variabile CSS come `--color-blue-500`, definita in OKLCH, e aggiungi o sostituisci colori dentro un blocco `@theme` nel tuo CSS.
- Ogni variabile che chiami `--color-qualcosa` in `@theme` diventa un set completo di utility, tra cui `bg-qualcosa`, `text-qualcosa` e `border-qualcosa`.
- Il modificatore di opacità, come in `bg-sky-500/50`, funziona anche con i colori personalizzati, perché la v4 mescola la trasparenza con `color-mix()`.
- Il contrasto dipende dalla coppia, non dal numero della tonalità, quindi controlla le combinazioni di testo e sfondo invece di dare per scontato che il 500 su bianco sia leggibile.

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.

- 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 famiglia blue in hex sRGB, dalla palette della v3. I valori della v4 sono scritti in OKLCH e sono un po’ più vividi sugli schermi a gamma ampia, ma la scala è la stessa.

| Gruppo | Famiglie | Uso tipico |
| --- | --- | --- |
| Grigi | slate, gray, zinc, neutral, stone | Testo, bordi, superfici |
| Caldi | red, orange, amber, yellow | Avvisi, allerte, energia |
| Verdi | lime, green, emerald, teal | Successo, natura, calma |
| Blu | cyan, sky, blue, indigo | Link, azioni principali |
| Viola e rosa | violet, purple, fuchsia, pink, rose | Accenti, brand creativi |

Le famiglie predefinite raggruppate per temperatura. Slate e zinc tendono al freddo, stone al caldo, neutral non ha alcuna tinta.

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

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

Una scheda scura con una sola famiglia di grigi più un accento al 15% di opacità. I valori arbitrari tra parentesi quadre coprono la rara eccezione.

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.

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

Ora esistono `bg-ember-500`, `text-ink`, `border-ember-200/60` e `from-ember-400`.

- 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

La scala ember qui sopra, convertita in hex. Tenere la tinta a 45 e variare la luminosità mantiene ogni tonalità riconoscibilmente lo stesso colore.

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](https://gradiently.design/it/guide/oklch-explained) approfondisce, e [oklch.com](https://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.

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

Il modo della v3. Quando aggiorni, questi passano in `@theme` come `--color-ember-500` e così via.

## 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](https://webaim.org/resources/contrastchecker/), e leggi [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) per le regole.

| Testo su sfondo | Contrasto | Testo normale |
| --- | --- | --- |
| slate-900 su bianco | 17,85:1 | Supera |
| gray-500 su bianco | 4,83:1 | Supera, per poco |
| gray-400 su bianco | 2,54:1 | Non supera |
| bianco su blue-600 | 5,17:1 | Supera |
| bianco su blue-500 | 3,68:1 | Solo testo grande |
| slate-400 su slate-900 | 6,96:1 | Supera |

Rapporti calcolati dai valori hex della v3. Rifalli per i tuoi colori esatti della v4, che differiscono leggermente.

## 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](https://gradiently.design/it/guide/why-every-feed-looks-the-same).

### Sembra ogni altro sito

- Indaco o blu predefinito come colore del brand
- Più famiglie di grigi mescolate
- Colore d’accento usato su tutto
- Colori del tema chiaro riutilizzati nella modalità scura

### Sembra te

- Una scala personalizzata sulla tua tinta
- Un solo grigio, virato verso la tinta del brand
- Accento riservato alle azioni e a un’evidenziazione
- Un set scuro scelto a parte, vedi [sfumature per la modalità scura](https://gradiently.design/it/guide/dark-mode-gradients)

1. **Scegli una tinta** Parti dal colore del tuo brand e leggine la tinta in OKLCH. [Gli schemi di colori per un sito](https://gradiently.design/it/guide/website-color-scheme) aiutano se non ne hai ancora uno.
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. **Dai il nome anche ai ruoli** Aggiungi `--color-ink`, `--color-paper` e simili, così i componenti dicono a cosa serve un colore.
4. **Tieni una sola fonte** Tratta il blocco `@theme` come i tuoi [design token](https://gradiently.design/it/guide/design-tokens) 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.

## FAQ

### Quali colori ci sono in Tailwind per impostazione predefinita?

Famiglie da red, orange, amber e yellow, passando per verdi, blu, viola e rosa fino a rose, più grigi tra cui slate, gray, zinc, neutral e stone. Ognuna ha le tonalità 50, da 100 a 900 e 950, più nero e bianco.

### Come aggiungo colori personalizzati in Tailwind v4?

Definisci variabili come `--color-brand-500` dentro un blocco `@theme` nel tuo CSS. Tailwind genera da lì `bg-brand-500`, `text-brand-500` e ogni altra utility di colore.

### Tailwind usa OKLCH?

Sì. Dalla v4 la palette predefinita è definita in OKLCH, e puoi scrivere i tuoi colori in OKLCH, hex, RGB o qualsiasi altro formato di colore CSS.

### Come uso un colore Tailwind nel CSS semplice?

Nella v4 usa direttamente la variabile, per esempio `var(--color-slate-400)`. Nella v3 usa la funzione `theme()`, come `theme(colors.slate.400)`.

### Quali tonalità Tailwind sono accessibili per il testo?

Dipende dalla coppia. Su bianco, gray-500 e più scuri vanno bene per il testo normale, e il testo bianco supera il controllo su blue-600 ma non su blue-500, quindi controlla sempre la combinazione specifica.