# Palette di colori da un’immagine: come ricavarla da una foto

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

Il contagocce ti dà un pixel. Una palette richiede i colori che ricordi dell’immagine, nelle giuste proporzioni. Ecco come passare dall’uno all’altra.

## The short version

- Una buona palette di colori da un’immagine ha tre tipi di colore: i dominanti delle aree più grandi, i colori di supporto e uno o due accenti piccoli e vividi.
- I campioni singoli del contagocce spesso sembrano sporchi perché le foto sono piene di ombre, rumore e compressione, quindi campiona più aree e fai la media.
- I colori che ricordi di una foto sono di solito più puliti e saturi dei pixel, quindi alzare un po’ il croma fa sembrare la palette fedele.
- Gli estrattori automatici trovano bene i colori dominanti ma tendono a perdere i piccoli accenti, che vanno riaggiunti a mano.
- Per trasformare la palette di una foto in un gradiente, tieni i colori nell’ordine in cui compaiono nella scena, come cielo sopra acqua sopra riva.

Per costruire una **palette di colori da un’immagine** cerchi tre cose: i colori dominanti che riempiono le aree più grandi, qualche colore di supporto e uno o due accenti piccoli e vividi che danno scintilla all’immagine. Poi campioni ciascuno da un’area e non da un singolo pixel, lo ripulisci perché corrisponda a ciò che ricordi di aver visto e controlli che i colori funzionino insieme. Fatta bene, la palette assomiglia alla foto anche quando la foto non c’è.

Questa guida spiega come farlo a mano, cosa gli strumenti automatici fanno bene e male e come trasformare il risultato in un gradiente. Per palette già pronte da scene reali, vedi le [palette di colori dalla natura](https://gradiently.design/it/guide/nature-color-palettes).

## Colori dominanti, di supporto e di accento

Ogni foto ha una gerarchia di colori. Immagina un porto al crepuscolo: gran parte dell’inquadratura è acqua blu profondo e un cielo color ardesia, una fascia di tetti color terracotta attraversa il centro e pochi piccoli lampioni al sodio brillano d’arancione. Acqua e cielo sono dominanti, i tetti li sostengono e le luci sono l’accento. Togli le luci e la palette perde calore; rendile dominanti e diventa un’altra immagine.

- Acqua del porto: #1d2a44
- Cielo ardesia: #3e5c86
- Foschia: #8a9bb5
- Tetti di terracotta: #b8674e
- Luce al sodio: #f2a65a
- Ultimo bagliore: #f6dcc0

Una palette da un porto al crepuscolo. Due blu dominanti, una foschia pallida, una terracotta di supporto e due accenti caldi che devono restare piccoli.

Scrivi le proporzioni accanto ai colori. Una palette non è solo un elenco di codici esadecimali: gli stessi sei colori usati in quantità uguali non somiglieranno affatto alla foto. La [regola 60-30-10](https://gradiently.design/it/guide/60-30-10-rule) è un buon modo per annotarle.

## Come estrarre a mano i colori da una foto

1. **Sfoca prima la foto** Applica una sfocatura forte, o semplicemente strizza gli occhi. Dettagli, texture e rumore spariscono e compaiono le vere aree di colore. Campionare un’immagine sfocata dà medie invece di casualità.
2. **Campiona aree, non pixel** Usa un contagocce con una dimensione di campione ampia, come 11 per 11 pixel, oppure scegli tre punti in ogni area e fai la media.
3. **Raccogli più di quanto serve** Prendi da otto a dodici campioni da parti diverse dell’immagine, compresi i dettagli luminosi più piccoli.
4. **Raggruppa e scegli** Raggruppa i campioni simili, tieni il più chiaro di ogni gruppo e finisci con cinque-sette colori: due o tre dominanti, due di supporto, uno o due accenti.
5. **Correggi verso il ricordo** Confronta ogni campione con la foto a dimensione normale. Se un colore sembra spento o grigio rispetto a ciò che ricordi, alza un po’ il croma o sposta leggermente la tonalità.
6. **Controlla il contrasto** Assicurati che almeno un colore chiaro e uno scuro della palette si leggano l’uno sull’altro per il testo. Vedi il [contrasto dei colori](https://gradiently.design/it/guide/color-contrast-accessibility).

## Perché i campioni del contagocce sembrano sporchi

Una foto non è fatta di colori puliti. Un cielo blu è fatto di migliaia di blu leggermente diversi, le ombre si mescolano con il colore di ciò che sta vicino e la compressione JPEG aggiunge blocchi di colore mediato. Se clicchi una volta, spesso finisci su un pixel grigio-marrone che esiste nel file ma non nel tuo ricordo della scena.

### Campioni sporchi

- Un solo clic su un singolo pixel
- Campionare da ombre e bordi tra gli oggetti
- Prelevare da un’immagine piccola e compressa
- Tenere ogni colore esattamente come campionato

### Campioni puliti

- Un campione mediato da una copia sfocata
- Campionare dal centro di aree illuminate e uniformi
- Usare la versione più grande e meno compressa che hai
- Regolare ogni colore verso ciò che ricordi di aver visto

- Campioni a pixel singolo: grigio oliva: `linear-gradient(90deg, #6b6a5e 0%, #7d7866 100%)`
- Campioni mediati e corretti: `linear-gradient(90deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 65%, #f2a65a 100%)`

Due sfumature dalla stessa foto del porto. I campioni grezzi al bordo tra cielo e tetti scivolano nel grigio; quelli puliti, uniti attraverso la foschia e il bagliore, mantengono blu e arancione.

## Usare un generatore di palette da un’immagine

Gli strumenti automatici riducono l’immagine, raggruppano i pixel simili e restituiscono i gruppi più grandi. Così trovano i colori dominanti in modo affidabile. Il punto debole è l’accento: una piccola luce arancione può coprire l’uno per cento dell’inquadratura, quindi non entra mai nell’elenco. Considera il risultato di qualsiasi generatore una prima bozza e riaggiungi a mano gli accenti.

```js
// Most common colours in an image, grouped into coarse buckets.
// Finds dominant colours well; add small accents by hand.
async function paletteFromImage(url, count = 6) {
  const img = new Image()
  img.crossOrigin = 'anonymous'
  img.src = url
  await img.decode()
  const size = 64 // shrinking first averages away noise
  const canvas = new OffscreenCanvas(size, size)
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, size, size)
  const { data } = ctx.getImageData(0, 0, size, size)
  const buckets = new Map()
  for (let i = 0; i < data.length; i += 4) {
    const key = ((data[i] >> 4) << 8) | ((data[i + 1] >> 4) << 4) | (data[i + 2] >> 4)
    const b = buckets.get(key) ?? { r: 0, g: 0, b: 0, n: 0 }
    b.r += data[i]; b.g += data[i + 1]; b.b += data[i + 2]; b.n++
    buckets.set(key, b)
  }
  const hex = (v) => Math.round(v).toString(16).padStart(2, '0')
  return [...buckets.values()]
    .sort((a, b) => b.n - a.n)
    .slice(0, count)
    .map((b) => `#${hex(b.r / b.n)}${hex(b.g / b.n)}${hex(b.b / b.n)}`)
}
```

Un estrattore minimo nel browser. L’immagine deve trovarsi sullo stesso sito o consentire l’uso cross-origin, altrimenti il canvas rifiuterà di leggerla.

## Trasformare la palette di una foto in un gradiente

Il modo più semplice per far sembrare un gradiente una foto è tenere i colori nell’ordine in cui compaiono nella scena. Cielo sopra orizzonte sopra acqua. Foglie sopra frutti sopra terra. Il gradiente porta allora la struttura dell’immagine oltre ai suoi colori, e le persone sentono il legame anche senza saperlo nominare.

- Porto al crepuscolo: `linear-gradient(180deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 50%, #b8674e 62%, #1d2a44 100%)`
- Limoneto: `linear-gradient(180deg, #fdf3c4 0%, #f4d03f 35%, #6f8f3a 70%, #2f4a2a 100%)`
- Mattino nel deserto: `linear-gradient(180deg, #f7d9c4 0%, #e8a87c 40%, #c1666b 75%, #4a2c3a 100%)`
- Lago glaciale: `linear-gradient(180deg, #d8ecef 0%, #7fb7be 40%, #2e6f7e 75%, #13303a 100%)`

Quattro gradienti costruiti da palette fotografiche, ciascuno con i colori nell’ordine della scena dall’alto verso il basso.

Fai attenzione alle transizioni tra colori vicini. Due colori distanti nella foto, come un tetto caldo e un cielo freddo, possono incontrarsi nel grigio se li sfumi direttamente. Inserisci un colore che nella scena sta tra i due, come il bagliore pallido qui sopra, e la sfumatura resta pulita. [Gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients) spiega la regola.

In Gradiently, [Abbina un’immagine](/forge/match) lo fa in un solo passaggio: trascina un’immagine e ti restituisce la palette e i Mark esistenti più vicini, oppure crea nuovi Mark che le somigliano. Puoi poi progettare subito con qualsiasi di essi.

## FAQ

### Come ricavo una palette di colori da un’immagine?

Sfoca l’immagine, campiona le aree di colore più grandi più uno o due piccoli accenti vividi, fai la media di ogni campione su più pixel e regola i colori verso ciò che ricordi di aver visto.

### Quanti colori dovrebbe avere la palette di una foto?

Di solito da cinque a sette bastano per una foto: due o tre colori dominanti, due di supporto e uno o due accenti.

### Perché i colori che prelevo da una foto sembrano spenti?

I singoli pixel spesso vengono da ombre, bordi o artefatti di compressione. Campiona aree mediate da parti illuminate e uniformi dell’immagine e alza leggermente il croma se un colore sembra ancora grigio.

### Perché il mio generatore di palette salta il colore più luminoso?

I generatori ordinano i colori in base a quanta parte dell’immagine coprono, quindi i piccoli accenti raramente entrano nell’elenco. Riaggiungili a mano.