Extrair a cor da marca de uma arte/print de site
Viu uma paleta de cores ou identidade visual que gostou? Envie o print e clique direto no bloco de cor que interessa, obtendo o valor HEX exato para usar na sua própria arte ou código.
Clique ou arraste sobre qualquer ponto da imagem para capturar a cor
HEX
RGB
HSL
Histórico de captura
As cores capturadas ao clicar na imagem aparecem aqui para consulta e comparação
Como usar
Quatro passos para capturar cores de uma imagem
Não precisa instalar nenhum software, tudo é feito na página, com a lupa auxiliando o posicionamento preciso.
-
1
Envie a imagem
Clique para escolher ou arraste a imagem para a página, com suporte a JPG, PNG, WebP e GIF, até 20MB, uma imagem por vez.
-
2
Mova o mouse ou o dedo para posicionar
Ao mover o cursor sobre a imagem, a lupa mostra em tempo real os pixels ampliados ao redor, com um quadro vermelho marcando a posição exata a capturar.
-
3
Clique para capturar a cor
Clique na posição desejada ou solte o dedo para capturar a cor, exibindo imediatamente os valores em HEX, RGB e HSL.
-
4
Copie o valor da cor
Clique no botão de copiar ao lado do formato desejado para colar o valor de cor na área de transferência.
Solução de problemas
O seletor de cores suporta processamento em lote?
O seletor de cores é uma função interativa de leitura de cor de pixel por clique, que não gera nenhum arquivo para exportar — logo, não existe o conceito de “lote”. Não importa o tamanho da imagem, você sempre clica ponto a ponto para ler a cor, então esta ferramenta aceita apenas uma imagem por vez, sem modo de lote.
A captura de cor é feita no meu computador ou celular, ou é enviada a um servidor?
Tudo é feito no navegador do seu dispositivo atual, usando a capacidade nativa de leitura de pixel do Canvas para ler direto o valor de cor da posição correspondente nos dados da imagem — a imagem original nunca é enviada a nenhum servidor.
Por que a cor mostrada na lupa pode ter uma diferença sutil da cor final capturada?
A lupa mostra o efeito ampliado de uma pequena área ao redor da posição atual do cursor; a cor realmente capturada é a do pixel específico marcado pelo quadro vermelho. Se a imagem tiver gradiente ou ruído, os pixels vizinhos podem ter cores levemente diferentes; basta clicar exatamente no pixel indicado pelo quadro vermelho para capturar a cor com precisão, sem qualquer desvio.
O histórico de cores capturadas é salvo? Continua lá depois de recarregar a página?
O histórico de captura fica salvo apenas na memória do navegador da página atual, útil para comparar várias cores capturadas na mesma sessão; ao recarregar ou fechar a página, o histórico é apagado, sem salvar permanentemente ou enviar a nenhum lugar. Se precisar guardar um valor de cor por mais tempo, copie e cole primeiro em suas próprias anotações ou ferramenta de design.
Qual dos três formatos de cor — HEX, RGB, HSL — devo usar?
HEX (como #FF3B30) é o formato mais usado em desenvolvimento web e na maioria das ferramentas de design, simples e fácil de colar; RGB (como rgb(255, 59, 48)) é mais direto quando você precisa ver ou ajustar os canais de vermelho, verde e azul separadamente; HSL (como hsl(4, 100%, 59%)) descreve a cor por matiz, saturação e luminosidade, sendo mais prático para ajustar claro/escuro ou saturação mantendo o mesmo matiz. Os três formatos descrevem exatamente a mesma cor, então escolha o formato adequado para a ferramenta ou código onde você vai colar.
Qual a precisão da captura de cor, ela lê a cor real e original da imagem?
Sim. O seletor de cores lê os dados de pixel originais depois da decodificação da imagem, sem ser afetado pelo tamanho de exibição na página — mesmo que a imagem esteja exibida reduzida na tela, a captura sempre lê com precisão o pixel correspondente na resolução real da imagem, sem desvio de cor por causa da exibição reduzida.
-
Sem envio a servidor
A captura e a leitura de pixel são feitas totalmente no seu navegador, sem que a imagem passe por nenhum servidor
-
Lupa de posicionamento preciso
Ao passar o cursor, os pixels ao redor são ampliados em tempo real, com um quadro vermelho marcando o pixel exato
-
Três formatos com cópia diretamente
HEX, RGB e HSL exibidos simultaneamente — clique no botão de copiar para colar direto na sua ferramenta de design ou código
-
sem cadastro e ilimitado
Sem cadastro, sem pagamento e sem limite oculto de uso
Casos típicos
Três necessidades mais comuns de anotação, resolvidas em uma só ferramenta
Seja para explicar um tutorial, decorar uma imagem para redes sociais ou anotar um produto, basta adicionar o elemento certo e arrastar para posicionar.
Extrair tons naturais de uma foto para paleta de cores
Extraia o tom do céu, da pele ou de plantas de uma foto de paisagem ou retrato, usando como referência base para uma proposta de design ou paleta de ilustração.
Conferir se a cor da arte e da implementação estão iguais
Ao implementar uma arte, capture a cor separadamente no print da arte e no print da página real, comparando os valores HEX para confirmar rapidamente se a cor está fiel, sem depender do olho.
Formatos de cor
Tabela rápida de HEX, RGB e HSL
Três formas diferentes de descrever a mesma cor — escolha o formato conforme onde você vai usar.
| Formato | Exemplo | Uso comum |
|---|---|---|
| HEX | #FF3B30 | Campo de cor em CSS na web e na maioria das ferramentas de design (como Figma, Photoshop) |
| RGB | rgb(255, 59, 48) | Quando precisa ver ou ajustar separadamente os canais de vermelho, verde e azul |
| HSL | hsl(4, 100%, 59%) | Descrito por matiz, saturação e luminosidade, prático para ajustar claro/escuro ou saturação mantendo o mesmo matiz |
Os três formatos descrevem exatamente a mesma cor, apenas com representações numéricas diferentes; cada um pode ser copiado diretamente na página e colado direto na sua ferramenta de design ou editor de código.
Detalhes técnicos
Dois pontos importantes sobre a captura de cor local
-
01
Lê o pixel real na resolução verdadeira da imagem
A imagem primeiro é decodificada no navegador e desenhada em um canvas com a mesma resolução exata do original; o que você vê na página é só a exibição reduzida desse canvas. Ao clicar para capturar, a posição exibida é convertida de volta para as coordenadas reais do canvas na hora de ler a cor — por isso, não importa quão pequena a imagem apareça na página, a precisão da captura sempre corresponde à resolução original da imagem, sem distorção por causa da exibição reduzida.
-
02
Por que o seletor de cores não suporta lote e não gera arquivo para download
A função do seletor de cores é “clicar e ler o valor de cor de um pixel” — uma ferramenta puramente interativa de consulta, que não gera nenhum arquivo de imagem para baixar, e portanto não existe o sentido de “várias imagens processadas gerando vários resultados”. Se precisar capturar cor de várias imagens, basta enviar uma de cada vez e conferir; ao trocar de imagem, o histórico de captura atual é apagado.
Envie agora e adicione texto e anotação em poucos segundos
Sem cadastro, sem espera, baixe direto depois de processar.