In breve
- Un gradiente pastello fonde colori chiari con luminosità alta e saturazione delicata, come cipria, burro, lilla e menta.
- Il testo bianco non funziona quasi mai sui gradienti pastello; un inchiostro scuro in una tinta profonda e vicina è molto più facile da leggere.
- I gradienti pastello sembrano stucchevoli quando ogni colore è ugualmente dolce e saturo, e freschi quando un colore è più polveroso, più profondo o inatteso.
- Un fondo carta bianco sporco sotto il colore pastello lo fa sembrare stampato e calmo invece che digitale.
- OKLCH rende facili i pastelli uniformi: tieni fisse luminosità e croma e cambia solo la tinta.
In questa pagina
Un gradiente pastello è una sfumatura di colori chiari e delicatamente tinti: dal cipria al burro, dal lilla al cielo, dalla menta alla crema. I pastelli hanno luminosità alta e poca saturazione, ed è per questo che sembrano gentili, freschi e amichevoli. Il problema è che è anche facile renderli troppo dolci, e su di loro è quasi impossibile leggere un testo bianco. Si risolvono entrambe le cose con un inchiostro scuro, un fondo carta e un colore un po’ meno scontato degli altri.
Cosa rende pastello un colore
Un pastello è un colore con molto bianco dentro: luminosità alta, saturazione da bassa a moderata. Nello spazio colore OKLCH, la maggior parte dei pastelli sta intorno a una luminosità da 0,88 a 0,95 con un croma basso. Questo offre un trucco comodo per creare gradienti pastello uniformi: fissa luminosità e croma, e cambia solo la tinta. Ogni colore avrà allora lo stesso peso visivo, e nessuno griderà.
Fresco o stucchevole: la differenza
I pastelli diventano stucchevoli quando tutto è ugualmente dolce: rosa, azzurro baby e lilla alla stessa saturazione, testo bianco, tutto arrotondato. Sembrano freschi quando qualcosa nel design fa da contrappeso. Può essere un colore più polveroso e grigio, un inchiostro profondo per le parole, un fondo carta bianco sporco o un font netto e serio.
Stucchevole
- Rosa, azzurro baby e lilla alla stessa intensità
- Testo bianco su uno sfondo chiaro
- Fondo bianco puro, perfettamente liscio
- Ogni elemento arrotondato e gommoso
Fresco
- Un colore polveroso o inatteso, come salvia o albicocca
- Un inchiostro profondo da una tinta vicina
- Un fondo carta bianco sporco con una grana leggera
- Un serif deciso o un sans compatto per le parole
Abbina i pastelli a un inchiostro scuro
Il testo bianco su un pastello non supera quasi mai il contrasto, perché sono entrambi molto chiari. La soluzione è un inchiostro scuro: una versione profonda di una delle tinte del gradiente stesso, come indaco sul lilla o bordeaux sul cipria. Mantiene la palette in una sola famiglia e si legge comodamente. Ecco i rapporti misurati per gli inchiostri più comuni su fondi pastello. Per le regole che li giustificano, vedi contrasto dei colori e accessibilità.
| Colore del testo | Su cipria `#fbcfe8` | Su lilla `#c4b5fd` |
|---|---|---|
#ffffff bianco | 1,4:1, non supera | 1,9:1, non supera |
#6b7280 grigio medio | 3,5:1, solo testo grande | 2,6:1, non supera |
#9d174d bordeaux | 5,7:1, supera AA | 4,3:1, solo testo grande |
#312e81 indaco | 8,3:1, supera AAA | 6,2:1, supera AA |
#1f2937 inchiostro | 10,6:1, supera AAA | 8,0:1, supera AAA |
Usa un fondo carta
I pastelli sul bianco puro possono sembrare slavati, e sugli schermi il bianco puro è la cosa più luminosa che ci sia. Un fondo bianco sporco caldo, come #f8f1ea, fa sembrare voluti i colori pastello, come acquerello o inchiostro risograph sulla carta. Lascia che il pastello sbocci da un angolo e sfumi nella carta, invece di riempire tutta la superficie.
Una grana leggera spinge ancora di più l’effetto carta. Tienila molto sottile sui pastelli, perché il rumore si vede facilmente sui colori chiari; i gradienti granulosi indica le quantità da cui partire.
Un gradiente pastello in CSS
In CSS, fondo carta, fioritura e inchiostro stanno insieme in poche righe. Fondere i pastelli in OKLCH evita che il centro diventi gessoso quando le tinte sono lontane, e un suggerimento di colore lascia alla carta gran parte della superficie.
.pastel {
background-color: #f8f1ea; /* paper */
background-image:
radial-gradient(circle at 15% 10%, #fbcfe8 0%, transparent 45%),
radial-gradient(circle at 90% 85%, #d5e3d0 0%, transparent 50%),
linear-gradient(160deg in oklch, #f8f1ea, 60%, #e9d5ff);
color: #312e81; /* indigo ink */
}Tieni le coppie pastello vicine di tinta per il risultato più pulito, come nei gradienti a due colori. Quando vuoi davvero unire pastelli lontani, falli passare per un lilla chiaro o un burro, così il centro resta tinto invece di diventare un grigio biancastro.
Dove funzionano i gradienti pastello
- Beauty, skincare, benessere e profumi
- Prima infanzia, matrimoni, cartoleria e regali
- Campagne di primavera e di Pasqua, pasticcerie e caffè
- Onboarding di software rilassanti e pagine di assistenza
- Estetiche morbide e sognanti, soprattutto con un riflesso olografico; vedi i gradienti olografici
Un campo pastello con un inchiostro scuro si legge calmo e sicuro alle dimensioni del feed.
Lo stesso stile come storia, con il colore che sboccia dall’alto.
Se ti piace la morbidezza ma vuoi più contrasto, fai un passo verso gli sfondi aesthetic con un accento più profondo. Puoi anche cercare nel Mercato parole come «lilla tenue» o «pesca chiaro» per trovare Mark pastello e usarli subito nei tuoi design.
Le domande più frequenti
Che cos’è un gradiente pastello?
Un gradiente pastello è una sfumatura di colori chiari e delicatamente saturi come cipria, lilla, burro e menta.
Di che colore deve essere il testo su un gradiente pastello?
Un inchiostro scuro, idealmente una versione profonda di una delle tinte del gradiente, come indaco o bordeaux. Il testo bianco di solito non supera il contrasto sui pastelli.
Come rendo uniformi i colori di un gradiente pastello?
Costruiscili in OKLCH con la stessa luminosità e lo stesso croma, cambiando solo la tinta, così ogni colore ha lo stesso peso.
Come evito che un gradiente pastello sembri troppo dolce?
Aggiungi un colore polveroso o inatteso, usa un inchiostro scuro per il testo, posalo su un fondo carta bianco sporco e abbinalo a una tipografia decisa.
Che colore di sfondo va con i pastelli?
Un bianco sporco caldo come #f8f1ea fa sembrare i pastelli stampati e calmi; il bianco puro può farli sembrare slavati.
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
