Estrattore colori da immagine
Estrai i colori dominanti dalle immagini localmente nel browser.
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 campiona i pixel dell'immagine usando la Canvas API del browser, poi raggruppa i colori simili tramite clustering (variante di k-means o mediana del taglio). Il risultato sono 5-10 colori che rappresentano le aree cromatiche principali dell'immagine, ordinati per dominanza (quanti pixel coprono).
I colori estratti non sono sempre i più belli o utili direttamente: un'immagine fotografica avrà molte sfumature di grigio neutro tra i dominanti. Per questo lo strumento filtra i neutri quasi-grigi e privilegia i toni con saturazione significativa, restituendo una palette più usabile.
Dopo l'estrazione puoi selezionare quali colori tenere, regolare manualmente i hex se necessario, e poi passarli agli altri strumenti di Chromoforge per generare scale complete, verificare il contrasto o creare 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?
Lo strumento usa la Canvas API del browser, che supporta i formati standard: JPG, PNG, WebP, GIF (primo frame), SVG rasterizzato. I file RAW (CR2, NEF, ARW ecc.) non sono supportati nativamente dal browser e devono essere convertiti prima.
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. Usa il filtro neutri per escluderli e mostrare solo i toni cromatici.