Trascina qui la tua immagine
JPG, PNG, WebP accettati
Carica un'immagine per estrarre la palette di colori dominanti in HEX e RGB. Oppure usa il contagocce per prendere il colore esatto di qualsiasi pixel.
Carica qualsiasi immagine JPG, PNG o WebP. Il tool analizza automaticamente i pixel e identifica i colori dominanti tramite un algoritmo di quantizzazione. Ogni colore viene mostrato con il codice HEX e RGB pronti da copiare con un click. Per prelevare un colore specifico usa il contagocce: clicca sul punto esatto dell'immagine e ottieni il codice preciso di quel pixel.
Un estrattore colori (o color picker da immagine) analizza un'immagine e ricava i colori principali. È indispensabile per designer, sviluppatori frontend e chi lavora con brand identity: permette di ricavare una palette fedele da un logo, da una foto di riferimento o da uno screenshot senza dover indovinare i codici HEX a occhio.
Casi d'uso tipici: ricavare i colori esatti di un logo aziendale ricevuto come PNG; costruire una palette coerente partendo da una fotografia; replicare i colori di un design esistente in CSS; trovare il colore esatto di un elemento in uno screenshot; creare temi WordPress, Figma o Tailwind che corrispondono a un'immagine di riferimento.
HEX (#FF5733): formato esadecimale, 3 coppie per rosso/verde/blu. È il formato nativo di CSS e dei design tool — copia direttamente come valore per color: o background-color:. RGB (rgb(255, 87, 51)): 3 valori da 0 a 255. Utile quando devi manipolare i canali separatamente in codice o aggiungere trasparenza con rgba(). HSL (hsl(10, 100%, 60%)): Hue (tinta 0–360°), Saturation (saturazione %), Lightness (luminosità %). Il più intuitivo per creare varianti di un colore: aumenta la Lightness per toni più chiari, riduci la Saturation per toni più neutri.
Estrarre la palette "dominante" non è triviale: un'immagine fotografica può avere milioni di colori distinti. Il tool usa un algoritmo di quantizzazione (tipicamente Median Cut o k-means clustering) che raggruppa i pixel in N cluster, ognuno rappresentato dal suo colore medio. Il risultato è la palette che meglio rappresenta i colori visivamente più presenti, non solo quelli più frequenti in assoluto (spesso pixel di sfondo uniformi).
Una volta estratti i colori dominanti, puoi costruire una palette completa per il tuo progetto. Partendo dal colore primario in HEX, genera tinte (più chiaro) e ombre (più scuro) modificando la Lightness in HSL. Aggiungi un colore di accento complementare (Hue ± 180°). Definisci le variabili CSS: --color-primary: #FF5733; --color-primary-light: #FF7A5C; --color-primary-dark: #CC3A22;. Questo workflow dall'immagine alle variabili CSS può essere completato in meno di 5 minuti con questo tool.
L'algoritmo estrae i colori più dominanti — tipicamente 5–10 colori rappresentativi. Il contagocce permette invece di prelevare il colore esatto di qualsiasi pixel specifico, utile per match preciso di un elemento particolare.
Sì — carica lo screenshot come PNG. Per estrarre i colori di un sito live direttamente nel browser, usa l'eye-dropper nativo di Chrome/Firefox (disponibile nelle DevTools o nell'inspector CSS) che permette di prelevare qualsiasi colore dalla pagina senza screenshot.
Il tool estrae colori in formato HEX/RGB (spazio colore sRGB). Per la stampa professionale serve la conversione in CMYK — non c'è una formula esatta perché CMYK dipende dal profilo colore della stampante. Usa Adobe Photoshop, Illustrator o uno strumento di conversione CMYK dedicato per ottenere valori precisi per la stampa.