Seletor de cor de imagem
Envie uma imagem e clique sobre ela para ler a cor exata desse pixel em HEX, RGB e HSL.
Arraste a sua imagem aqui ou clique para escolher
Aceita JPG, PNG, WebP e GIF
O seu arquivo nunca sai do navegador: todo o processamento acontece no seu dispositivo.
Como se lê a cor de um pixel
Ao enviar a imagem, ela é desenhada uma única vez numa tela oculta com o tamanho original. Quando clica, convertemos a posição do ponteiro dentro do elemento mostrado para coordenadas da tela e pedimos esse único pixel com getImageData.
HEX = #RRGGBB com cada canal em base 16
O navegador devolve quatro valores de 0 a 255 (vermelho, verde, azul e alfa). O HEX é simplesmente esses três canais em hexadecimal, e o HSL é calculado a partir do canal máximo e mínimo.
L = (máx + mín) ÷ 2
A cor mostrada é a do pixel exato, sem média com os vizinhos: em imagens JPG com muito ruído, dois pixels contíguos podem dar valores ligeiramente diferentes.
S = (máx − mín) ÷ (1 − |2L − 1|)
Exemplo prático
Ao clicar num azul corporativo obtém #3366FF, que corresponde a rgb(51, 102, 255) e a hsl(225, 100%, 60%): a mesma cor escrita de três formas.
Perguntas frequentes
- Posso usar com capturas de tela?
- Sim. É a forma mais rápida de obter a cor exata de uma marca a partir de uma captura ou de uma foto de um cartaz.
- Por que a cor não coincide com a que vejo na tela?
- Pode ser devido ao perfil de cor do seu monitor ou a um perfil incorporado na imagem. O valor que damos é o do pixel tal como o navegador o decodifica.
- Que formato de cor devo usar em CSS?
- O HEX é o mais comum, o RGB permite acrescentar transparência com rgba() e o HSL é o mais prático para criar variações mais claras ou escuras do mesmo tom.
- Funciona com imagens com transparência?
- Sim, e além disso indicamos o valor do canal alfa do pixel escolhido.