In breve
- 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.
In questa pagina
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à spiega come si legano le tre.
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 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.
- 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 entra nei dettagli.
- Dietro fotografie e testo. Uno sfondo più quieto lascia guidare la foto e le parole.
Un momento breve e forte come i saldi del weekend è dove l’alta saturazione si guadagna il posto. Post verticale a 1080×1350.
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().
: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);
}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 spiega la differenza.
La saturazione lavora anche insieme alla temperatura del colore: 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 e le palette di colori brillanti.
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.
Le domande più frequenti
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).
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo