Pegar cor de imagem: conta-gotas online com código HEX
Quer saber exatamente qual é a cor de um logotipo, de uma foto ou de um print? Este conta-gotas online abre a imagem no seu navegador e devolve o código HEX, o RGB e o HSL de qualquer pixel em que você clicar. O arquivo não é enviado: ele é lido com FileReader e desenhado em um canvas no próprio aparelho.
Como pegar a cor de uma imagem
- Selecione a imagem no campo Imagem. A ferramenta já mostra a cor do pixel central.
- Passe o mouse sobre a imagem: a lupa amplia a região e marca o pixel exato. Clique para escolher. Pelo teclado, as setas movem um pixel por vez (com Shift, 10).
- Copie o HEX, o RGB ou o HSL com o botão Copiar.
- Veja as cores predominantes da imagem e clique em uma para ver os códigos dela.
Do RGB ao HEX
O HEX é o RGB escrito em hexadecimal, um par de dígitos por canal. Exemplo com o verde #16A34A:
| Canal | Decimal | Hexadecimal |
|---|---|---|
| Vermelho (R) | 22 | 16 |
| Verde (G) | 163 | A3 |
| Azul (B) | 74 | 4A |
O formato da imagem muda o resultado
| Formato | Compressão | O que esperar |
|---|---|---|
| PNG | sem perdas | o pixel tem exatamente a cor salva; ideal para logotipos e capturas de tela |
| JPEG | com perdas | ruído de compressão: pixels vizinhos de uma área lisa podem ter códigos um pouco diferentes |
| WebP | com ou sem perdas | depende de como o arquivo foi salvo |
| GIF | sem perdas, até 256 cores | as cores ficam limitadas à paleta do arquivo |
Em fotos JPEG, clique em alguns pontos da mesma área e compare: a variação é normal. Para a cor "oficial" de uma marca, prefira um PNG ou o arquivo original.
Conta-gotas para a tela inteira
O botão Pegar cor da tela usa a EyeDropper API, que permite pegar a cor de qualquer ponto da tela, mesmo fora da imagem. Ela só existe em navegadores baseados em Chromium, como Chrome e Edge no computador; nos demais o botão não aparece.
Casos de uso comuns
- Descobrir a cor de um logotipo para usar no site ou em uma apresentação
- Montar uma paleta a partir de uma foto de referência
- Conferir a cor de um elemento em um print de layout
- Identificar a cor de um produto em uma foto
Dicas
- Para ajustar o tom encontrado ou converter para OKLCH, leve o HEX ao seletor de cores.
- Precisa da mesma cor com transparência? Use o conversor HEX para RGBA.
- Combine duas cores da paleta em um degradê no gerador de gradiente CSS.
- A matemática entre HEX, RGB e HSL está no guia de conversão de cores CSS.