Estrai i colori da un’immagine: palette online

Carica una foto o un logo e ottieni la palette dei colori dominanti con codici HEX, RGB, HSL, CMYK e OKLCH, percentuali, contrasto WCAG ed esportazione.

Aggiornato il 19 ottobre 2026

oppure trascinala qui, o incollala con Ctrl+V

JPG, PNG, WebP, GIF, BMP, AVIF · fino a 25 MB

La palette comparirà qui.

Estrarre i colori da un’immagine

Questo strumento trova i colori dominanti di un’immagine e li trasforma in una palette pronta da usare: carichi una foto, un logo, uno screenshot o un’illustrazione e ottieni i codici dei colori principali, con la percentuale di immagine che ciascuno occupa. È utile a chi progetta un sito o una presentazione partendo da una foto, a chi vuole ritrovare il colore di un logo e a chi cerca ispirazione cromatica da un paesaggio, un prodotto o un’opera.

Non serve installare nulla né registrarsi. L’immagine resta sul tuo dispositivo e può essere cambiata quante volte vuoi.

Come si usa

  1. Carica l’immagine: scegli un file, trascinalo nel riquadro o incollalo con Ctrl+V (Cmd+V su Mac).
  2. Scegli quanti colori vuoi: da 2 a 12. Spostando il cursore la palette si aggiorna subito.
  3. Affina il risultato: escludi il bianco o il nero dello sfondo, ordina i colori per presenza, tinta o luminosità.
  4. Prendi un colore preciso: clicca un punto dell’immagine per aggiungerlo alla palette.
  5. Copia o scarica: un clic su un colore ne copia il codice; sotto trovi l’esportazione per CSS, SCSS, JSON, Tailwind e CSV, e l’immagine della palette.

Come vengono scelti i colori

Una foto contiene decine di migliaia di sfumature diverse: per ottenere una palette utile bisogna raggrupparle. Lo strumento riduce l’immagine, ne campiona i pixel e li divide in gruppi di colori vicini con l’algoritmo median cut; poi rifinisce i gruppi misurando le distanze nello spazio Lab, che rispecchia meglio come l’occhio percepisce la differenza tra due colori, e unisce le tonalità quasi identiche. Ogni colore mostrato è la media del suo gruppo, e la percentuale indica quanta parte dei pixel campionati gli appartiene.

Il risultato è un’approssimazione: due programmi diversi possono proporre palette un po’ diverse dalla stessa immagine, perché cambiano algoritmo e numero di colori. Se un colore ti interessa in modo preciso, cliccalo direttamente sull’immagine.

I formati dei colori

FormatoEsempioDove si usa
HEX#3A7CA5CSS, HTML, Figma, Photoshop
RGBrgb(58, 124, 165)CSS, schermi, software di grafica
HSLhsl(203, 48%, 43%)CSS, per creare varianti più chiare o scure
CMYKcmyk(65%, 25%, 0%, 35%)Riferimento per la stampa
OKLCHoklch(55.6% 0.09 240)CSS moderno, palette percettivamente uniformi

I valori della tabella sono indicativi. Il CMYK è una conversione matematica semplice dei valori RGB, senza profilo colore: va bene per farsi un’idea, non per la stampa professionale.

Contrasto e leggibilità

Accanto a ogni colore trovi il testo, bianco o nero, che si legge meglio sopra di esso, con il rapporto di contrasto calcolato secondo le regole WCAG. È un controllo rapido per capire se un colore può essere usato come sfondo di un pulsante o di un titolo. Il livello AA richiede un rapporto di almeno 4,5 per il testo normale; il livello AAA di almeno 7. Il controllo riguarda il colore preso da solo, non la pagina intera.

Quando conviene escludere bianco e nero

In un logo su fondo bianco o in un oggetto fotografato su sfondo scuro, il colore più presente sarebbe quello dello sfondo. Con “Ignora il bianco” e “Ignora il nero” lo strumento lo salta e dedica i suoi colori a ciò che conta. I pixel trasparenti sono sempre esclusi.

Dopo la palette

Per costruire una palette armonica a partire da un colore, per esempio uno di quelli estratti, usa il generatore di palette di colori. Se ti serve il codice del colore di una pagina web trovi anche altri strumenti per sviluppatori nella sezione dedicata.

Limiti

Immagini molto grandi vengono ridotte prima dell’analisi, quindi i dettagli minuscoli possono non influire sulla palette. I formati supportati sono quelli che il tuo browser sa leggere (JPG, PNG, WebP, GIF, BMP e, nei browser recenti, AVIF); le GIF animate vengono analizzate sul primo fotogramma. Le immagini con profili colore particolari possono apparire diverse su altri schermi.

Privacy

L’immagine non viene caricata su nessun server: è letta dal tuo browser e rimane sul tuo dispositivo.

Domande frequenti

Come estraggo i colori da un’immagine?
Carica una foto o un’immagine (con il pulsante, trascinandola o incollandola con Ctrl+V): lo strumento calcola subito i colori dominanti e li mostra come palette, con codice HEX, RGB, HSL, CMYK oppure OKLCH e la percentuale di immagine che occupano. Con un clic sull’immagine aggiungi anche il colore di un punto preciso.
Quanti colori posso estrarre?
Da 2 a 12. Il numero è un massimo: se l’immagine ha pochi colori davvero distinti, o se due tonalità sono quasi uguali, lo strumento le unisce e ne mostra di meno.
Come funziona il calcolo dei colori dominanti?
L’immagine viene ridotta e campionata, i colori vengono raggruppati con un algoritmo di quantizzazione (median cut) e rifiniti confrontando le distanze nello spazio Lab, che segue meglio la percezione umana del colore. Tonalità troppo simili vengono fuse. Il risultato è un’approssimazione dei colori che l’occhio nota di più, non un elenco di ogni pixel.
Posso escludere il bianco o il nero dello sfondo?
Sì: le opzioni “Ignora il bianco” e “Ignora il nero” escludono i pixel quasi bianchi o quasi neri. Sono utili per loghi e oggetti fotografati su fondo chiaro o scuro. I pixel trasparenti (PNG con sfondo vuoto) sono sempre ignorati.
Come trovo il codice di un colore preciso dell’immagine?
Clicca sul punto che ti interessa: il colore di quel pixel viene aggiunto alla palette con i suoi codici. Spostando il cursore sull’immagine vedi anche, in tempo reale, il colore sotto il puntatore. Su touch basta toccare il punto.
A cosa servono HEX, RGB, HSL, CMYK e OKLCH?
HEX e RGB sono i formati più usati su web e nei programmi grafici. HSL descrive il colore con tinta, saturazione e luminosità, comodo per ricavare varianti. OKLCH è il formato più recente, supportato dai CSS moderni, con luminosità percettiva uniforme. Il CMYK qui è una conversione matematica semplice, utile come riferimento: per la stampa professionale serve un profilo colore dedicato e il risultato può differire.
Cosa indica il contrasto accanto a ogni colore?
È il rapporto di contrasto WCAG tra il colore e il testo più leggibile (bianco o nero) scelto automaticamente. Un valore di almeno 4,5 corrisponde al livello AA per il testo normale, di almeno 7 al livello AAA; da 3 va bene solo per testi grandi. Ti aiuta a capire subito se un colore può fare da sfondo a un testo.
In quali formati posso esportare la palette?
Puoi copiare o scaricare l’elenco in testo semplice (un HEX per riga), come variabili CSS, variabili SCSS, array JSON, snippet per Tailwind o tabella CSV. Con “Scarica immagine palette” ottieni un PNG con le strisce dei colori.
Il colore che vedo è identico a quello dell’originale?
È quello che il browser legge dai pixel dell’immagine. Foto con profili colore diversi da sRGB, come alcune immagini in Display P3, possono apparire con tonalità leggermente diverse su altri schermi o programmi. Per tonalità di marca o per la stampa, controlla sempre il colore con gli strumenti del tuo programma di grafica.
L’immagine viene caricata su un server?
No. L’immagine viene letta e analizzata nel tuo browser: non viene inviata né salvata da nessuna parte e non c’è limite al numero di immagini che puoi provare.

Quanto è utile questo strumento?

Sii il primo a votare

Tool correlati