Trova il colore da un’immagine (contagocce)
Apri un’immagine con il selettore di file, trascinandola o con Ctrl + V, poi clicca o tocca il punto che ti interessa. Il contagocce mostra il colore del pixel in HEX, RGB e HSL e trova i colori principali dell’immagine. L’immagine non viene mai caricata.
Come si calcola
L’immagine resta sul tuo dispositivo
Il contagocce funziona interamente nel browser: l’immagine viene decodificata in locale e disegnata su un canvas, e il valore del colore viene letto direttamente dalla memoria con getImageData(). Nessun upload e nessuna richiesta di rete con dati dell’immagine; chiusa la pagina, l’immagine sparisce. Solo per le foto HEIC che il browser non sa aprire da sé viene caricato una volta un decoder da questo sito – la foto resta comunque in locale.
Come scegliere un colore
- Scegli un’immagine, trascinala nel riquadro o incollala con Ctrl + V (per esempio uno screenshot).
- Clicca o tocca il punto che ti interessa. Da tastiera le frecce spostano il contagocce pixel per pixel.
- Copia il valore HEX, RGB o HSL. Gli ultimi otto colori scelti restano visibili come campioni.
Come vengono trovati i colori principali
Per i colori principali l’immagine viene ridotta a 200 pixel al massimo sul lato più lungo. Ogni pixel non trasparente finisce in una di 4.096 classi di colore (16 livelli per canale). Le classi più frequenti e ben distinte tra loro diventano fino a sei colori principali; la percentuale è la loro quota su tutti i pixel non trasparenti. È una quantizzazione semplice: utile per una panoramica, ma non è una misurazione del colore.
Perché il valore può differire dall’originale
- Profili colore: i browser convertono in sRGB le immagini con un profilo incorporato (ad es. Display P3 di uno smartphone). Il contagocce mostra il valore sRGB che useresti nel CSS; un programma di grafica che lavora in P3 mostrerà numeri diversi.
- Compressione: JPEG e WebP salvano i colori con perdita, quindi pixel vicini in un’area «uniforme» possono differire di qualche livello.
- Immagini molto grandi (oltre 4.096 pixel per lato) vengono ridotte per la lettura, il che fa la media dei pixel vicini. La posizione indicata si riferisce all’immagine originale.
Domande frequenti
La mia immagine viene caricata o salvata?
No. L’immagine viene elaborata solo nella memoria del browser e non viene inviata da nessuna parte. Non viene salvato nulla nemmeno nella memoria del browser (localStorage).
Come ottengo il codice colore da uno screenshot?
Fai uno screenshot (ad es. su Windows: Win + Maiusc + S; su Mac: Cmd + Ctrl + Maiusc + 4 lo copia negli appunti), poi clicca su questa pagina e premi Ctrl + V (Cmd + V su Mac). Clicca il punto che ti interessa e il codice HEX compare subito.
Quali formati di immagine funzionano?
JPG, PNG, WebP, GIF, BMP e AVIF, purché il browser li sappia aprire, più le foto HEIC dell’iPhone. Per le immagini trasparenti il contagocce mostra anche l’opacità del pixel.
Che cosa posso fare poi con il colore?
Copia il valore HEX e convertilo in altri formati con il convertitore di colori, crea colori abbinati con il generatore di palette o usa la verifica del contrasto per capire se un testo in quel colore si legge bene.
Fonti e riferimenti normativi
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
Aggiornato al:
Strumenti correlati
- Convertitore di colori: HEX, RGB, HSL, HSV, CMYKConverti i colori: da HEX a RGB, da RGB a HEX, HSL, HSV, HWB e CMYK. Digita in qualsiasi formato o usa il selettore e copia il risultato, nel browser.
- Generatore di palette di coloriCrea colori abbinati a partire da un colore di base: complementari, analoghi, triadici, quadrato, complementari divisi o monocromatici, con HEX, RGB e HSL.
- Verifica del contrasto dei colori (WCAG 2.2)Verifica il contrasto tra colore del testo e dello sfondo: rapporto di contrasto WCAG 2.2 con esito AA/AAA per testo normale, testo grande e componenti UI.
- Calcolatore dei cicli del sonnoCalcolatore del sonno: a che ora andare a dormire se ti svegli alle 7, o quando suonare la sveglia. 4-6 cicli di sonno di circa 90 minuti, regola pratica.
- Calcolatore età del cane in anni umaniQuanti anni ha il tuo cane in anni umani? Formula 16·ln(età)+31 (Wang et al. 2020) e tabella AVMA per taglia, a confronto, con l’età senior.
- Calcolatore massa grassa (metodo US Navy)Stima la percentuale di massa grassa da altezza, collo, vita e fianchi con le equazioni US Navy di Hodgdon e Beckett (1984). In centimetri o pollici.