Color picker: trova il colore da un'immagine, pixel per pixel

Un color picker per immagini è uno strumento che legge i valori reali dei pixel di un'immagine e te ne restituisce i codici colore. Indichi un punto di una foto, di uno screenshot o di un logo e lo strumento ti dice che quel pixel è #F5A17D, oppure rgb(245, 161, 125), o la notazione che ti serve. Tutto qui. Non è un filtro né un editor, e la tua immagine non cambia in nessun modo. È un modo per portare un colore da un'immagine a un foglio di stile, a un file di design o a un ordine al colorificio.

Il browser decodifica l'immagine in una griglia di pixel, e ogni pixel ha un valore di rosso, verde e blu fra 0 e 255. Questo strumento disegna l'immagine decodificata su un canvas HTML alla dimensione originale, poi rilegge il pixel sotto il cursore. Da quei tre numeri nascono tutte le altre notazioni: l'esadecimale sono gli stessi numeri scritti in base 16, mentre HSL e OKLCH descrivono lo stesso colore con un angolo e una luminosità. Lo zoom cambia solo quello che vedi. Il canvas che viene letto non è mai ridimensionato, quindi una lettura a 10× è identica a una in vista adattata.

Perché indovinare costa più tempo che misurare, e un colore quasi giusto si nota. Se stai ricostruendo un layout da uno screenshot, cercando il colore del brand in un PDF che ti hanno mandato, o estraendo una palette da una foto, il colore è già lì. Ti serve solo in una forma che puoi incollare. Un selettore ti dà anche tutto ciò che circonda un colore ed è noioso da calcolare a mano: le sue sfumature, il rapporto di contrasto su bianco e su nero, e se resta distinguibile dai suoi vicini per chi ha un deficit della visione dei colori.

Trascina l'immagine sullo strumento, passa il mouse sull'area che ti interessa e clicca. La lente mostra il blocco di 13 × 13 pixel sotto il cursore con la griglia in vista, così vedi quale pixel stai per prendere prima di prenderlo. Il clic lascia un marcatore numerato e il pannello accanto si riempie con nove notazioni per quel pixel. Clicca su una qualsiasi per copiarla. Quando serve la massima precisione, ingrandisci con la rotellina e usa le frecce, che spostano il campione di un pixel alla volta: così non devi più prendere la mira a mano.

Tutto ciò che il tuo browser sa decodificare: in pratica JPEG, PNG, WebP, AVIF, GIF e BMP, più i file SVG che dichiarano larghezza e altezza. Il limite è di 40 MB per file; non ci sono limiti di risoluzione. Puoi trascinare un file, sceglierne uno dal computer, incollare uno screenshot con Ctrl + V o incollare l'URL di un'immagine sul web. Le foto scattate col telefono arrivano dritte, perché l'orientamento EXIF viene applicato durante la decodifica invece di essere ignorato.

Sì, in due modi. Ogni clic lascia un marcatore e non c'è un limite al loro numero: puoi percorrere l'immagine raccogliendo colori, rinominarli uno per uno, riordinarli ed esportarli tutti insieme. Inoltre la scheda Palette dell'immagine descrive l'immagine nel suo insieme: la riduce a 160 pixel sul lato lungo, la divide con un passaggio di median cut e poi la affina con k-medie pesate in CIE LAB, perché i gruppi corrispondano a come le persone vedono davvero i colori. Ciascuno degli otto campioni indica la percentuale dell'immagine che copre.

Sì. Tocca per prelevare, trascina con un dito per spostarti e usa due dita per lo zoom. Quando scegli un file, di solito il telefono propone anche la fotocamera: puoi fotografare qualcosa e prelevarne subito il colore. L'unica cosa che uno schermo tattile toglie è il passaggio del cursore: non c'è un puntatore che ti precede, quindi un tocco conferma subito. Sui dettagli piccoli conviene ingrandire prima di toccare, lo stesso consiglio che vale per le frecce su un computer.

Sì, in Chrome, Edge e negli altri browser Chromium. Il pulsante «Preleva dallo schermo» usa l'API EyeDropper nativa del browser, che può campionare qualsiasi pixel del tuo schermo, anche in un'altra finestra, in un fotogramma video o in un PDF. Firefox e Safari non hanno implementato quell'API, quindi lì il pulsante non compare. Su quei browser, fai uno screenshot e incollalo con Ctrl + V. Prelevare da uno screenshot PNG di solito restituisce lo stesso valore che avresti dallo schermo.

Nove, in tempo reale, per ogni colore che prelevi: HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH e il nome di colore CSS più vicino. Il nome è scelto con CIEDE2000 invece che con la distanza RGB, quindi è quello che somiglia davvero di più. HEX e RGB sono quelli che incollerai più spesso; con HSL e HSV è più facile ragionare quando vuoi lo stesso colore un po' più chiaro; OKLCH è percettivamente uniforme, ed è per questo che qui scale e armonie si calcolano in OKLCH e non in HSL. Il selettore colore gemello scompone un singolo colore in 34 codici, aggiungendo HWB, CIELUV, OKLab, CIE XYZ e sRGB lineare.

La lettura in sé è esatta: lo strumento restituisce i valori dei byte dell'immagine decodificata, senza interpolazione e senza arrotondamenti. La precisione si perde nell'immagine. In un JPEG salvato con qualità 95, un pixel in una campitura sta a 0,37 delta-E dall'originale (il delta-E misura la differenza di colore visibile; sotto 1 è invisibile). Un pixel su un bordo è già fuori di 6,91, e il colore torna preciso solo a circa 3 pixel da un bordo netto. L'antialiasing fa un danno simile senza compressione: il bordo di un cerchio di prova ha prodotto 77 colori che non compaiono né nella forma né nello sfondo. Misurato il 25 agosto 2026 in Chromium 151.0.7922.34.

Sì. Qualsiasi valore si copia con un clic, e la scheda Esporta esporta un intero gruppo in un colpo solo: i tuoi marcatori, la palette estratta dall'immagine, le armonie o una scala completa da 50 a 950. I formati sono sei: proprietà personalizzate CSS, un blocco @theme di Tailwind v4, variabili SCSS con una mappa, JSON, un semplice elenco di codici HEX e un foglio di campioni SVG con le etichette. Ognuno si può copiare negli appunti o scaricare come file. Non c'è esportazione in PNG né in campioni Adobe (ASE): il foglio SVG è la cosa più vicina a un'immagine condivisibile di una palette.

No. Su questo sito non esiste un server che riceva i file: il tuo browser apre il file e lo strumento legge i pixel da un canvas nella stessa scheda. Non ci sono account né strumenti di analisi. Per verificarlo, apri il pannello Rete del browser e preleva qualche colore: non compare nessuna richiesta. Il test end-to-end del progetto fa lo stesso e fallisce se una richiesta esce dalla pagina. L'unica eccezione è incollare l'URL di un'immagine, perché allora il tuo browser va a prendere quell'indirizzo da chi lo ospita.

Ne stai usando uno. Questo color picker è gratuito: niente registrazione, niente filigrana, nessun limite giornaliero e nessuna funzione riservata a un piano a pagamento. Tutte le notazioni, l'estrazione della palette e i sei formati di esportazione sono disponibili per tutti. È possibile perché il lavoro avviene sul tuo dispositivo, quindi non ci sono costi di server per ogni immagine. Puoi usarlo online da computer, tablet o telefono, in qualsiasi browser moderno, senza installare nulla. Aggiungi la pagina ai preferiti se vuoi averla a portata di mano: il link nella barra degli indirizzi conserva anche l'ultimo colore prelevato.

Quello che risponde alla domanda che hai davvero, e in fondo ci sono solo quattro cose da controllare. Manda il tuo file a un server, o lo legge nel tuo browser? Ti dà qualcosa oltre a un codice esadecimale, come una palette, una verifica del contrasto o una scala di sfumature? Puoi allargare l'area di campionamento, che è ciò che rende leggibile una foto sgranata? E puoi tirare fuori il risultato in un formato che i tuoi strumenti accettino? Questo fa tutte e quattro le cose. I limiti: il contagocce di sistema («Preleva dallo schermo») funziona solo nei browser Chromium, e non c'è esportazione in campioni Adobe né in PNG.

Fai lo screenshot, torna su questa pagina e premi Ctrl + V (Cmd + V su Mac): l'immagine si carica subito. Clicca sul pixel che ti serve e copia il suo codice HEX. Gli screenshot di solito vengono salvati in PNG, senza compressione, quindi il codice di norma corrisponde a quello che vedevi sullo schermo.

Carica l'immagine e apri la scheda «Palette dell'immagine»: lo strumento raggruppa l'immagine nei suoi otto colori principali e mostra quanta parte dell'immagine occupa ognuno. Copia un singolo campione o esporta l'intera palette come variabili CSS, tema Tailwind, SCSS, JSON, elenco HEX o foglio di campioni SVG.

Sì. Ogni colore prelevato mostra il nome CSS più vicino, come «slateblue» o «tomato», scelto in base a quanto i colori si somigliano alla vista e non alla distanza tra i numeri RGB, più una breve descrizione a parole. Il nome è la corrispondenza più vicina; il codice HEX è il valore esatto.

Non direttamente. Il color picker di Google, che compare per ricerche come «color picker», ti fa scegliere un colore da uno spettro, ma non può leggere un pixel della tua immagine. Per avere il codice esatto da una foto o da uno screenshot, aprila in un color picker per immagini e clicca sul pixel.

No. Questo strumento funziona in qualsiasi browser recente, su computer o telefono, senza installare nulla. Per prelevare un colore da qualsiasi punto dello schermo, usa il pulsante «Preleva dallo schermo», che funziona in Chrome ed Edge. Negli altri browser, fai uno screenshot e incollalo qui.