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

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.

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.

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 è un buon modo per annotarle.

Come estrarre a mano i colori da una foto

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

   Raccogli più di quanto serve

   Prendi da otto a dodici campioni da parti diverse dell’immagine, compresi i dettagli luminosi più piccoli.

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

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.

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.

// 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)}`)
}

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.

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 spiega la regola.

In Gradiently, Abbina un’immagine 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.