Estrattore palette colori

Carica un'immagine per estrarne i colori dominanti. Ottieni i codici HEX per ogni campione, copia con un clic. Tutto funziona nel tuo browser.

Come funziona Estrattore palette colori

Estrai tavolozza di colori analizza la tua immagine e identifica i colori visivamente dominanti usando un algoritmo di clustering k-means eseguito sui dati pixel in un Canvas. Il risultato è un insieme di campioni di colore con i loro valori HEX che puoi copiare singolarmente. Nessun byte dell'immagine lascia il browser; il campionamento dei pixel viene eseguito localmente in un Web Worker in modo che il thread principale rimanga reattivo.

L'estrazione raggruppa le centinaia di migliaia di colori dei singoli pixel in un numero ridotto di cluster rappresentativi. Il numero di colori di output è configurabile, quindi puoi estrarre una tavolozza compatta di cinque colori o un set più ampio di dodici. Questo è utile per estrarre rapidamente i colori del brand da un logo, identificare le tonalità dominanti di una fotografia per una tavola d'umore o verificare quali colori appaiono in un'immagine caricata da un utente.

Scritto da Bastien Sulyan

Come usare Estrattore palette colori, passo dopo passo

Trascina l'immagine nell'area di caricamento o fai clic per sfogliarla.
Imposta il numero di colori da estrarre (in genere da 5 a 12).
Fai clic su Estrai. Il clustering dei pixel viene eseguito localmente in un Web Worker.
Visualizza i campioni di colore risultanti e i loro valori HEX.
Fai clic su qualsiasi campione per copiare il suo codice HEX negli appunti.

Casi d'uso comuni

Un designer estrae la tavolozza dominante da una fotografia del brand per garantire che i nuovi materiali di marketing corrispondano alla storia cromatica esistente.
Uno sviluppatore identifica i colori principali in un avatar caricato da un utente per generare dinamicamente un colore di accento dell'interfaccia utente corrispondente.
Un artista costruisce una tavola d'umore di riferimento estraendo le tavolozze da diverse immagini di riferimento e confrontando i codici HEX estratti.
Un blogger estrae le cinque tonalità dominanti da una foto di intestazione per scegliere colori complementari per il testo e i pulsanti di un layout di articolo.

Domande frequenti

Come funziona l'algoritmo di estrazione dei colori?

Lo strumento legge tutti i valori dei pixel dall'immagine tramite Canvas.getImageData(), li sottocampiona per velocità, poi esegue il clustering k-means. Ogni centroide del cluster diventa uno dei colori di output. K-means raggruppa i pixel per prossimità cromatica in modo che le tonalità visive dominanti emergano come colori centroidi.

L'estrazione dei colori richiede il caricamento dell'immagine?

No. Il campionamento dei pixel avviene all'interno di un Web Worker nel browser. L'immagine viene letta dal disco locale, disegnata su un OffscreenCanvas e l'array di pixel viene elaborato in memoria. I dati non lasciano il dispositivo.

Perché i colori estratti sembrano leggermente diversi da ciò che vedo nell'immagine?

I centroidi k-means rappresentano la media matematica di un cluster di colori pixel. Un colore molto comune ma leggermente variabile (un cielo blu con lievi variazioni di gradiente) produrrà un centroide che è la tonalità media piuttosto che un valore pixel esatto che puoi individuare. Il risultato è una media rappresentativa, non un campione di un pixel specifico.

Posso estrarre tavolozze da foto con trasparenza?

I pixel completamente trasparenti (alfa = 0) vengono esclusi dal clustering per evitare che la regione trasparente distorca i colori estratti verso il nero o il bianco a seconda del riempimento dello sfondo Canvas. I pixel semitrasparenti vengono inclusi nel campione ponderati in base al loro valore alfa.

In quale formato sono i codici colore?

Lo strumento produce codici HEX (come #3A7BD5). Se hai bisogno di RGB, HSL o altri formati, copia il valore HEX nello strumento Convertitore di colori, che accetta HEX e converte in tutti i modelli di colore comuni.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti immagini