Estrarre colori da un'immagine (contagocce online)

Come si usa: Estrarre colori da un'immagine

1. Trascina nell'area l'immagine di cui vuoi conoscere i colori oppure clicca per sceglierla. Uno screenshot appena fatto puoi incollarlo direttamente con Ctrl+V.
2. Muovi il mouse sopra l'immagine: il colore sotto il cursore viene mostrato in tempo reale. Clicca nel punto che ti interessa per fissare il colore e aggiungerlo alla cronologia.
3. Clicca sul pulsante HEX, RGB o HSL per copiare il codice colore nel formato che ti serve.
4. Più in basso, nella sezione colori principali, trovi i colori dominanti dell'intera immagine con la percentuale che occupano.

Come trovare il codice colore di una foto

Un'immagine digitale è composta da tanti piccoli punti (pixel) e ogni pixel memorizza l'intensità di tre luci, rosso (R), verde (G) e blu (B), con un numero da 0 a 255. Questo strumento legge il valore RGB esatto del pixel su cui clicchi e lo mostra nei formati seguenti.

In una fotografia lo stesso oggetto ha colori leggermente diversi da un pixel all'altro, a causa della luce e della compressione. Se ti serve un colore preciso, ad esempio quello di un logo, scegli la zona più ampia e uniforme. Per convertire il colore in altri formati (come CMYK) usa il convertitore di codici colore.

Come vengono estratti i colori principali (palette)

I colori principali vengono calcolati prendendo alcune migliaia di pixel distribuiti uniformemente su tutta l'immagine e raggruppando quelli simili con il metodo di clustering k-means. Per ogni gruppo si calcola il colore medio e i gruppi vengono mostrati in ordine di percentuale occupata nell'immagine. Le parti trasparenti sono escluse dal calcolo.

La palette è un ottimo punto di partenza per scegliere gli abbinamenti di colore di un sito web, di una presentazione o di un volantino. Usa il colore con la percentuale più alta come sfondo e il secondo o il terzo come colori di accento: otterrai un design che si sposa bene con la foto. Aumentando il numero di colori, la palette si suddivide in sfumature più fini.

Scoprire i colori di un sito o di un'app con uno screenshot

1. Sulla schermata di cui vuoi conoscere i colori, cattura un'area con Win + Maiusc + S su Windows oppure con Cmd + Ctrl + Maiusc + 4 su Mac (aggiungendo Ctrl l'immagine finisce negli appunti; con Cmd + Maiusc + 4 viene salvata come file, che puoi poi trascinare qui).
2. Torna su questa pagina e premi Ctrl + V (su Mac Cmd + V): lo screenshot si apre subito.
3. Clicca sul pulsante o sul testo che ti interessa e copia il codice colore.

Le impostazioni colore del monitor, la modalità scura o lo zoom del browser possono far sì che il colore catturato si discosti leggermente dal valore originale del design. Se ti serve un valore esatto, ad esempio un colore aziendale, verifica sul file di progetto originale o nelle linee guida ufficiali del marchio.

Consigli per una scelta più precisa

• Preferisci PNG a JPG: la compressione JPG altera leggermente i colori, soprattutto vicino ai bordi e nelle sfumature.
• Clicca al centro delle aree uniformi: ai bordi di testi e forme i pixel sono spesso una miscela di due colori (antialiasing).
• Confronta più punti: grazie alla cronologia dei colori scelti puoi cliccare su più zone e confrontare i codici prima di decidere.
• Usa la palette per una visione d'insieme: se cerchi l'atmosfera cromatica di una foto più che un singolo pixel, i colori principali sono più rappresentativi.