Seletor de cores de imagem
Capture cores de qualquer imagem clicando em um pixel. Uma lupa mostra os pixels exatos e você obtém os valores HEX, RGB e HSL, mais um histórico das cores capturadas.
Executa totalmente no seu navegador. Seus dados nunca são enviados.
Ferramentas Relacionadas
Ver TodasO que é Seletor de cores de imagem?
Envie ou cole uma imagem e clique em qualquer ponto para ler a cor exata daquele pixel em HEX, RGB (ou RGBA quando semitransparente) e HSL. Uma lupa mostra os pixels ao redor do cursor, campos X/Y permitem mirar um pixel exato e cada cor capturada fica em um histórico clicável.
Como usar Seletor de cores de imagem
- Solte, escolha ou cole uma imagem (uma captura de tela colada com Ctrl+V funciona bem).
- Passe o ponteiro sobre a imagem para ver a visão ampliada e clique para capturar uma cor.
- Ou digite as coordenadas exatas de pixel X e Y.
- Clique em um valor HEX, RGB ou HSL para copiá-lo; reutilize cores anteriores em Cores capturadas.
Exemplo
40×20 image whose top-right quadrant is pure green, pixel X=25, Y=5
#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)
Quando usar Seletor de cores de imagem
Use-o para reproduzir a cor de uma marca a partir de um logo ou de uma captura de tela, amostrar cores de uma foto para um design ou conferir a cor exata de um elemento de interface. A compressão JPEG e o antisserrilhamento alteram levemente as cores dos pixels, então amostre áreas chapadas em vez de bordas. Para obter uma paleta inteira de uma vez, use a Paleta de cores da imagem.
Como funciona Seletor de cores de imagem
A imagem é desenhada em um canvas na resolução total e seus pixels são lidos uma vez com getImageData. Um clique é convertido de coordenadas da tela para coordenadas de pixel da imagem, e o valor RGBA naquele índice é convertido em HEX e HSL (matiz em graus, saturação e luminosidade em porcentagem). A lupa redesenha uma vizinhança de 11×11 pixels sem suavização.
Casos de Uso Comuns
- Descobrir o código HEX da cor de uma marca em um logo.
- Amostrar uma cor de uma captura de tela de site para reutilizar no CSS.
- Conferir se dois elementos de interface usam mesmo a mesma cor.
- Coletar cores de uma foto para um mood board.
Nota de Segurança
As imagens são decodificadas, processadas e codificadas localmente no seu navegador com a Canvas API. Nada é enviado a um servidor.
Perguntas Frequentes
Por que a cor é um pouco diferente do que eu esperava?
Formatos com perdas como JPEG e a suavização nas bordas alteram os valores dos pixels. Capture no meio de uma área chapada ou use os campos X/Y para escolher um pixel exato.
Funciona com imagens transparentes?
Sim. Pixels semitransparentes aparecem como rgba() com o valor alfa; o valor HEX mostra a parte RGB.
Posso capturar cores fora do navegador?
Não, só da imagem que você carregar. Tire uma captura de tela e cole-a com Ctrl+V para capturar cores de qualquer coisa na sua tela.