# Come costruire una palette di gradienti per un brand

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

Un buon gradiente è facile. Sei gradienti che appartengono chiaramente alla stessa famiglia, coprono ogni compito di un brand e stanno bene vicini sono un sistema. Ecco come costruirlo.

## The short version

- Una palette di gradienti è una piccola famiglia di gradienti con un nome, nata da una sola palette di colori di base e da poche regole condivise.
- La maggior parte dei brand ha bisogno da quattro a sei gradienti: un hero, una versione profonda, una chiara e discreta, un glow radiale, un accento e uno calmo per il testo.
- I gradienti si leggono come una famiglia quando condividono un colore di fondo, una direzione, posizioni dei passaggi coerenti e gli stessi scalini di luminosità.
- Salvare i gradienti come proprietà personalizzate CSS con un nome li mantiene identici in un sito, in un’app e nei file di design.
- Una palette di gradienti va provata su formati reali con parole vere prima di scriverla nelle linee guida del brand.

Una **palette di gradienti** è una piccola famiglia di gradienti con un nome, costruita da una sola palette di colori e da una manciata di regole condivise, così ogni gradiente usato da un brand appare imparentato. Parti da cinque o sei colori di base, dai a ogni gradiente un compito (hero, profondo, discreto, glow, accento, testo), poi fissa ciò che li rende fratelli: lo stesso colore di fondo, lo stesso angolo, posizioni dei passaggi corrispondenti e scalini uniformi di luminosità. Scrivili come token e provali su design reali prima che li usi qualcun altro.

## Perché un brand ha bisogno di più di un gradiente

Un solo gradiente viene tirato su compiti che non può svolgere. La miscela hero luminosa che sta benissimo in un post di lancio è troppo rumorosa dietro un paragrafo, troppo scura per una sezione chiara di un sito e troppo movimentata per una slide piena di numeri. I team allora improvvisano, qualcuno sceglie un blu vicino e nel giro di un anno il brand ha quindici gradienti che quasi coincidono. Una palette lo evita decidendo le varianti in anticipo.

### Un mucchio di gradienti

- Ognuno fatto a parte, per un solo design
- Angoli diversi in ogni pagina
- Colori che quasi corrispondono al brand
- Nessun nome, quindi nessuno può chiederne uno
- Copiati a occhio da vecchi file

### Una palette di gradienti

- Costruita da una sola palette di base
- Una sola direzione, usata ovunque
- Codici esadecimali e posizioni dei passaggi esatti
- Chiamati per compito: hero, profondo, discreto
- Salvati come token nel codice e nei file

## Parti da una palette di colori di base

Ogni gradiente della famiglia dovrebbe essere fatto solo con questi colori, o con loro tinte e sfumature. Se i colori del tuo brand non sono ancora stabiliti, sistemali prima con [come scegliere i colori del brand](https://gradiently.design/it/guide/how-to-choose-brand-colors). Una base utile ha un fondo scuro, due o tre gradini della tonalità principale, un quasi bianco e un accento da un’altra zona della ruota.

- Inchiostro: #14112b
- Prugna notte: #2e1065
- Prugna: #4c1d95
- Viola: #7c3aed
- Orchidea: #c084fc
- Conchiglia: #faf5ff
- Brace: #f97316

Una base di esempio: un fondo scuro, quattro gradini di viola, un quasi bianco e un solo accento caldo. Ogni gradiente qui sotto è fatto con questi sette codici.

## Dai a ogni gradiente un compito

Chiama i gradienti per ciò che fanno, non per come sembrano. «Hero» sopravvive a un rinnovo dei colori; «tramonto viola» no. Sei ruoli coprono quasi ogni brand.

| Ruolo | A che cosa serve | In che cosa si distingue |
| --- | --- | --- |
| Hero | Lanci, copertine, il momento che le persone ricordano | Gamma completa, dallo scuro al chiaro |
| Profondo | Sezioni scure, slide, campagne serali | Solo i due o tre colori più scuri |
| Discreto | Pagine chiare, documenti, lettura lunga | Conchiglia e la tinta più pallida, che si muove appena |
| Glow | Foto di prodotto e parole singole | Radiale, con la luce in un angolo |
| Accento | Pulsanti, badge, un’evidenza per design | Dalla tonalità principale al colore d’accento |
| Testo | Dietro paragrafi e didascalie | Poco contrasto al suo interno, molto contro il testo |

Sei ruoli per una palette di gradienti di un brand. I piccoli brand possono partire da hero, profondo e discreto.

- Hero: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Profondo: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Discreto: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Glow: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Accento: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Testo: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

La famiglia costruita dalla base qui sopra. Stesso fondo, stesso angolo di 135 gradi, stessi colori: potrebbero stare fianco a fianco in una pagina senza litigare.

## Le regole che fanno dei gradienti una famiglia

- **Un solo fondo.** Ogni gradiente scuro finisce nello stesso inchiostro, ogni chiaro nella stessa conchiglia. Il fondo è ciò che l’occhio usa per raggrupparli.
- **Una sola direzione.** Scegli un angolo, 135 o 160 gradi, e mantienilo. Angoli misti fanno sembrare una pagina casuale. L’[angolo del gradiente](https://gradiently.design/it/guide/gradient-angle) spiega la scelta.
- **Passaggi corrispondenti.** Riusa le stesse posizioni (0, 45, 75, 100 percento, per esempio) così le transizioni hanno lo stesso ritmo. I [passaggi di colore dei gradienti](https://gradiently.design/it/guide/gradient-stops) trattano la distribuzione.
- **Scalini di luminosità uniformi.** Ogni colore di una miscela dovrebbe essere un gradino netto più chiaro o più scuro del vicino. Scalini irregolari producono una striscia luminosa al centro.
- **Un solo accento, razionato.** Il colore d’accento compare in un solo gradiente. Sparso in tutti, smette di essere un accento.
- **Un’interpolazione fissa nel codice.** Se il tuo sito miscela in oklch, tutti i gradienti dovrebbero farlo, altrimenti gli stessi codici appariranno diversi da una sezione all’altra.

## Trasforma la palette di gradienti in token

Una palette che vive solo in un PDF viene ridigitata e si sposta. Salva ogni gradiente una sola volta come proprietà personalizzata con un nome e richiamalo ovunque. I designer possono incollare gli stessi valori nei loro file e un futuro rinnovo cambia una riga per gradiente. I [design token](https://gradiently.design/it/guide/design-tokens) trattano la pratica più ampia.

```css
:root {
  --ink: #14112b;
  --plum: #4c1d95;
  --violet: #7c3aed;
  --orchid: #c084fc;
  --shell: #faf5ff;
  --ember: #f97316;

  --gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
  --gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
  --gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
  --gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
  --gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
  --gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}

.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }
```

L’intera famiglia come proprietà personalizzate CSS. I colori sono definiti una sola volta e ogni gradiente è costruito da loro.

## Provala su formati reali

I campioni mentono. Un gradiente che sembra equilibrato come piccolo quadrato può mettere la sua banda più luminosa proprio dietro un titolo quando riempie una storia da 1080×1920. Prima di pubblicare la palette, crea tre design reali con parole vere: un post verticale, una storia e un hero per sito. Verifica che il gradiente per il testo mantenga leggibili i paragrafi, con i controlli di contrasto di [contrasto del colore e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility), e che hero e profondo sembrino imparentati quando stanno fianco a fianco.

Un post di lancio verticale su uno sfondo a gradiente ricco e a gamma completa

Il ruolo hero su un post verticale da 1080×1350.

Una storia verticale con lo stesso titolo su uno sfondo a gradiente imparentato della stessa famiglia

La stessa famiglia su una storia da 1080×1920. Verifica che la banda più luminosa resti lontana dal titolo anche nel formato più alto.

Con Gradiently Pro il kit del brand contiene le tue palette di colori insieme a logo e font, e il Designer le applica quando imposta nuovi design. Se il tuo gradiente hero deve essere ciò che le persone riconoscono, i [gradienti del brand](https://gradiently.design/it/guide/brand-gradient-system) spiegano come trasformare un gradiente in una firma.

## FAQ

### Che cos’è una palette di gradienti?

Un piccolo insieme di gradienti con un nome, nato da una sola palette di colori con regole condivise, così sembrano una famiglia ovunque compaiano.

### Quanti gradienti dovrebbe avere un brand?

Da quattro a sei coprono la maggior parte dei bisogni: un hero, una versione profonda e una discreta, un glow radiale, un accento e uno abbastanza calmo per il testo. I piccoli brand possono partire con tre.

### Come faccio a far sembrare che i gradienti stiano insieme?

Usa lo stesso colore di fondo, lo stesso angolo, le stesse posizioni dei passaggi e scalini uniformi di luminosità in ogni gradiente.

### Come devo salvare i gradienti del brand per un sito web?

Definisci i colori e ogni gradiente una sola volta come proprietà personalizzate CSS, poi richiama quei nomi in ogni componente.