WebyTooly

Seletor de cor de imagem

Carregue uma imagem e clique sobre ela para ler a cor exata desse píxel em HEX, RGB e HSL.

Espacio publicitario

Arraste a sua imagem aqui ou clique para escolher

Aceita JPG, PNG, WebP e GIF

Espacio publicitario

Como se lê a cor de um píxel

Ao carregar 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 píxel 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 píxel exato, sem média com os vizinhos: em imagens JPG com muito ruído, dois píxeis 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 ecrã?
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.
Porque é que a cor não coincide com a que vejo no ecrã?
Pode dever-se ao perfil de cor do seu monitor ou a um perfil incorporado na imagem. O valor que damos é o do píxel tal como o navegador o descodifica.
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 cómodo 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 píxel escolhido.

Calculadoras relacionadas