Conta-gotas de cores da imagem
Extraia cores de qualquer imagem com uma lupa de 8× e monte uma paleta de até 12 amostras: hex, RGB e HSL, exportáveis como JSON, texto ou CSS.
A imagem é desenhada e amostrada localmente no seu navegador. Nada é enviado.
Escolha cores de uma imagem
Clique para escolher uma imagem ou arraste um PNG, JPG, WebP ou GIF para cá
Como funciona
A imagem exibida é reduzida para caber na página, mas a amostragem nunca confia nesse bitmap reduzido: um canvas oculto guarda o arquivo na resolução nativa completa, e cada posição do cursor é projetada das coordenadas de tela para essa grade nativa antes de ler um pixel.
- Do cursor ao pixel
- Uma escolha pega a posição do clique relativa à imagem renderizada, multiplica por larguraNativa ÷ larguraRenderizada e arredonda para um índice de pixel. Como o tamanho renderizado vem de getBoundingClientRect —pixels CSS—, o mapeamento também está correto em telas de alta densidade: o devicePixelRatio afeta como o navegador pinta, não a fração da imagem onde seu ponteiro está. A cor é lida com getImageData do canvas em resolução nativa, então você obtém o pixel real do arquivo, não um artefato suavizado de pré-visualização.
- A lupa e o conta-gotas do sistema
- A lupa 8× redesenha uma janela de 15 pixels ao redor do cursor com escalonamento vizinho mais próximo, de modo que cada pixel continue quadrado e contável, com uma mira marcando o pixel exato amostrado e seu hex abaixo. Onde a API EyeDropper existe, o botão de tela cheia entrega o serviço ao seletor nativo do navegador —o mesmo pipeline de coordenadas, mas ele pode sair completamente desta página—.
- Escolhas manuais, sem quantização
- As cores escolhidas entram numa paleta limitada a 12 que recusa duplicatas hex exatas, porque bordas, gradientes e ruído de compressão de uma foto geram dezenas de quase repetidas que só um humano pode julgar se vale manter. A saída —hex, RGB, HSL e exportações JSON/CSS— é uma lista de decisões que você realmente tomou.
Perguntas frequentes
Por que as cores mudam de pixel para pixel perto de bordas ou gradientes?
Porque é isso que imagens reais fazem: bordas têm antisserrilhado, gradientes têm tramas, e a compressão JPEG espalha tons vizinhos em cada transição. Escolher um pixel da foto de um carro vermelho pode honestamente devolver um rosa acinzentado. Use a lupa 8× para cair no meio de uma área plana e faça várias amostras da mesma região para julgar a cor dominante.
O que fazer depois com as cores escolhidas?
Cada amostra traz hex, RGB e HSL, cada uma copiável com um clique, e a paleta exporta como JSON, texto puro ou variáveis CSS. Um próximo passo sensato para trabalho de interface é verificar a legibilidade dos pares texto-fundo com o Verificador de Contraste de Cor embutido.
Por que ele não extrai uma paleta automaticamente da imagem inteira?
De propósito: esta ferramenta é um conta-gotas, não um quantizador. A extração automática média ou agrupa milhões de pixels (median-cut, k-means) e devolve cores representativas que ninguém escolheu —frequentemente versões turvas dos tons que você queria. Cada cor da sua paleta está aqui porque você apontou para ela; por isso duplicatas são recusadas e o limite são 12 conscientes.
Onde está o botão de tela cheia? Não estou vendo.
Ele só aparece quando o navegador expõe a API EyeDropper —no momento, Chrome e Edge de desktop. Esse botão entrega a escolha ao conta-gotas em nível de sistema operacional, que pode capturar qualquer pixel da sua tela, não apenas esta imagem. No Firefox e no Safari o botão não existe porque a API falta, e a lupa de aumento é o caminho completo.
Algo é enviado para um servidor?
Não. A imagem é decodificada num canvas dentro desta aba e cada amostra é lida com getImageData dessa cópia local. Não há upload, e o único trabalho da página —pixel entra, hex sai— não precisa de rede nenhuma.