# Gradienti pastello freschi, non stucchevoli

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

I pastelli sono i gradienti più facili da amare e i più facili da esagerare. Poche regole li fanno sembrare luce di primavera sulla carta invece di una torta di compleanno.

## The short version

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

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

- Spettro pastello in OKLCH: `linear-gradient(90deg in oklch, oklch(0.9 0.07 20), oklch(0.9 0.07 140), oklch(0.9 0.07 260))`
- Cipria e burro: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)`
- Glicine: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)`
- Crema al pistacchio: `linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%)`
- Cielo e menta: `linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%)`
- Foschia pervinca: `linear-gradient(135deg, #e0e7ff 0%, #fbcfe8 100%)`
- Rosa antico e salvia: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)`
- Schiuma di mare: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)`
- Albicocca e cipria: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)`

Coppie pastello con codici da copiare. La prima è costruita in OKLCH con luminosità e croma fissi, quindi le sue tre tinte sembrano ugualmente morbide.

## 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à](https://gradiently.design/it/guide/color-contrast-accessibility).

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

Rapporti di contrasto secondo le WCAG 2. Il testo corrente richiede almeno 4,5:1, quello grande almeno 3:1. Più il pastello è profondo, più l’inchiostro deve essere scuro.

- Carta: #f8f1ea
- Cipria: #fbcfe8
- Lilla: #e9d5ff
- Salvia: #d5e3d0
- Burro: #fde68a
- Inchiostro indaco: #312e81

Un sistema pastello completo: un fondo carta, tre pastelli, un accento caldo e un inchiostro scuro per ogni parola.

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

- Fioritura cipria sulla carta: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)`
- Fioritura salvia sulla carta: `radial-gradient(circle at 85% 80%, #d5e3d0 0%, #f8f1ea 60%)`
- Lilla dall’alto: `radial-gradient(ellipse at 50% 0%, #e9d5ff 0%, #f8f1ea 65%)`

Fioriture pastello su un fondo carta. Gran parte della superficie resta carta, ed è questo a mantenerle calme.

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](https://gradiently.design/it/guide/grainy-gradients) 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.

```css
.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 */
}
```

Fioriture cipria e salvia su una velatura dalla carta al lilla, con inchiostro indaco per le parole.

Tieni le coppie pastello vicine di tinta per il risultato più pulito, come nei [gradienti a due colori](https://gradiently.design/it/guide/two-color-gradients). 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](https://gradiently.design/it/guide/holographic-gradients)

Un post verticale di saldi intitolato Selezione di primavera su un morbido gradiente pastello con lettere scure

Un campo pastello con un inchiostro scuro si legge calmo e sicuro alle dimensioni del feed.

La versione in storia verticale dello stesso design pastello per i saldi

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](https://gradiently.design/it/guide/aesthetic-backgrounds) 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.

## FAQ

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