WebyTooly

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.

Espacio publicitario

Trascina qui la tua immagine o fai clic per sceglierla

Accetta JPG, PNG, WebP e GIF

Espacio publicitario

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.

Calcolatori correlati