# Saturazione nel design: quando alzare o abbassare il colore

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

La saturazione è la manopola tra vivido e grigio, e cambia quanto un design sembra rumoroso, economico, calmo o costoso. Ecco quando alzarla, quando abbassarla e i codici per farlo.

## The short version

- La saturazione nel design è l’intensità di un colore, da completamente vivido a completamente grigio, indipendente dalla sua tinta.
- L’alta saturazione attira l’attenzione e dà energia, quindi funziona meglio in aree piccole come pulsanti, accenti ed evidenziazioni.
- Una saturazione più bassa è più calma e spesso più elegante, e si adatta ad aree grandi come gli sfondi e le superfici di lettura lunga.
- Due colori complementari molto saturi affiancati possono sembrare vibrare, e il testo su di essi stanca da leggere.
- I colori saturi di solito vanno smorzati in modalità scura e spesso non si riproducono esattamente nella stampa in CMYK.

La **saturazione nel design** è l’intensità di un colore: completamente saturo è vivido e puro, completamente desaturato è grigio. Alzala dove vuoi attenzione ed energia, su un pulsante, un prezzo in saldo o una sola evidenziazione. Abbassala per aree grandi, lettura lunga, brand di fascia alta e interfacce scure, dove il colore vivido stanca presto. Quasi tutte le buone palette mescolano le due cose di proposito: una base calma a saturazione più bassa con una o due note sature.

## Che cos’è la saturazione e che cosa non è

Ogni colore si descrive con tre proprietà: tinta (che colore è), luminosità (quanto è vicino al bianco o al nero) e saturazione (quanto è puro o sporcato di grigio). Cambia solo la saturazione e un rosso ciliegia scivola verso il rosa antico, poi verso il grigio, senza diventare più chiaro o più scuro. [Tinta, saturazione e luminosità](https://gradiently.design/it/guide/hue-saturation-brightness) spiega come si legano le tre.

- Rosso, saturazione da 85% a 0%: `linear-gradient(90deg, hsl(350 85% 50%) 0%, hsl(350 60% 50%) 25%, hsl(350 40% 50%) 50%, hsl(350 20% 50%) 75%, hsl(350 0% 50%) 100%)`
- Blu, saturazione da 85% a 0%: `linear-gradient(90deg, hsl(210 85% 45%) 0%, hsl(210 60% 45%) 25%, hsl(210 40% 45%) 50%, hsl(210 20% 45%) 75%, hsl(210 0% 45%) 100%)`
- Verde, saturazione da 70% a 0%: `linear-gradient(90deg, hsl(150 70% 38%) 0%, hsl(150 50% 38%) 25%, hsl(150 32% 38%) 50%, hsl(150 15% 38%) 75%, hsl(150 0% 38%) 100%)`

Tre tinte con luminosità costante mentre la saturazione scende. Il centro di ogni striscia è dove vivono molti colori di brand sofisticati.

In HSL la saturazione è il secondo numero. Nel più recente spazio colore oklch l’equivalente è la chroma, che si comporta in modo più uniforme tra le tinte, così un giallo e un blu con la stessa chroma sembrano ugualmente intensi. [I colori HSL](https://gradiently.design/it/guide/hsl-colors) tratta il modello più vecchio e come leggerne i numeri.

## Quando alzare la saturazione

- **La cosa da premere.** Un pulsante saturo su una pagina tranquilla non ha bisogno di una freccia che lo indichi. È il compito di un [colore d’accento](https://gradiently.design/it/guide/accent-color).
- **Momenti brevi e forti.** Annunci di saldi, post di lancio e conti alla rovescia di eventi servono a interrompere lo scorrimento.
- **Brand giovani, giocosi o sportivi.** Prodotti per bambini, bevande energetiche e festival spesso indossano l’alta saturazione come parte della loro personalità.
- **Dati che devono risaltare.** In un grafico, satura la serie che conta e ingrigisci il resto.
- **Aree piccole su fondi scuri.** Un colore vivido in un’area piccola su un quasi nero si legge come luce, ed è per questo che il neon funziona di notte.

## Quando abbassare la saturazione

- **Aree grandi.** Uno schermo intero di colore puro e saturo stanca. Gli sfondi di solito funzionano meglio leggermente ingrigiti.
- **Posizionamento premium.** Colori spenti e complessi come oliva, rosso bue e ardesia spesso sembrano più meditati e costosi dei primari.
- **Lettura lunga.** Articoli, documenti e dashboard hanno bisogno di una superficie calma che si possa guardare per un’ora.
- **Modalità scura.** I colori saturi brillano e sbavano sugli sfondi scuri. Abbassa la saturazione e alza un po’ la luminosità; [il design in modalità scura](https://gradiently.design/it/guide/dark-mode-design) entra nei dettagli.
- **Dietro fotografie e testo.** Uno sfondo più quieto lascia guidare la foto e le parole.

Un post verticale di saldi con la scritta Saldi del weekend, solo 48 ore

Un momento breve e forte come i saldi del weekend è dove l’alta saturazione si guadagna il posto. Post verticale a 1080×1350.

Un post verticale del journal intitolato Appunti dallo studio

Qualcosa su cui le persone dovrebbero soffermarsi, come un post del journal, è dove stanno i colori più calmi e meno saturi.

## Il problema della vibrazione

Metti due colori complementari molto saturi uno accanto all’altro, come rosso su verde o blu su arancione, e il bordo tra i due sembra tremolare. È un effetto ottico, e rende il testo su quelle coppie davvero scomodo da leggere anche quando il rapporto di contrasto sembra accettabile. La soluzione è desaturare uno dei due, oppure separarli con un neutro.

### Vibra

- Testo rosso puro su verde puro
- Blu saturo su arancione saturo
- Magenta accanto a lime a piena intensità
- Colori vividi affiancati su tutto un poster

### Si legge con calma

- Testo rosso scuro su una salvia spenta
- Blu navy su un albicocca tenue
- Accento magenta su un fondo lime ingrigito
- Un colore vivido su una base a saturazione più bassa

## Come regolare la saturazione in CSS

I codici esadecimali nascondono la saturazione, ed è per questo che regolarla a occhio in esadecimale è lento. Lavora invece in HSL o oklch, oppure mescola un colore con un grigio usando `color-mix()`.

```css
:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}
```

Tre modi per abbassare la saturazione mantenendo la tinta: saturazione HSL, chroma oklch e miscela con il grigio.

Un’abitudine utile è definire fin dall’inizio ogni colore del brand a due saturazioni: una versione piena per gli accenti e una spenta per i riempimenti grandi. Così nessuno deve improvvisare una tonalità più morbida in seguito.

Le fotografie seguono la stessa logica. Una foto affollata e satura dietro un titolo gli fa concorrenza; abbassa la saturazione della foto di circa un terzo e le parole prendono la guida senza bisogno di riquadri o ombre. Al contrario, un solo oggetto saturo in una foto altrimenti spenta, un cappotto rosso in una strada grigia, è uno dei modi più antichi per guidare l’occhio.

## La saturazione in stampa

Gli schermi possono mostrare colori più saturi di quanto l’inchiostro CMYK riesca a stampare, soprattutto blu, verdi, arancioni e viola brillanti. Un colore vivido a schermo spesso stampa visibilmente più spento. Se la saturazione è centrale per il tuo brand, valuta un inchiostro Pantone speciale per la stampa e controlla una prova prima di una tiratura grande. [RGB e CMYK](https://gradiently.design/it/guide/rgb-vs-cmyk) spiega la differenza.

- Rosso pieno: #e8173a
- Rosso spento: #b8505f
- Blu pieno: #1c7ae0
- Blu spento: #4f6f93
- Verde pieno: #14a85a
- Verde spento: #5b8a6f

Ogni colore del brand a due saturazioni. Le versioni piene servono per momenti piccoli e forti; quelle spente reggono le aree grandi e resistono meglio alla stampa.

La saturazione lavora anche insieme alla [temperatura del colore](https://gradiently.design/it/guide/color-temperature): una palette spenta e calda sa di vintage, una spenta e fredda sa di scandinavo. Per set già pronti a ciascun estremo della manopola, vedi le [palette di colori tenui](https://gradiently.design/it/guide/muted-color-palettes) e le [palette di colori brillanti](https://gradiently.design/it/guide/bright-color-palettes).

I Mark di Gradiently applicano lo stesso principio a uno sfondo vivo: la regione più calma e con il miglior contrasto si sposta dietro il testo e il dettaglio affollato lì si rilassa, così le parole poggiano su un’area più quieta mentre il resto del Mark conserva il suo colore.

## FAQ

### Che cos’è la saturazione nel design?

L’intensità o purezza di un colore, da completamente vivido a completamente grigio. È separata da tinta e luminosità.

### L’alta saturazione è sbagliata?

No, ma funziona meglio in aree piccole e momenti brevi. Grandi aree ad alta saturazione stancano e possono sembrare economiche.

### Qual è la differenza tra saturazione e luminosità?

La saturazione è quanto grigio è mescolato in un colore; la luminosità è quanto è vicino al bianco o al nero. Puoi cambiare l’una senza l’altra.

### Perché i colori saturi stanno peggio in modalità scura?

Sugli sfondi scuri i colori vividi sembrano brillare e sfocarsi ai bordi. Abbassare un po’ la saturazione e alzare la luminosità li mantiene nitidi.

### Come rendo un colore meno saturo in CSS?

Abbassa il secondo valore in `hsl()` o `oklch()`, oppure mescolalo con un grigio usando `color-mix(in oklch, tuocolore 60%, #808080)`.