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.
Come estrarre i colori da un'immagine
Quando volete scoprire quali colori dominano una fotografia, un'illustrazione o un logo, individuarli uno a uno con un contagocce è un'operazione lenta e faticosa. Questo strumento svolge il lavoro al posto vostro: basta caricare un'immagine perché elenchi automaticamente i colori rappresentativi — le cosiddette colori dominanti — che occupano le aree più estese dell'immagine. I codici HEX e i valori RGB compaiono subito, pronti per essere copiati direttamente nei CSS, in Figma, in Photoshop o in qualsiasi altro strumento di design stiate utilizzando.
Dietro le quinte, lo strumento disegna l'immagine su un elemento Canvas del browser e ne legge i dati dei pixel. I colori simili vengono raggruppati (quantizzati) in gruppi piuttosto ampi, si conta quante volte compare ciascun gruppo e i gruppi più frequenti vengono scelti come colori rappresentativi. Le aree trasparenti di un'immagine PNG vengono automaticamente escluse da questo conteggio, così anche un soggetto ritagliato su sfondo trasparente produce risultati centrati sui colori del soggetto stesso anziché dello sfondo. Le immagini di grandi dimensioni vengono ridimensionate internamente prima dell'analisi, così anche fotografie da diversi megapixel vengono elaborate quasi all'istante. Poiché tutto il calcolo avviene localmente nel vostro browser, i dati dell'immagine non lasciano mai il vostro dispositivo, il che rende lo strumento sicuro anche per fotografie riservate o private.
Come estrarre i colori da un'immagine passo per passo
- Caricare un'immagine Trascinate un file immagine nell'area indicata, oppure fate clic su di essa per sceglierne uno tramite la finestra di selezione file.
- Scegliere quanti colori estrarre Selezionate 4, 8 o 12 dall'opzione «Numero di colori da estrarre». Il risultato viene ricalcolato istantaneamente a ogni modifica della selezione, senza dover ricaricare l'immagine.
- Esaminare i campioni estratti I campioni di colore vengono mostrati in ordine dal più al meno frequente. Accanto a ciascun campione compaiono il relativo codice HEX e i valori RGB.
- Copiare un codice HEX Fate clic sul pulsante di copia sotto un campione per inviare quel codice HEX direttamente negli appunti, pronto da incollare nei CSS o in un'applicazione di design.
Consigli per sfruttarlo al meglio
- 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.
Modi per sfruttare questo strumento
Costruire una palette a partire da un logo esistente
Caricate l'immagine di un logo per ottenere come codici HEX i colori esatti che utilizza, rendendo più semplice mantenere un sito web o una presentazione coerenti visivamente con il marchio.
Trovare candidati per i colori del marchio da fotografie di prodotto
Estrarre i colori rappresentativi da una confezione o da una fotografia di prodotto fornisce materiale concreto per decidere un colore istituzionale o un colore d'accento per una pagina di campagna.
Capire l'equilibrio cromatico di una foto o di un'illustrazione
Alternare tra 4 e 12 colori estratti permette di cogliere a colpo d'occhio il tono generale di un'immagine e, osservando più da vicino, anche le sfumature più sottili.
Trasferire i colori nei CSS o in uno strumento di design
Copiate un codice HEX estratto e incollatelo direttamente in una variabile CSS o nel selettore colore di Figma o Photoshop, evitando il lavoro manuale di trascrivere i colori a occhio.
Glossario
- Colore dominante
- Il colore che occupa l'area più estesa di un'immagine, oppure che vi compare più frequentemente. I campioni elencati da questo strumento corrispondono esattamente a questi colori dominanti, ordinati in base a quanta superficie dell'immagine coprono.
- Codice HEX
- Una notazione che rappresenta le componenti rosso, verde e blu di un colore come un numero esadecimale di due cifre ciascuna, ad esempio «#3366cc». Al simbolo «#» seguono, nell'ordine, rosso, verde e blu; questo formato è ampiamente usato nei CSS e nei software di design.
- Valore RGB
- Un modo di specificare un colore attraverso i tre colori primari della luce — rosso, verde e blu — ciascuno espresso come numero da 0 a 255. Combinando questi tre valori si può riprodurre praticamente qualsiasi colore visibile.
- Quantizzazione del colore
- Il processo di arrotondare colori simili raggruppandoli in un numero minore di gruppi. Questo strumento divide ciascun canale RGB in gruppi di 32 unità, così che piccole variazioni di colore introdotte, ad esempio, dalla compressione JPEG vengano conteggiate come lo stesso colore anziché trattate come rumore.
- Valore alfa (trasparenza)
- Un valore che descrive l'opacità di ciascun pixel di un'immagine. Le aree trasparenti di un PNG con trasparenza hanno un valore alfa basso, e questo strumento esclude automaticamente tali pixel dal conteggio dei colori.
- API Canvas
- Un'interfaccia JavaScript del browser per disegnare e analizzare immagini e grafica. Questo strumento la utilizza per leggere un'immagine pixel per pixel ed estrarne i colori interamente sul vostro dispositivo, senza mai inviare i dati a un server.
Domande frequenti
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.