Estrattore colori da immagine
Estrai i colori dominanti dalle immagini localmente nel browser.
PNG, JPG o WebP, fino a 8 MB. I pixel vengono elaborati qui nel browser.
Scegli un’immagine o prova l’esempio per vedere i colori dominanti.
Continua con questo colore
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromoforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Come funziona l'estrazione colori da immagine
Caricare un'immagine nel browser e ottenere i colori dominanti è interamente client-side: nessun upload su server, nessuna API esterna. La tua immagine non lascia mai il tuo dispositivo.
L'algoritmo ridimensiona l'immagine, ne campiona i pixel con la Canvas API del browser e poi raggruppa i colori simili con k-means nello spazio RGB. Il risultato sono sei colori — la media di ciascun gruppo — ordinati per dominanza, cioè per quanti pixel campionati copre ogni gruppo.
I colori estratti non sono sempre i più belli o utili direttamente: un'immagine fotografica avrà spesso grigi neutri tra i dominanti, perché sono davvero le tinte che coprono più superficie. Lo strumento non applica nessun filtro sui neutri: restituisce i sei gruppi più estesi così come sono, e sta a te scegliere quale usare come base.
Dopo l'estrazione clicca un colore per impostarlo come base della palette: da lì gli altri strumenti di Chromoforge generano scale complete, verificano il contrasto o creano gradienti.
Esempi pratici
- Brand da fotografia: il cliente ti dà una foto di prodotto come riferimento cromatico. Estrai i colori dominanti e usali come punto di partenza per la palette UI.
- Matching UI-immagine: hai un hero con una foto e vuoi che i bottoni e i testi abbiano colori coerenti con essa. Estrai i dominanti, scegli il più saturo come accent.
- Analisi competitor: carica lo screenshot del sito di un competitor per capire rapidamente la loro palette senza dover usare un color picker manuale su ogni elemento.
- Artwork e illustrazioni: estrai la palette da un'illustrazione per creare materiali correlati (slide, social, brochure) con la stessa armonia cromatica.
FAQ — Estrattore colori immagine
Quali formati immagine sono supportati?
PNG, JPEG e WebP, fino a 8 MB per file. Gli altri formati — GIF, AVIF, SVG e i RAW come CR2, NEF o ARW — vengono rifiutati con un messaggio di errore: convertili prima in uno dei tre formati supportati.
La mia immagine viene inviata a un server?
No. L'elaborazione avviene interamente nel browser tramite Canvas API. Il file viene letto in memoria locale, campionato e poi scartato. Non c'è nessun upload, nessuna connessione di rete per l'elaborazione dell'immagine.
Perché i colori estratti non corrispondono a quelli che mi aspettavo?
Il clustering raggruppa pixel simili, quindi un gradiente sarà rappresentato da uno o pochi colori medi. Fotografie con molte ombre e luci producono spesso grigi come dominanti anche se contengono colori vivaci: sono davvero i toni più diffusi. Se ti serve la tinta accesa e non il grigio, ritaglia l'immagine sulla zona che ti interessa e riprova.
Altri strumenti Chromoforge
Strumenti e guide collegati
Esempio pratico
L’immagine di esempio contiene blu scuro (#182A3A), sabbia (#E8DED0) e terracotta (#C56B4B). Provala qui sopra, seleziona il sabbia e apri il controllo contrasto con il blu scuro come testo. L’estrazione raggruppa un campione di pixel RGB in un massimo di sei gruppi; il risultato è approssimativo e può differire dai colori sui bordi netti.
Verifica insieme il testo e lo sfondo effettivi. Il nome del colore o il numero della tonalità non garantiscono un testo leggibile.
:root {
--image-1: #182A3A; /* dark blue */
--image-2: #E8DED0; /* sand */
--image-3: #C56B4B; /* terracotta */
}
.card { background: var(--image-2); color: var(--image-1); }