Estrai il codice colore da un’immagine con Image Color Picker

Carica l’immagine nell’Image Color Picker e clicca sul punto di cui ti serve il colore. Lo strumento mostra subito i valori HEX, RGB e HSL del pixel; con «Copia» copi il valore. Un clic sul sole dell’immagine di esempio restituisce #ffd166. Nel codice HEX, ogni coppia di cifre rappresenta rosso, verde e blu (ff = 255, d1 = 209, 66 = 102): quindi #ffd166 corrisponde a rgb(255, 209, 102) e hsl(42, 100 %, 70 %).

Un contagocce, detto anche selettore colori o Eyedropper, rileva il colore in un punto e ne restituisce il codice. Image Color Picker è un contagocce online per immagini e funziona nel browser, anche sul cellulare: non ti serve un'app. Sul cellulare, tocca un punto e trascina il dito; la lente mostra i pixel sottostanti. Con la tastiera, sposta la selezione di 1 pixel con i tasti freccia (di 10 tenendo premuto Maiusc) e salva il colore nella cronologia con Invio.

No. L’immagine viene caricata su una canvas nel tuo browser e analizzata lì. Non viene caricata su un server né salvata; anche la cronologia dei colori selezionati resta solo in questa scheda. Puoi verificarlo nella scheda Rete degli strumenti per sviluppatori: il caricamento e i clic non generano richieste.

Fai uno screenshot (Windows: Windows+Maiusc+S; Mac: Cmd+Maiusc+4, con Ctrl per copiarlo negli appunti) e incollalo nello strumento con Ctrl+V (Mac: Cmd+V). Poi clicca sul punto desiderato e copia il codice colore. Così puoi leggere i colori di un sito, un’app o un gioco senza estensioni del browser.

Ci sono quattro motivi comuni. Primo: le immagini JPG salvano i colori con perdita di dati, quindi i pixel vicini possono essere leggermente diversi. Secondo: il browser può convertire in sRGB i profili colore incorporati (per esempio Display P3), mentre altri programmi mostrano il valore originale. Terzo: uno screenshot mostra il colore dopo la gestione del colore dello schermo. Quarto: lo strumento analizza le immagini oltre 36 megapixel in formato ridotto. Per le foto, imposta quindi la media su 3 × 3, 5 × 5 o 11 × 11 pixel: lo strumento calcola la media di 9, 25 o 121 pixel attorno al puntatore invece di rilevare un valore anomalo. Per colori uniformi, come quelli di un logo, è più adatta l'opzione «1 pixel».

Carica l’immagine: la palette appare subito sotto. Puoi impostare da 2 a 12 colori e vedere per ciascuno il codice HEX e la percentuale dell’immagine che occupa. Lo strumento analizza almeno 90.000 pixel distribuiti uniformemente (le immagini più piccole per intero), ignora quelli trasparenti e raggruppa i colori con il metodo median cut. Per le foto, la palette è approssimativa. Con «Copia elenco HEX» ottieni un elenco; con «Copia variabili CSS» ottieni righe come --color-1: #08203a; per un blocco :root, da usare con var(--color-1).

Oltre ai valori, lo strumento mostra il nome di colore CSS corrispondente o, se non c’è una corrispondenza esatta, quello più vicino con il relativo valore HEX. Per #ffd166 è khaki (#f0e68c), quindi solo un’approssimazione. Lo strumento non fornisce valori RAL, Pantone, NCS o CMYK. Inoltre, il colore visualizzato sullo schermo dipende dalla luce e dalla fotocamera: per pitture e vernici, verifica sempre un campione reale. Il Color Picker mostra i valori HSV e CMYK di un colore noto.

Lo strumento calcola il rapporto di contrasto WCAG del colore rispetto al bianco e al nero. Il testo normale richiede almeno 4,5:1 (livello AA); 7:1 (AAA) è ottimo, mentre per il testo grande basta 3:1. Su #ffd166, il testo nero raggiunge 14,56:1, quello bianco solo 1,44:1. Per verificare il contrasto tra due colori qualsiasi, usi il Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP e SVG, a seconda dei formati supportati dal tuo browser. Per i GIF viene analizzato il primo fotogramma. Solo Safari apre i file HEIC e HEIF salvati dagli iPhone; con altri browser, esporta prima la foto in JPG. I file possono avere dimensioni fino a 40 MB. Per i pixel semitrasparenti, lo strumento mostra anche il valore HEX con canale alfa, per esempio #ff000080. I pixel completamente trasparenti non hanno colore e lo strumento te lo segnala.