Seletor de Cor de Imagem

Envie uma foto e clique em qualquer ponto para obter sua cor exata — valores hex, RGB e HSL, com uma paleta acumulada de tudo que você escolheu.

1.193 visualizações

Clique na imagem para escolher uma cor

Como Funciona a Seleção de Cor

Quando uma foto é enviada, ela é desenhada em um elemento HTML5 <canvas> dentro do navegador. Clicar em qualquer ponto da imagem chama a função getImageData() da API do canvas exatamente naquela coordenada de pixel, que retorna os valores brutos dos canais vermelho, verde, azul e alfa armazenados para aquele pixel — não uma aproximação nem uma cor amostrada de uma captura de tela, mas os mesmos dados numéricos que o próprio navegador usa para desenhar a imagem. Esses valores brutos são então convertidos e exibidos simultaneamente como hex (por exemplo, #3a7bd5), RGB (por exemplo, rgb(58, 123, 213)) e HSL (matiz, saturação, luminosidade), de modo que qualquer formato que uma ferramenta de design precise já está pronto para copiar.

Toda imagem processada dessa forma é decodificada e lida em sRGB, o espaço de cor padrão usado pela grande maioria das fotos digitais, telas e câmeras. É o padrão assumido, a menos que uma imagem incorpore explicitamente um perfil de cor diferente, o que cobre praticamente toda a fotografia de consumo e as imagens da web.

O Que Você Deve Saber

  • Nada é enviado a lugar nenhum — todo o processo, desde desenhar a imagem até ler os dados de pixel, acontece localmente na memória do navegador. Nenhum servidor jamais recebe a foto.
  • A leitura é exata, não estimada — como getImageData() retorna o valor literal do pixel armazenado, a precisão é limitada apenas pela qualidade da própria imagem e por exatamente onde o clique cai, não pelo brilho, contraste ou calibração da tela.
  • A compressão pode deslocar levemente a cor real — a compressão JPEG faz uma média da cor em pequenos blocos de pixels, então uma foto muito comprimida pode retornar um valor ligeiramente diferente da cor original da cena; PNG e outros formatos sem perdas preservam exatamente o valor capturado.
  • Cada cor escolhida constrói uma paleta acumulada abaixo da imagem, tornando possível amostrar vários pontos de uma única foto — um céu, uma camisa, uma parede — e exportar um pequeno conjunto de cores coordenado em uma única sessão.

Perguntas Frequentes

Qual a precisão da cor escolhida?

Ele lê o valor exato do pixel no canvas no ponto clicado — tão preciso quanto a própria imagem e a sua precisão ao clicar, sem sofrer influência da calibração da tela, já que lê dados brutos de pixel, não o que seus olhos percebem.

Isso envia minha foto para algum lugar?

Não — a imagem é desenhada em um elemento canvas local e amostrada inteiramente no lado do cliente. Nada sai do seu navegador.

O que é sRGB e por que isso importa?

sRGB é o espaço de cor padrão que a maioria das câmeras digitais, celulares, monitores e imagens da web usa por padrão. Como quase toda foto enviada aqui já está codificada em sRGB, os valores hex, RGB e HSL que esta ferramenta lê correspondem ao que a maioria dos softwares de design mostraria, sem necessidade de conversão. Fotos tiradas em um espaço de cor mais amplo, como Adobe RGB, e não convertidas podem apresentar uma discrepância quando comparadas com ferramentas baseadas em sRGB.

Por que a mesma cor pode parecer levemente diferente em duas fotos?

Condições de iluminação, balanço de branco e o processamento da câmera afetam os valores RGB exatos que uma câmera registra para o que parece ser a mesma cor a olho nu — uma parede branca fotografada ao pôr do sol ganha uma tonalidade quente que o seletor lê honestamente como um branco levemente alaranjado, não branco puro. A compressão JPEG também pode introduzir pequenos desvios no nível do pixel ao redor de bordas de cor nítidas.

É possível selecionar cores de uma foto tirada com celular?

Sim — qualquer arquivo de imagem que o navegador consiga exibir, incluindo JPEG, PNG, WebP e a maioria dos outros formatos comuns, funciona com esta ferramenta, independentemente do dispositivo ou câmera usado para capturá-la.

Comentários

Ainda não há comentários — seja o primeiro a escrever um!

Ferramentas Semelhantes