Obter Cor HEX de Imagem

O que o extrator hexadecimal de imagem faz e por que ele existe

Selecionar um pixel de uma imagem e obter seu valor em notação hexadecimal (HEX) é uma tarefa trivial na superfície, mas que exige decisões de implementação que afetam diretamente o resultado final. Esta página resolve esse problema com um fluxo direto: você carrega um arquivo de imagem do seu dispositivo (PNG, JPG, WebP, GIF, AVIF ou HEIC), passa o mouse sobre a imagem — ou usa o teclado — e, para cada pixel, obtém imediatamente o código HEX da cor, acompanhado dos valores RGB e HSL. Um clique salva a cor em um histórico de até 12 itens, que pode ser revisto a qualquer momento.

O diferencial desta página em relação às páginas irmãs (focadas em notação RGB funcional ou HSL) é que o código hex é a saída principal. Enquanto outras ferramentas do mesmo site priorizam a sintaxe rgb(r, g, b) ou hsl(h, s, l), aqui o valor é exibido no formato compacto e universal da web: seis dígitos (ou três, quando aplicável), sem parênteses ou palavras-chave. Isso a torna a escolha certa quando você precisa de um valor que possa ser colado diretamente em uma propriedade CSS como color ou background-color, sem edição adicional.

A transparência, quando presente, não é incorporada ao hex — o formato de seis dígitos não tem canal alfa. Em vez disso, a ferramenta reporta a opacidade separadamente, com a mensagem “Alpha ‹n›% — este pixel é parcialmente transparente.” Isso evita confusão com a notação rgba() e mantém o foco no hex como formato alvo.

Como a ferramenta lê e exibe a cor de um pixel

O processo começa com o carregamento da imagem. O arquivo é lido no navegador do usuário — nenhum dado sai do dispositivo — e, em seguida, o centro da imagem é amostrado automaticamente. Assim que a imagem fica pronta, a ferramenta exibe as dimensões (largura × altura) e as coordenadas (x, y) do pixel central, junto com o HEX, RGB e HSL correspondentes. A mensagem “Imagem pronta — mova o mouse sobre ela para amostrar, clique para salvar uma cor.” aparece.

Conforme você move o ponteiro sobre a imagem, as coordenadas e os valores de cor são atualizados pixel a pixel. Para maior precisão, há um visor ampliado (magnifier) que permite enxergar o pixel exato que está sendo amostrado — essencial em áreas com anti-aliasing ou compressão, onde a cor de um pixel pode diferir sutilmente de seus vizinhos.

O clique salva a cor no histórico. O histórico pode armazenar até 12 cores. Cores com o mesmo valor RGB, mas alfas diferentes, são tratadas como entradas separadas — porque, na prática, um pixel com 50% de opacidade não é a mesma cor que um pixel totalmente opaco com os mesmos canais RGB. Ao clicar em qualquer bloco do histórico, a cor correspondente é carregada de volta para visualização.

Navegação por teclado e atalhos para precisão

Nem todo mundo usa mouse o tempo todo, e mesmo quem usa pode querer um controle mais fino. A página suporta navegação completa por teclado:

• As teclas de seta movem o cursor (uma mira) pixel a pixel sobre a imagem.
• Segurar Shift enquanto usa as setas move o cursor em passos de 10 pixels, útil para percorrer áreas maiores rapidamente.
• Pressionar Enter ou Espaço salva a cor atualmente amostrada no histórico.

Esses atalhos são particularmente úteis quando a imagem tem áreas muito pequenas ou quando o usuário está em um dispositivo sem mouse (como um laptop com trackpad impreciso). Também são importantes para acessibilidade: um usuário que depende apenas do teclado consegue usar a ferramenta plenamente.

Como a ferramenta lida com compressão, transparência e formatos de arquivo

A extração de cor de uma imagem não é tão ingênua quanto parece. Aqui estão os principais pontos que a página trata:

• Imagens com dimensões grandes (lado maior que 4096 pixels): a ferramenta reduz a imagem proporcionalmente para que o lado maior tenha no máximo 4096 pixels. Isso evita consumo excessivo de memória e mantém a performance, sem perder a precisão para amostragem de pixel — você ainda consegue selecionar qualquer pixel da versão redimensionada, e a cor será a do pixel na imagem original, já que o redimensionamento é feito via canvas.

• Compressão e anti-aliasing: se a imagem for um JPEG ou uma captura de tela que passou por compressão, os pixels podem não corresponder exatamente às cores originais. A ferramenta lê o valor exato armazenado no pixel — não tenta adivinhar a cor “verdadeira”. Isso significa que, em áreas de gradiente ou bordas suavizadas, você pode obter valores ligeiramente diferentes do esperado. O aviso “Se a imagem for um JPEG ou uma captura de tela, a compressão e o anti-aliasing podem ter alterado os valores dos pixels” aparece no contexto da interface.

• Pixel semitransparente: a ferramenta lê o pixel como ele existe no arquivo, sem considerar o que está por trás. Se o pixel tiver 30% de alfa, a ferramenta mostra o HEX completo (o valor do pixel, que pode ser uma cor pré-multiplicada ou não, dependendo do formato) e exibe “Alpha 30% — este pixel é parcialmente transparente.” Não há composição com fundo algum.

• Formatos suportados: PNG, JPG, WebP, GIF, AVIF, HEIC. Os MIME types aceitos são image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Se alguém tentar soltar um arquivo diferente (como BMP ou SVG), a mensagem é clara: “Esse tipo de arquivo não é suportado. Tente uma imagem PNG, JPG, WebP, GIF, AVIF ou HEIC.” Se a imagem estiver corrompida: “Essa imagem não pôde ser aberta. Pode estar corrompida ou em um formato não suportado.”

Como copiar cores e reiniciar a ferramenta

A página oferece múltiplas formas de copiar um valor de cor para a área de transferência:

• Clique em qualquer valor exibido (HEX, RGB ou HSL) — seja o da amostra atual, seja o de uma cor salva no histórico. Isso copia o texto correspondente.
• Se o navegador bloquear a operação de clipboard (algo comum em sites HTTP ou em certas configurações de segurança), a mensagem “Não foi possível copiar — seu navegador bloqueou o acesso à área de transferência.” é exibida.

O botão “Recomeçar” limpa tudo: a imagem é removida, o histórico de cores é esvaziado e a ferramenta volta ao estado inicial, pedindo que uma nova imagem seja carregada.

Para quem esta ferramenta é indispensável

• Designers de interface: precisam extrair cores de referência de imagens, mockups ou prints de aplicativos. O hex é o formato padrão em softwares como Figma, Adobe XD e Sketch.
• Desenvolvedores front-end: quando um designer entrega um elemento com uma cor específica, o hex é o jeito mais direto de aplicá-lo em CSS. background-color: #1E90FF é mais limpo e rápido que rgb(30, 144, 255).
• Criadores de conteúdo e social media: ao criar thumbnails, posts ou branding, é comum querer usar uma cor que aparece em uma foto — por exemplo, o tom exato do céu em uma imagem de referência.
• Qualquer pessoa que precise de um valor hex preciso a partir de uma imagem: para correspondência de logotipos, verificação de consistência de marca, ou mesmo para curiosidade.

Perguntas frequentes

Por que o código hex tem seis dígitos e não oito (com alfa)?
O hex de oito dígitos (ARGB) ainda não é um padrão universal em CSS (a especificação de cores de 4 e 8 dígitos é suportada em navegadores modernos, mas o uso comum ainda é o de seis dígitos). Esta ferramenta opta pelo formato mais amplamente adotado e reporta a transparência separadamente, para evitar ambiguidades.

Posso obter a cor de um pixel em uma imagem muito grande (acima de 4000 pixels)?
Sim, mas a imagem será redimensionada para que o lado maior tenha no máximo 4096 pixels. Isso não altera a cor do pixel que você seleciona — o redimensionamento é feito de forma que a amostragem ocorra sobre a versão redimensionada, que mantém a cor correspondente ao pixel original (embora haja interpolação na redução, o pixel específico ainda representa a cor do ponto correspondente na imagem original).

O que acontece se eu clicar em um pixel transparente?
A ferramenta lê o pixel exato da imagem. Se ele for totalmente transparente (alfa 0), a cor exibida será a do pixel no espaço de cor da imagem, que pode ser preto, branco ou qualquer cor que foi armazenada, mas com alfa zero. A mensagem “Alpha 0% — este pixel é totalmente transparente.” aparece. O histórico salvará essa cor como uma entrada separada.

O histórico pode armazenar mais de 12 cores?
Não. O limite é de 12 entradas. Se você tentar salvar uma 13ª cor, a mais antiga será removida automaticamente. Esse limite mantém a interface limpa e evita sobrecarga de memória.

A ferramenta funciona com imagens em CMYK?
Não. A leitura é feita no espaço de cor sRGB do navegador, que não lida com perfis CMYK. Se você carregar um JPEG com perfil CMYK, a conversão para RGB será feita pelo navegador, e os valores podem não corresponder exatamente ao que você vê em um software de edição profissional.

Como sei que a cor que copiei é exatamente a do pixel na tela?
A ferramenta lê o valor do pixel do canvas, que é o valor real da imagem após decodificação. Não há aproximação ou amostragem adicional. No entanto, lembre-se de que o monitor pode ter calibração de cor diferente; o hex é um valor numérico absoluto no espaço sRGB. A cor que você vê na tela pode ser diferente em outro dispositivo devido a diferenças de calibração, mas o valor hex é o mesmo.