Selettore di colori ed estrattore di palette da immagine

Estrai una palette dei colori dominanti più il colore medio complessivo da qualsiasi immagine direttamente nel browser, ognuno mostrato come valore HEX copiabile.

Caricamento strumento…

Selettore di colori ed estrattore di palette da immagineTrascina una qualsiasi immagine e ricavane all'istante la palette di colori: i colori più dominanti più il colore medio complessivo, ciascuno con un campione e un pulsante di copia HEX con un clic. Scegli tu quanti colori dominanti estrarre (da 2 a 12). L'immagine viene letta con il canvas HTML interamente nel tuo browser e non viene mai caricata su un server.

Cos'è Selettore di colori ed estrattore di palette da immagine?

Il Selettore di Colori da Immagine è un estrattore di palette online e gratuito che ricava i colori dominanti e il colore medio da qualsiasi immagine direttamente nel browser. Designer, sviluppatori front-end e chiunque costruisca un brand o un moodboard possono trascinare una foto, un logo o uno screenshot e ottenere una palette HEX in pochi secondi. Legge i pixel dell'immagine con getImageData del canvas HTML, li quantizza in gruppi di colore e li ordina in base a quanto spesso appare ogni colore, così i colori più usati salgono in cima. Imposti la dimensione della palette (quanti colori dominanti, da 2 a 12), e ogni colore viene mostrato come campione con un valore HEX copiabile accanto al colore medio complessivo dell'immagine.

Come usare Selettore di colori ed estrattore di palette da immagine

  1. Trascina e rilascia un'immagine nell'area di rilascio, oppure cliccala per scegliere un file (PNG, JPEG, WebP o qualsiasi altra immagine che il tuo browser può aprire) dal tuo dispositivo.
  2. Imposta il campo Dimensione palette sul numero di colori dominanti che vuoi, da 2 fino a 12.
  3. Leggi la riga Colore medio per la singola media miscelata dell'intera immagine, mostrata con il suo valore HEX.
  4. Leggi l'elenco Colori dominanti, ordinato dal colore più comune in giù, ciascuno con il suo campione e il suo valore HEX.
  5. Clicca il pulsante di copia accanto a un colore qualsiasi per copiare quel valore HEX negli appunti.

Esempi

Ricavare una palette di brand da un logo

Trascina un PNG di un logo e imposta Dimensione palette su 4 per ottenere i quattro colori più usati come campioni HEX, pronti da incollare nei tuoi design token o nelle variabili CSS.

Trovare un tono di sfondo abbinato da una foto

Carica una foto principale e leggi la riga Colore medio per ottenere un unico valore HEX miscelato in armonia con tutta l'immagine, utile come sfondo di sezione o colore di ripiego.

Costruire un set di campioni più ampio da un'illustrazione

Trascina un'illustrazione colorata e alza Dimensione palette a 12 per estrarre un ampio set di colori dominanti ordinati in base a quanta parte dell'immagine coprono.

Domande frequenti

Quali formati di immagine posso usare?
Qualsiasi immagine che il tuo browser può aprire (l'area di rilascio accetta image/*), inclusi PNG, JPEG e WebP. L'immagine viene disegnata su un canvas HTML e i suoi pixel vengono letti localmente per estrarre i colori.
Come vengono scelti i colori dominanti?
Lo strumento legge i pixel dell'immagine, raggruppa i colori simili in gruppi e ordina i gruppi in base a quanti pixel cadono in ciascuno. I gruppi in cima diventano i tuoi colori dominanti, mostrati dal più comune per primo, ciascuno come colore medio del suo gruppo.
Quanti colori posso estrarre?
Imposti la Dimensione palette tra 2 e 12 colori dominanti. Il colore medio complessivo dell'intera immagine viene sempre mostrato separatamente, oltre a quell'elenco.
Perché i colori potrebbero differire leggermente dall'immagine originale?
Per velocità, le immagini grandi vengono ridotte prima della lettura e i colori simili vengono raggruppati, quindi ogni campione è la media di un gruppo anziché un pixel esatto. Il risultato è una palette rappresentativa fedele anziché un campionamento di colore pixel per pixel.
La mia immagine viene caricata da qualche parte?
No. L'immagine viene elaborata al 100% nel tuo browser con il canvas HTML. Non viene mai caricata su deftdeck né su alcun server, quindi lo strumento funziona offline e mantiene la tua immagine privata.

Strumenti correlati