Selettore di colore da immagine
Carica un'immagine e fai clic sopra per leggere il colore esatto di quel pixel in HEX, RGB e HSL.
Trascina qui la tua immagine o fai clic per sceglierla
Accetta JPG, PNG, WebP e GIF
Il tuo file non lascia mai il browser: tutta l'elaborazione avviene sul tuo dispositivo.
Come si legge il colore di un pixel
Al caricamento l'immagine viene disegnata una sola volta su una tela nascosta a dimensione originale. Al clic convertiamo la posizione del puntatore dentro l'elemento mostrato in coordinate della tela e chiediamo quel singolo pixel con getImageData.
HEX = #RRGGBB con ogni canale in base 16
Il browser restituisce quattro valori da 0 a 255 (rosso, verde, blu e alfa). L'HEX è semplicemente quei tre canali in esadecimale, mentre l'HSL si calcola dal canale massimo e minimo.
L = (max + min) ÷ 2
Il colore mostrato è quello del pixel esatto, senza medie con i vicini: nelle immagini JPG con molto rumore, due pixel contigui possono dare valori leggermente diversi.
S = (max − min) ÷ (1 − |2L − 1|)
Esempio pratico
Facendo clic su un blu aziendale ottieni #3366FF, cioè rgb(51, 102, 255) e hsl(225, 100%, 60%): lo stesso colore scritto in tre modi.
Domande frequenti
- Posso usarlo con gli screenshot?
- Sì. È il modo più rapido per ricavare il colore esatto di un marchio da uno screenshot o dalla foto di un cartello.
- Perché il colore non coincide con quello che vedo?
- Può dipendere dal profilo colore del monitor o da un profilo incorporato nell'immagine. Il valore che mostriamo è quello del pixel così come lo decodifica il browser.
- Quale formato di colore usare nel CSS?
- L'HEX è il più comune, l'RGB permette di aggiungere trasparenza con rgba() e l'HSL è il più comodo per creare varianti più chiare o più scure della stessa tonalità.
- Funziona con immagini trasparenti?
- Sì, e indichiamo anche il valore del canale alfa del pixel scelto.