Ir para o conteúdo

pixel → HEX · RGB · HSL

Seletor de cores de imagem

Clique em um pixel de uma imagem para ler sua cor: um pixel de #0060fd aparece como rgb(0, 96, 253) e hsl(217, 100%, 50%). Adicione uma imagem para escolher cores da sua.

Escolha com um clique, um toque ou as teclas de seta. Sua imagem é desenhada somente nesta aba e nunca é enviada.

Scanned by NortonTM Safe Web

Resumo

Preço
Sem custo
Conta
Não é necessária
Envio
Nenhum — a imagem é desenhada na aba do seu navegador e nada é enviado a lugar nenhum
Formatos
PNG, JPEG, WebP, GIF, AVIF, BMP e SVG, conforme o seu navegador os decodifica
Tamanho da imagem
Desenhada com até 1600 pixels no lado maior; arquivos de até 200 MB e 120 million de pixels
Paleta
Seis cores dominantes por corte pela mediana em cerca de 20,000 pixels amostrados

Cores escolhidas e como a paleta funciona

Estas linhas foram geradas pelo mesmo código da ferramenta. A tabela da paleta usa uma imagem de 4 × 4 pixels com doze pixels azuis e quatro pixels brancos.

Cores lidas de pixels
Cor do pixelHEXRGBHSL
#0060fd#0060fdrgb(0, 96, 253)hsl(217, 100%, 50%)
#ff8000#ff8000rgb(255, 128, 0)hsl(30, 100%, 50%)
#00a86b#00a86brgb(0, 168, 107)hsl(158, 100%, 33%)
#767676#767676rgb(118, 118, 118)hsl(0, 0%, 46%)
#fdd835#fdd835rgb(253, 216, 53)hsl(49, 98%, 60%)
Paleta do exemplo 4 × 4
Cor da paletaParte dos pixels
#0060fd75%
#ffffff25%

Como escolher uma cor de uma imagem

1

Adicione uma imagem

Solte um arquivo PNG, JPEG, WebP, GIF, AVIF, BMP ou SVG na caixa, escolha um com Procurar ou cole uma imagem da área de transferência. Uma imagem de exemplo é mostrada até você adicionar a sua.

2

Clique, toque ou use as teclas de seta

Clique ou toque em um ponto, ou arraste sobre a imagem. Com a imagem em foco, as teclas de seta movem a mira um pixel por vez e Shift com uma seta a move dez pixels. Os blocos mostram a cor em HEX, RGB e HSL.

3

Copie uma cor ou uma entrada da paleta

Toque em Copiar em um bloco, ou toque em uma amostra da paleta para copiar seu código HEX. A paleta lista as seis cores dominantes da imagem inteira com a parte da imagem que cada uma cobre.

Como as cores são lidas

O navegador decodifica seu arquivo e a página o desenha em um elemento canvas nesta aba. Uma imagem com mais de 1600 pixels no lado maior é reduzida para caber, então uma cor lida de uma imagem muito grande vem da cópia reduzida, na qual pixels vizinhos foram combinados em média. A página então pede ao canvas os valores de vermelho, verde, azul e alfa do único pixel sob a mira e os imprime em HEX, RGB e HSL. Um pixel com transparência é impresso com seu valor alfa. Um canvas guarda as cores multiplicadas pelo alfa, então um canal de um pixel parcialmente transparente pode aparecer com uma unidade a menos: 200 aparece como 199 com 50% de opacidade.

A paleta usa corte pela mediana. A página olha para cada n-ésimo pixel, no máximo cerca de 20,000 deles, e deixa de fora os pixels que são mais da metade transparentes. Ela coloca essas cores em uma caixa e corta repetidamente a caixa de maior variação em um canal na mediana desse canal, até haver seis caixas ou nenhuma caixa conter duas cores diferentes. Cada caixa é mostrada como a média de seus pixels, com a parte dos pixels amostrados que ela contém, da maior para a menor. O resultado é o mesmo sempre para a mesma imagem. Uma imagem com menos de seis cores distintas dá uma paleta mais curta, e imagens animadas são lidas como uma única imagem estática.

Perguntas sobre o seletor de cores de imagem

Como obter o código HEX de uma cor em uma imagem?

Adicione a imagem e clique no ponto que quer. O bloco HEX mostra o código desse pixel, por exemplo #0060fd, e Copiar o coloca na área de transferência. Para obter as cores principais sem escolher um ponto, toque em uma amostra da paleta.

Quais formatos de imagem funcionam?

PNG, JPEG, WebP, GIF, AVIF, BMP e SVG, desde que o seu navegador consiga decodificá-los. O AVIF depende da versão do navegador. Outros arquivos, como PDF ou TIFF, são recusados com uma mensagem. Arquivos acima de 200 MB ou acima de 120 million de pixels também são recusados.

Como a paleta de seis cores é escolhida?

Por corte pela mediana em uma amostra de cerca de 20,000 pixels: as cores são divididas em caixas na mediana de seu canal mais amplo até haver seis, e cada caixa passa a ser a média de seus pixels. A porcentagem sob cada amostra é a parte dos pixels amostrados naquela caixa. Pixels em sua maioria transparentes são ignorados.

Por que dois pixels vizinhos dão cores um pouco diferentes?

Fotos e imagens comprimidas como JPEG variam um pouco de pixel para pixel, então dois pontos que parecem iguais podem diferir em algumas unidades por canal. Clique em vários pontos, ou use a paleta, que faz a média de muitos pixels, quando quiser uma cor representativa.

Minha imagem é enviada para algum lugar?

Não. O arquivo é decodificado e desenhado pelo seu navegador nesta aba, as cores são lidas desse desenho e nada é enviado a um servidor. Fechar ou recarregar a página descarta a imagem.

O que faz o botão de seleção na tela?

Em navegadores que oferecem o recurso EyeDropper, o botão permite clicar em qualquer ponto da sua tela, inclusive em outras janelas, e mostra sua cor. Navegadores sem esse recurso não mostram o botão; o seletor de imagem funciona em todos.