In breve
- 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.
In questa pagina
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. 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.
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.
In che cosa si distingue
In che cosa si distingue
In che cosa si distingue
In che cosa si distingue
In che cosa si distingue
In che cosa si distingue
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 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 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 trattano la pratica più ampia.
: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); }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à, e che hero e profondo sembrino imparentati quando stanno fianco a fianco.
Il ruolo hero su un post verticale da 1080×1350.
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 spiegano come trasformare un gradiente in una firma.
Le domande più frequenti
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.
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