Estrai i colori da un'immagine (estrattore di colori dominanti)

Caricate un'immagine per estrarre automaticamente i colori dominanti presenti in una fotografia o in un'illustrazione. Tutta l'elaborazione avviene nel browser e l'immagine non viene inviata a un server.

Consigli per l'uso

  • Il codice HEX di ciascun colore estratto si copia negli appunti con un clic sul pulsante sotto il campione: potete incollarlo direttamente nei CSS o negli strumenti di design.
  • Il «numero di colori da estrarre» si può impostare a 4, 8 o 12. Per un logo o una palette essenziale bastano 4 colori; per esaminare in dettaglio le sfumature di una fotografia, 12 rendono più evidenti le differenze.
  • Nelle immagini PNG con trasparenza le aree trasparenti vengono escluse automaticamente, così l'estrazione si concentra sui colori del soggetto.
  • Tutta l'elaborazione avviene nel browser del vostro dispositivo tramite l'API Canvas e i dati dell'immagine non lasciano mai il computer: potete usare lo strumento anche con immagini riservate.
  • I colori estratti sono ordinati per frequenza: quelli in cima occupano l'area maggiore dell'immagine.

Domande frequenti

Lo strumento usa un algoritmo semplice: quantizza l'immagine in gruppi di colore piuttosto ampi e restituisce come rappresentativo il colore medio dei gruppi più frequenti. È più che sufficiente per farsi un'idea dei toni principali di una fotografia, ma non si tratta di una clusterizzazione rigorosa come il k-means dei software specializzati.

No. Lo strumento usa l'API Canvas e svolge interamente nel browser, lato client, sia la lettura dell'immagine sia l'estrazione dei colori. I dati non vengono mai inviati a un server, quindi potete lavorare in sicurezza anche su immagini riservate.

Si possono caricare i formati comuni visualizzabili con il tag <img> del browser: JPEG, PNG, WebP, GIF e altri. Vale quanto accetta la finestra di selezione file del vostro browser.

Sì. Ogni colore è mostrato come codice HEX (per esempio #3366cc) e il pulsante lo copia negli appunti, così potete incollarlo in Figma, Photoshop, nei CSS o in qualunque strumento che accetti questa notazione.
Tool-kun

A proposito — trovare i colori di un marchio a partire da una fotografia

Estrarre i colori usati in una fotografia o nella confezione di un prodotto è un'operazione quotidiana nel design web e grafico. Quando si redige la guida visiva di un marchio si parte spesso dai materiali fotografici esistenti e dal logo per individuare i colori rappresentativi, e da lì si valutano i candidati per il colore istituzionale e per quelli d'accento. Ciò che un tempo si faceva a occhio, prelevando una tinta alla volta con il contagocce, è oggi automatizzato da strumenti di «estrazione dei colori dominanti» come questo.

Gli algoritmi possibili sono diversi. Quello adottato qui, «quantizzazione a gruppi più conteggio delle frequenze», arrotonda i valori RGB di ogni pixel in gruppi ampi e ne conta le occorrenze: è un meccanismo semplice, ma ha il pregio di essere rapido e poco costoso. Tecniche più sofisticate come il k-means raggruppano in base alla distanza nello spazio dei colori e danno risultati più naturali, al prezzo di un calcolo molto più pesante.

La cosa interessante è che la stessa immagine cambia completamente carattere a seconda di quanti colori si estraggono. Con soli quattro colori emerge la tonalità complessiva — se l'immagine è calda o fredda — mentre arrivando a dodici si colgono anche le differenze sottili dovute alle ombre e ai riflessi. Regolando il numero si ottengono dalla stessa immagine informazioni a granularità diverse.