Obter Cor HEX de Imagem

O que esta página faz e por que existe

Esta página permite-lhe carregar uma imagem a partir do seu dispositivo, passar o rato sobre ela (ou clicar) para selecionar qualquer píxel e obter instantaneamente o valor hexadecimal dessa cor. Junto com o código HEX são apresentados os valores RGB e HSL, bem como uma ampliação que ajuda a apontar o píxel exato. As cores escolhidas podem ser guardadas num histórico de até doze entradas para referência futura.

A existência desta página deve-se a uma necessidade específica: ter o valor hexadecimal como saída primária. Ao contrário das páginas irmãs que focam a notação funcional RGB ou a notação HSL, aqui o código hexadecimal de seis dígitos (ou três, quando aplicável) é o formato principal. O hexadecimal é a representação mais compacta e mais usada em CSS, design gráfico e ferramentas de prototipagem, porque não requer parênteses nem sintaxe extra — escreve-se #1E90FF em vez de rgb(30, 144, 255). Além disso, o HEX de seis dígitos não codifica o canal alfa; qualquer transparência detetada é reportada separadamente como percentagem, com a mensagem “Alfa ‹n›% — este píxel é parcialmente transparente.”

O que a distingue de ferramentas equivalentes

A principal diferença está no formato de saída preferencial. Enquanto outras páginas do mesmo sítio apresentam primeiro o valor em notação funcional (RGB ou HSL), esta página coloca o código hexadecimal em destaque. Isto é crucial para quem precisa de copiar a cor diretamente para uma propriedade CSS como color, background-color ou border-color sem ter de converter ou acrescentar sintaxe. O hexadecimal é o padrão de facto na Web — é mais curto, mais legível em contextos de código e reconhecido por todas as ferramentas de edição.

Outra diferença relevante é o tratamento explícito da transparência. Como o HEX de seis dígitos não suporta alfa, a ferramenta não tenta produzir um código hexadecimal de oito dígitos (que alguns navegadores aceitam, mas não é standard universal). Em vez disso, se o píxel tiver um valor alfa inferior a 1 (ou seja, não for totalmente opaco), o utilizador vê uma indicação separada: “Alfa 40% — este píxel é parcialmente transparente.” Isto evita confusões e garante que o valor hexadecimal copiado corresponde exatamente ao que se vê depois de aplicado, sem surpresas de transparência.

Finalmente, a ferramenta não interpreta a imagem: lê o valor exato armazenado no ficheiro. Isto significa que, em imagens JPEG ou em capturas de ecrã, a compressão com perdas e o anti-aliasing podem ter alterado ligeiramente os valores dos píxeis. O utilizador deve ter consciência disso ao amostrar cores que parecem uniformes mas que na realidade são ligeiramente diferentes entre píxeis vizinhos.

Entradas, saídas e modo de funcionamento

Formatos de imagem suportados

A página aceita os seguintes formatos e respetivos tipos MIME:

Se um ficheiro com formato não suportado for arrastado para a área de destino, aparece a mensagem: “Esse tipo de ficheiro não é suportado. Experimente uma imagem PNG, JPG, WebP, GIF, AVIF ou HEIC.” Se o ficheiro não puder ser aberto (por estar corrompido ou ter um formato inválido), surge: “Essa imagem não pôde ser aberta. Pode estar corrompida ou num formato não suportado.”

Funcionamento passo a passo

1. O utilizador carrega uma imagem. Imediatamente, a ferramenta apresenta as dimensões (largura × altura) e os valores de cor do píxel central, juntamente com as suas coordenadas.
2. Ao mover o rato sobre a imagem, as coordenadas e as cores são atualizadas em tempo real, píxel a píxel.
3. Um clique no botão esquerdo guarda a cor atualmente amostrada no histórico de cores.
4. O histórico pode conter até doze itens. Clicar numa amostra carrega novamente essa cor (as coordenadas e os valores são mostrados como se o píxel tivesse sido selecionado de novo).
5. Clicar em qualquer valor de cor (HEX, RGB ou HSL) copia-o para a área de transferência. Se o navegador bloquear o acesso à área de transferência, surge a mensagem: “Não foi possível copiar — o seu navegador bloqueou o acesso à área de transferência.”
6. É também possível navegar com o teclado: as teclas de seta movem uma mira sobre a imagem, a tecla Shift combinada com as setas move a mira em passos de 10 píxeis, e as teclas Enter ou Espaço guardam a cor.

Saídas exibidas

• Mensagem de estado: “Imagem pronta — mova o rato sobre ela para amostrar, clique para guardar uma cor.”
• Dimensões da imagem: largura × altura em píxeis.
• Coordenadas do píxel: (x, y).
• HEX: código hexadecimal de seis dígitos (ex.: #1E90FF).
• RGB: valores de vermelho, verde e azul.
• HSL: matiz, saturação e luminosidade.
• Transparência: “Alfa ‹n›% — este píxel é parcialmente transparente.” (apenas se aplicável).
• Confirmação de guardar: “Guardado ‹hex› nas suas escolhas.”

Regras importantes e casos especiais

A ferramenta tem comportamentos específicos que é importante conhecer para evitar surpresas.

Amostragem e guardar

• Quando a imagem é carregada, as cores do píxel central são mostradas de imediato. Isto permite começar a trabalhar sem ter de clicar primeiro.
• Mover o rato sobre a imagem amostra as cores píxel a píxel. O valor exibido corresponde sempre ao píxel que está por baixo do cursor (ou da mira, se estiver a usar o teclado).
• Clicar na imagem guarda a cor atualmente amostrada no histórico.
• O histórico distingue cores com os mesmos valores RGB mas com alfas diferentes: são guardadas como entradas separadas.

Dimensões máximas

Imagens cujo lado mais longo ultrapasse 4096 píxeis são redimensionadas para caber dentro desse limite. Isto evita problemas de desempenho e mantém a ferramenta rápida mesmo com fotografias de alta resolução. O valor real dos píxeis amostrados é o da versão redimensionada, não o da imagem original.

Transparência

Como referido, o código hexadecimal de seis dígitos não inclui alfa. Se um píxel for semi-transparente, a ferramenta informa a percentagem de opacidade. A cor lida é o valor armazenado no ficheiro — não é feita nenhuma composição com um fundo imaginado. Ou seja, um píxel com (R=255, G=0, B=0, A=128) será apresentado como HEX #FF0000 e alfa 50%. Isto é correto, mas o utilizador deve ter em mente que aplicado sobre um fundo branco o resultado visual será rosa claro, e não vermelho puro.

Compressão e anti-aliasing

Em imagens JPEG ou em capturas de ecrã, a compressão com perdas e o anti-aliasing podem produzir pequenas variações de cor entre píxeis vizinhos, mesmo em áreas que parecem uniformes. Isto significa que amostrar dois píxeis aparentemente idênticos pode dar valores ligeiramente diferentes. O uso da ampliação e da navegação com setas ajuda a escolher exatamente o píxel pretendido.

Botão “Recomeçar”

O botão “Start over” (ou “Recomeçar”) limpa a imagem carregada, esvazia o histórico de cores e repõe a ferramenta no estado inicial. É útil quando se quer começar de novo sem ter de recarregar a página.

Para quem esta ferramenta é útil

• Designers que precisam de extrair cores precisas de imagens de referência para interfaces de utilizador. O formato hexadecimal é o mais comum em programas como Figma, Sketch ou Adobe XD.
• Programadores que necessitam de valores exatos para CSS — por exemplo, #1E90FF para igualar um mockup ou um elemento de marca.
• Criadores de conteúdo que amostram cores a partir de imagens para criar paletas de marcas, miniaturas ou gráficos para redes sociais.
• Qualquer pessoa que precise de copiar um código hexadecimal de uma imagem — por exemplo, para combinar a cor de um logótipo, de uma fotografia ou de uma captura de ecrã.

Perguntas frequentes

Por que é que o código hexadecimal não mostra o valor alfa?
O formato hexadecimal standard na Web usa seis dígitos (RRGGBB). Não existe uma notação hexadecimal universal de oito dígitos aceite por todas as ferramentas e navegadores. Por isso, a ferramenta separa a transparência e mostra-a como percentagem.

Posso usar esta ferramenta para extrair a cor de um logótipo com fundo transparente?
Sim, mas lembre-se de que o valor lido é o do píxel tal como está armazenado. Se o logótipo tiver píxeis semi-transparentes nas bordas (devido a anti-aliasing), esses píxeis serão apresentados com alfa inferior a 100%. O código HEX será o da cor pura, mas a transparência será indicada separadamente.

O que acontece se guardar a mesma cor várias vezes?
O histórico funciona como uma lista simples. Pode guardar a mesma cor quantas vezes quiser; cada entrada ocupa uma posição. Se atingir o limite de doze cores, a mais antiga é removida? A ficha não especifica (apenas diz que o limite é 12) — mas, na prática, a interface permite ver e clicar nas amostras.

Por que é que as cores de duas imagens diferentes podem parecer diferentes ao amostrar o mesmo tom?
A compressão (especialmente JPEG) e o espaço de cor da imagem podem afetar os valores. Além disso, a ferramenta lê o valor exato do ficheiro, sem correção de gama. Para trabalhos críticos, use imagens sem perdas (PNG) e verifique o perfil de cor.

Como faço para obter um código hexadecimal de oito dígitos com alfa?
Esta página não fornece essa notação. Se precisar de RGBA em hexadecimal (como #RRGGBBAA), pode calcular o valor do canal alfa manualmente (0–255) e concatená-lo ao HEX. Mas lembre-se de que nem todos os navegadores antigos suportam essa sintaxe.

A ferramenta funciona offline?
Sim, porque todo o processamento é feito do lado do cliente, no navegador. Nenhuma imagem é enviada para um servidor. Isto garante privacidade e rapidez.