# Tinte, toni e ombre: come costruire una scala di colori

[Canonical HTML page](https://gradiently.design/it/guide/tints-tones-shades)

Un solo colore del brand non basta mai per progettare. Tinte, toni e ombre lo trasformano in un’intera famiglia, e una buona scala è ciò che permette a una palette di reggere testo, pulsanti, sfondi e grafici.

## The short version

- Tinte, toni e ombre sono tre modi di variare un colore: la tinta aggiunge bianco, il tono aggiunge grigio e l’ombra aggiunge nero.
- Le tinte sembrano più chiare e morbide, i toni più calmi e smorzati, le ombre più profonde e più serie.
- Una scala di colori è una riga di tinte e ombre di una sola tonalità, di solito numerata da 50 o 100 per la più chiara a 900 per la più scura.
- Mescolare in uno spazio colore percettivo come OKLCH mantiene i passi di una scala visivamente equidistanti.
- Una buona scala dà a ogni passo un compito, come sfondi, bordi, testo e stati al passaggio del mouse, e verifica il contrasto tra i passi che si incontreranno.

**Tinte, toni e ombre** sono i tre modi di cambiare un colore senza cambiarne la tonalità. Una **tinta** è il colore mescolato con il bianco, quindi diventa più chiaro e morbido. Un’**ombra** è il colore mescolato con il nero, quindi diventa più profondo. Un **tono** è il colore mescolato con il grigio, quindi diventa più quieto e smorzato. Pensa a tinte, toni e ombre come bianco, grigio e nero aggiunti a una sola tonalità. Metti in fila una serie di tinte e ombre e hai una scala di colori: lo strumento che trasforma un solo colore del brand in qualcosa con cui si può davvero progettare.

## Tinta, tono e ombra a confronto

Il modo più semplice per vedere la differenza è partire da un colore e spingerlo in tre direzioni. Qui la base è un viola, `#7c3aed`, mescolato a passi del 20 per cento.

| Tipo | Mescolato con | Effetto | Esempio da #7c3aed |
| --- | --- | --- | --- |
| Tinta | Bianco | Più chiaro, morbido, arioso | `#b089f4` con il 40 per cento di bianco |
| Tono | Grigio | Smorzato, più calmo, più naturale | `#7e64ac` con il 60 per cento di grigio |
| Ombra | Nero | Più profondo, pesante, serio | `#4a238e` con il 40 per cento di nero |

La tonalità resta viola in ogni caso. Cambiano solo luminosità e saturazione.

- Tinta 90%: #f2ebfd
- Tinta 60%: #cbb0f8
- Tinta 20%: #9661f1
- Viola base: #7c3aed
- Ombra 20%: #632ebe
- Ombra 60%: #32175f
- Ombra 80%: #190c2f

Tinte a sinistra, ombre a destra. Questa riga è già gran parte di una scala usabile.

- Viola base: #7c3aed
- Tono 20%: #7d48d7
- Tono 40%: #7e56c1
- Tono 60%: #7e64ac
- Tono 80%: #7f7296

I toni mantengono più o meno la stessa luminosità e drenano colore, ed è per questo che le palette a base di toni sembrano calme e adulte.

## Cosa fanno tinte, toni e ombre a un design

Ogni direzione cambia l’atmosfera tanto quanto il colore. Le tinte sembrano gentili, giovani e aperte, ed è per questo che le [palette di colori pastello](https://gradiently.design/it/guide/pastel-color-palettes) sono quasi tutte tinte. Le ombre sembrano ricche, serie e premium, il territorio delle [palette di colori scuri](https://gradiently.design/it/guide/dark-color-palettes). I toni sembrano adulti e naturali, la base di quasi ogni [palette di colori smorzati](https://gradiently.design/it/guide/muted-color-palettes).

- Tinte: morbide e aperte: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Toni: calmi e adulti: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Ombre: profonde e serie: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Lo stesso viola spinto in tre direzioni. Le tinte alzano l’atmosfera, i toni la quietano e le ombre le danno peso.

## Come costruire una scala di colori da un hex

La maggior parte dei design system numera la scala da 50 o 100 (la più chiara) a 900 (la più scura), con il colore del brand da qualche parte vicino a 500. Conta più la coerenza dei numeri: ogni colore del sistema dovrebbe avere gli stessi passi, così `200` significa sempre uno sfondo chiaro e `700` significa sempre testo. Cinque passi scelti bene battono undici che nessuno distingue, e puoi aggiungere i passi intermedi quando i design reali mostrano dove mancano.

1. **Colloca il colore del brand** Decidi a quale passo appartiene. Un colore medio come `#7c3aed` sta a 500; un blu notte del brand molto scuro potrebbe stare a 800.
2. **Costruisci l’estremo chiaro** Mescola verso il bianco per i passi da 400 a 50. Il passo più chiaro dovrebbe essere appena colorato, abbastanza chiaro per lo sfondo di una pagina.
3. **Costruisci l’estremo scuro** Mescola verso il nero per i passi da 600 a 900. Il passo più scuro dovrebbe essere abbastanza scuro per il testo corrente su quello più chiaro.
4. **Uniforma i passi** Guarda la riga da lontano. Se due vicini sembrano quasi identici e un altro salto sembra uno scalino, correggi a occhio.
5. **Sposta leggermente la tonalità agli estremi** Il nero puro può far sembrare sporche le ombre. Molti designer spostano i passi scuri di qualche grado verso il blu o il viola e quelli chiari verso il caldo.
6. **Verifica le coppie che si incontreranno** Prova i passi del testo sui passi dello sfondo per il contrasto, usando [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) come guida.

| Passo | Hex | Compito tipico |
| --- | --- | --- |
| 50 | `#f2ebfd` | Sfondo di pagina o card |
| 100 | `#e5d8fb` | Riempimenti sottili, righe selezionate |
| 200 | `#cbb0f8` | Bordi, divisori, stati disattivati |
| 400 | `#9661f1` | Icone, grandi forme decorative |
| 500 | `#7c3aed` | Colore del brand, pulsanti primari |
| 600 | `#632ebe` | Pulsante al passaggio del mouse, link |
| 700 | `#4a238e` | Titoli su sfondi chiari |
| 800 | `#32175f` | Testo corrente sulle tinte |
| 900 | `#190c2f` | Sfondo in modalità scura |

Una scala di viola con un compito per ogni passo. Il bianco su 500 è circa 5,7:1 e il passo 800 sul passo 100 circa 10,9:1, entrambi sopra la soglia di 4,5:1.

## Creare tinte e ombre in CSS

Non serve più calcolare a mano ogni passo. La funzione CSS `color-mix()` mescola due colori in uno spazio colore a scelta, così un’intera scala può dipendere da una sola variabile. Mescolare in OKLCH mantiene i passi più uniformi all’occhio rispetto al semplice sRGB, come spiega [OKLCH spiegato](https://gradiently.design/it/guide/oklch-explained). Il supporto dei browser è ampio; per i dettagli vedi [color-mix() su MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix).

```css
:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}
```

Cambia `--brand` e ogni tinta, ombra e tono si aggiorna con lui.

## Tinte e ombre nei gradienti

I gradienti più puliti sono spesso una sola tonalità che passa da tinta a ombra. Poiché nulla attraversa la ruota dei colori, non c’è una banda grigia nel mezzo, e il risultato si legge come luce che cade su un solo materiale. Gli [schemi di colori monocromatici](https://gradiently.design/it/guide/monochromatic-color-scheme) usano la stessa idea per intere palette.

- Viola, da tinta a ombra: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Viola, illuminato dall’alto: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terracotta, da tinta a ombra: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Tinta lilla a tono viola: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Sfumature di una sola tonalità. Ognuna attinge solo dalla propria scala.

Un Mark di Gradiently funziona in modo simile: una ricetta di colori imparentati con la luce che li attraversa. Quando progetti su uno, i colori vicino alle tue parole si approfondiscono o si alleggeriscono perché il testo resti leggibile senza un riquadro dietro.

## FAQ

### Che differenza c’è tra tinta, tono e ombra?

Una tinta è un colore mescolato con il bianco, un tono è un colore mescolato con il grigio e un’ombra è un colore mescolato con il nero.

### Un pastello è una tinta?

Sì. I pastelli sono tinte: colori schiariti con molto bianco, il che li rende morbidi e di bassa intensità.

### Quanti passi deve avere una scala di colori?

La maggior parte dei design system usa da nove a undici passi, numerati da 50 o 100 a 900. Meno passi possono andare bene per progetti piccoli, purché ognuno abbia un compito chiaro.

### Come faccio un’ombra più scura di un colore in CSS?

Usa `color-mix(in oklch, tuocolore 70%, black)` e regola la percentuale. Percentuali più basse danno ombre più scure.

### Perché le mie ombre sembrano sporche?

Mescolare con il nero puro toglie anche saturazione. Mescola in OKLCH e prova a spostare leggermente i passi più scuri verso il blu o il viola per mantenerli ricchi.