Guida pratica
Ottenere un codice esadecimale da una foto richiede un clic. Ottenere quello giusto richiede un po' più di attenzione, perché la compressione JPEG e i bordi sfumati cambiano i pixel prima del clic. Questa guida mostra dove i colori sbagliano e come evitarlo, e ogni suo numero è stato misurato in un browser vero.
Di Md. Delwar Hossen · misure effettuate il 25 agosto 2026 Ultimo aggiornamento
Carica un'immagine, passa il mouse per trovare il pixel che ti serve e clicca per salvarlo. Qui sotto trovi gli stessi tre passi, con il perché di ciascuno.
Nella scheda del tuo browser
La tua immagine
Trascinata, incollata, scelta fra i tuoi file o recuperata da un URL.
Decodificata una volta
createImageBitmap, con l'orientamento EXIF applicato perché una foto da telefono sia dritta.
Canvas sorgente
Tenuto alla risoluzione naturale dell'immagine e mai ridimensionato. Ogni lettura del colore parte da qui.
Il canvas di visualizzazione
quello che vedi
Disegnato con una trasformazione di zoom e spostamento, con lo smussamento disattivato oltre 2× per mostrarti i singoli pixel. Da questo canvas non si campiona mai nulla.
Il campionatore
quello che ottieni
Legge il canvas sorgente nel pixel sotto il cursore e fa la media del quadrato scelto nel comando Campione.
Il bivio in mezzo merita un secondo sguardo, perché risponde alla domanda che si fa più spesso. Ingrandire al 6400% non dà una lettura più precisa, e rimpicciolire non ne dà una più sfocata. Lo zoom esiste perché tu possa vedere su quale pixel stai per cliccare. La lettura, invece, viene sempre dall'originale intatto.
Portano tutti allo stesso risultato. Cambia solo quello che può andare storto.
Trascina un file in un punto qualsiasi dello strumento. L'area di rilascio si illumina mentre ci stai sopra.
Una seconda immagine trascinata qui sostituisce la prima e cancella i tuoi marcatori.
Uno screenshot o un'immagine copiata da qualsiasi parte. Funziona in qualsiasi punto della pagina.
Non funziona mentre il cursore è in un campo di testo: così, se incolli un link nel campo URL, non viene incollato anche come immagine.
Il solito selettore di file, filtrato sulle immagini.
Sul telefono è da qui che arrivi alla galleria. La maggior parte dei selettori di file per smartphone propone anche la fotocamera.
Incolla il link di un'immagine: viene recuperata e decodificata nel tuo browser.
Funziona solo se chi la ospita permette ad altri siti di leggerne le immagini. Molti non lo fanno. Se rifiuta, scarica il file e trascinalo qui.
Una foto intitolata «Powder at sunset», pensata per farti provare tutto prima di usare un tuo file.
Le griglie di pixel della sezione sulla lente, più sotto, vengono da questa foto.
Non c'è un limite di risoluzione perché l'immagine non viene mai ridimensionata per il campionamento: resta alla sua risoluzione naturale e viene letta direttamente. L'unica regola di formato che può crearti problemi riguarda i vettoriali: un SVG senza larghezza e altezza sull'elemento radice non ha una risoluzione da campionare e viene rifiutato.
Quando passi il mouse sull'immagine, la lente ingrandisce i 13 × 13 pixel attorno al cursore. Non è un ornamento: allo zoom normale un pixel è molto più piccolo della punta del cursore, e senza lente tireresti a indovinare.
Pixel 435, 204 della foto di esempio, ingrandito circa 20 volte.
#E79983
Il singolo pixel sotto il cursore.
#CE8472
6,64 di scarto rispetto al singolo pixel.
#B97262
12,92 di scarto rispetto al singolo pixel.
#A8675D
17,9 di scarto rispetto al singolo pixel.
Due soggetti si incontrano negli stessi tredici pixel. Allargando il campione la media scavalca il confine e restituisce un colore che non appartiene a nessuno dei due: qui conviene restare a un solo pixel e ingrandire.
Pixel 149, 336 della foto di esempio, ingrandito circa 20 volte.
#877978
Il singolo pixel sotto il cursore.
#524442
19,53 di scarto rispetto al singolo pixel.
#554745
18,55 di scarto rispetto al singolo pixel.
#584948
17,79 di scarto rispetto al singolo pixel.
Dettaglio e rumore di compressione, senza un singolo confine che li attraversi. Sbagliare di un pixel ti porta da tutt'altra parte, ed è esattamente il caso per cui esiste un campione più largo.
Pixel 72, 17 della foto di esempio, ingrandito circa 20 volte.
#283270
Il singolo pixel sotto il cursore.
#283371
0,36 di scarto rispetto al singolo pixel.
#283371
0,36 di scarto rispetto al singolo pixel.
#283371
0,36 di scarto rispetto al singolo pixel.
In questi tredici pixel non succede niente. Ogni dimensione di campione cade nello stesso punto e sbagliare di un pixel non costa nulla: il campione più stretto è quello giusto.
Entrambi i valori sono differenze CIEDE2000. Sotto circa 1 l'occhio non distingue i due colori; sopra 10 appaiono come colori diversi.
Passa da un punto all'altro qui sopra e guarda i due valori sotto. Contengono tutta la regola per il comando Campione, e puoi ricavarla direttamente invece di prenderla per buona:
200 prelievi in punti casuali di una zona rumorosa la cui media reale è #10A99B. Più il valore è basso, più il campione è vicino.
Passare da 1 px a 11 × 11 riduce l'errore da 6,45 a 0,57: da un colore palesemente sbagliato a uno che nessun occhio distingue da quello giusto. Vale solo quando i pixel attorno al cursore appartengono alla stessa superficie; a cavallo di un bordo la stessa media ti gioca contro.
Misurato in un browser vero
Tre fattori rovinano un colore prima ancora che tu clicchi. Nessuno dipende dallo strumento, tutti si possono evitare e tutti si possono misurare: per questo, invece di descriverli, qui li trovi misurati.
Un disegno in campiture di colori del brand, salvato a cinque livelli di qualità e riletto. Le barre sono lo scarto CIEDE2000 medio rispetto all'originale, su 51.362 pixel che stanno in una campitura e 5019 che stanno su un confine.
Anche con l'impostazione di qualità più alta, un pixel su un bordo si discosta già di 6,91, mentre un pixel in una campitura si discosta solo di 0,37, una differenza che nessuno vede. Abbassare la qualità a q40 cambia entrambi i valori molto meno di quanto li cambi allontanarsi dal bordo. Il punto in cui clicchi conta più dell'impostazione di qualità.
Due campiture che si incontrano su un bordo netto, salvate a q90 e rilette un pixel alla volta allontanandosi dalla linea di confine.
pixel dal confine
Il primo pixel oltre la linea di confine si discosta di 19,04 dal colore che dovrebbe avere: viene letto come #648187, un colore che non esiste in nessuna delle due metà dell'immagine. A partire da 3 pixel dal bordo, l'errore scende sotto la soglia oltre la quale la differenza si vede a colpo d'occhio. Salvando lo stesso file a q60 il risultato non cambia: nemmeno in questo caso una qualità più alta risolve il problema.
Un cerchio disegnato su uno sfondo, senza alcuna compressione.
#24409A
La forma
quello che volevi prelevare
#7A736A
Il suo bordo
a 34,96 dalla forma
#FBBF24
Lo sfondo
l'altro colore vero
Perché una curva sembri liscia, il motore di rendering fonde la forma nello sfondo lungo tutto il suo contorno. Quel solo cerchio ha 77 colori distinti sul bordo, e nemmeno uno sta nel disegno. Clicca a metà di un bordo e ottieni #7A736A: un colore che nessuno ha scelto, a 34,96 da quello a cui miravi. Nessun formato di file lo impedisce: la soluzione è ingrandire abbastanza da vedere la griglia di pixel e cliccare dentro la forma.
Ogni valore di questa pagina viene da scripts/measure-color-drift.mjs, che gira in Chromium 151.0.7922.34. È stato eseguito l'ultima volta il 25 agosto 2026. La codifica e la decodifica JPEG sono quelle del browser stesso, quindi i risultati mostrano cosa fa un browser vero. Ogni scarto è un valore CIEDE2000 calcolato dalla stessa funzione che usa lo strumento. Lo script disegna da sé le immagini di prova; le griglie di pixel vengono dalla foto di esempio inclusa.
Le frecce sono il modo più affidabile per colpire un pixel preciso. Clicca una volta sull'immagine per selezionarla, e i tasti qui sotto funzionano.
Nessuno di questi comandi funziona finché non carichi un'immagine, ed è voluto: un canvas vuoto non ha pixel su cui muoversi.
Un clic che trascina per più di quattro pixel viene trattato come uno spostamento e non preleva nulla, così una mano un po' tremante non lascia mai un marcatore che non volevi.
Una scorciatoia funziona ovunque nella pagina e non solo sull'immagine: Ctrl + V carica qualunque immagine sia nei tuoi appunti, o segue un link a un'immagine se è quello che hai copiato. Non interviene mentre scrivi in un campo di testo.
Raramente basta un singolo codice HEX. Le quattro schede accanto all'immagine trasformano il colore prelevato in materiale pronto per il tuo progetto.
I colori di cui la foto è davvero fatta, con la percentuale di pixel che ciascuno occupa. L'immagine viene ridotta a 160 pixel sul lato lungo, divisa con median cut, poi affinata con k-medie pesate in CIE LAB perché i gruppi corrispondano a come le persone raggruppano davvero i colori, e non a come un computer ordina i numeri.
Le aree completamente trasparenti vengono escluse: un logo su sfondo trasparente ti dà i colori del logo, non una grossa fetta di trasparenza.
Ogni clic lascia un marcatore numerato sull'immagine. Rinominali, riordinali, elimina quelli che non ti servono. L'ordine in cui li lasci è quello in cui escono all'esportazione, e i nomi diventano i nomi delle variabili.
I marcatori appartengono all'immagine. Caricarne un'altra li cancella, quindi esporta prima se vuoi tenerli.
Sei combinazioni costruite ruotando la tonalità del colore prelevato. La rotazione avviene in OKLCH e non in HSL, e conta più di quanto sembri: in HSL i gialli diventano spenti e i blu troppo accesi, perché passi uguali in HSL non sono passi uguali per l'occhio.
Scegli un colore quasi grigio e ogni combinazione collassa sulla stessa sfumatura. Il pannello lo dice invece di far finta di niente.
I toni chiari verso il bianco, quelli scuri verso il nero e quelli smorzati verso il grigio, dieci passi ciascuno. La quarta opzione è quella che ti serve per un'interfaccia: una scala da 50 a 950 a luminosità percettive fisse, la forma che un design system si aspetta.
Vedi ogni variante di un colore nel selettore colore, dove le stesse scale hanno più spazio.
Passando il mouse sull'immagine, il campione e tutte e nove le notazioni si aggiornano in tempo reale; armonie e scale aspettano invece il clic, così non cambiano mille volte mentre muovi il mouse. Per approfondire un colore (34 formati, contrasto, daltonismo, grafico della gamma) incollalo nel selettore colore.
Tutto quello che vedi si può esportare. Scegli cosa esportare e in quale formato.
I miei colori
I marcatori che hai messo, nel tuo ordine, con i tuoi nomi.
Palette dell'immagine
I colori dominanti trovati dall'estrattore.
Armonia attuale
Ogni elemento di tutte e sei le combinazioni.
Scala attuale
Quella che hai aperto.
Copia o scarica. Non c'è un'esportazione in PNG o JPEG: la cosa più vicina è il foglio di campioni SVG, che resta modificabile.
Ogni colore che confermi viene scritto nella barra degli indirizzi. Mettilo tra i preferiti, mandalo a qualcuno o incollalo in un ticket: il link si apre esattamente su quel colore. Nient'altro della tua sessione viene condiviso.
Gli ultimi 24 colori prelevati restano salvati sul tuo dispositivo e li ritrovi anche domani. Non escono mai dal dispositivo, e per cancellarli basta un pulsante.
Quattro attività comuni, con il percorso completo attraverso i due strumenti.
Ogni messaggio che lo strumento può mostrarti, cosa significa e cosa fare.
Questa immagine è troppo pesante.Provane una sotto i 40 MB.
Il limite riguarda il peso del file, non le dimensioni. Una foto grande va bene; un export a livelli da 60 MB no. Salva una copia appiattita.
Questo file non è un'immagine.PNG, JPEG, WebP, AVIF, GIF, BMP e SVG funzionano tutti.
Di solito un PDF, un file di design o uno ZIP. Esportane prima un'immagine raster o vettoriale.
Questa immagine non ha una dimensione fissa.Un file vettoriale ha bisogno di larghezza e altezza per essere campionato.
Un SVG senza larghezza e altezza sull'elemento radice non ha una risoluzione naturale da campionare. Aggiungile, oppure aprilo ed esporta un PNG.
Non è stato possibile recuperare questa immagine.Il sito che la ospita impedisce agli altri siti di leggerne le immagini. Scaricala e trascina qui il file.
È la regola del browser, e nessuna pagina web può aggirarla. Scarica il file e trascinalo qui.
Sono supportati solo URL di immagini in http e https.
Hai incollato qualcosa che non è un indirizzo web, oppure un URL data: o file:. Per un file locale usa il pulsante «Scegli un'immagine».
Il tuo browser ha bloccato l'accesso agli appunti
Copiare richiede un permesso che alcuni browser negano nelle finestre private o quando la pagina non è in primo piano. Clicca sulla pagina e riprova, oppure seleziona il valore e copialo a mano.
La scorciatoia per incollare viene ignorata finché il cursore è dentro un campo di testo, così incollare un link nel campo URL non prova anche a caricare gli appunti come immagine. Clicca prima su una parte vuota della pagina, poi incolla.
No. Zoom e spostamento riguardano solo il canvas che vedi. Ogni lettura viene da un secondo canvas, nascosto, tenuto alla risoluzione naturale dell'immagine: lo stesso pixel restituisce quindi lo stesso valore al 100% e al 6400%. Ingrandisci solo per vedere su quale pixel stai per cliccare.
Parti da 1 px. Allarga il campione solo quando i pixel attorno al cursore appartengono tutti alla stessa superficie ma sono disturbati dal rumore: è lì che aiuta di più. Su una zona rumorosa, 11 × 11 è finito a 0,57 dal colore vero, mentre 1 px si è fermato a 6,45. Vicino a un bordo fai il contrario e resta a 1 px: lì un campione più largo fa la media a cavallo del confine e restituisce un colore che non appartiene a nessuno dei due lati.
Quasi sempre per uno di tre motivi. Hai cliccato a un paio di pixel da un bordo, dove la compressione ha impastato i due colori: su un confine netto il primo pixel oltre il bordo si discosta di 19,04 ΔE e servono 3 pixel perché il colore torni corretto. Oppure hai cliccato su un bordo con antialiasing, che mescola la forma con lo sfondo e non esiste in nessun file di design. Oppure l'immagine è lo screenshot di uno screenshot. Ingrandisci, spostati di qualche pixel verso il centro della forma e preleva di nuovo.
Clicca una volta sull'immagine per selezionarla, poi usa le frecce. Ogni pressione sposta il cursore di un pixel, e Maiusc con una freccia lo sposta di dieci. Premi Invio per fissare il colore sotto il cursore.
Il sito che ospita quell'immagine non permette ad altri siti di leggerne i pixel. È una regola imposta dai browser e da una pagina web non c'è modo di aggirarla: per questo lo strumento te lo dice chiaramente invece di fallire in silenzio. Scarica l'immagine e trascina qui il file.
Il colore attuale sì, perché vive nella barra degli indirizzi e quel link puoi metterlo tra i preferiti o condividerlo. Anche i colori usati di recente restano sul tuo dispositivo e sopravvivono. I marcatori sull'immagine no: non sopravvivono a un ricaricamento, e anche caricare una nuova immagine li cancella, quindi esporta o copia quello che vuoi tenere prima di andare avanti.
Apri il PDF, ingrandisci finché il colore occupa buona parte dello schermo, fai uno screenshot e incollalo qui con Ctrl + V (Cmd + V su Mac). Poi clicca sul pixel. Uno screenshot PNG conserva i colori come li mostra il tuo schermo, ed è quello che ti serve per il lavoro sul web.
Apri questa pagina nel browser del telefono, tocca «Scegli un'immagine» per prendere una foto dalla galleria o scattarne una nuova, poi allarga due dita per ingrandire e tocca il pixel che vuoi. I codici compaiono sotto l'immagine, e ognuno si copia con un tocco.
Apri il color picker e provalo sulla foto di esempio. Le immagini che apri non escono mai dal tuo dispositivo e non serve registrarsi.
