Imagem & Foto

Seletor de Cores de Imagem

Arraste uma foto ou captura de tela, passe o mouse para uma lupa ampliada, clique para escolher um pixel — copie HEX, RGB ou HSL, e monte uma paleta de até 20 cores como variáveis CSS prontas para colar.

Solte sua imagem aqui

ou clique para navegar — JPG, PNG, WebP, GIF ou BMP até 25 MB.

Privado por design. A imagem é decodificada e amostrada inteiramente no seu navegador via API Canvas. Nada é enviado para um servidor.

O que é um seletor de cores de imagem?

Um seletor de cores de imagem lê o valor RGB exato de um único pixel de uma foto, captura de tela ou maquete de design para que você possa usar essa cor em outros lugares — em uma paleta de marca, uma variável CSS, um token de tema ou uma correspondência de tinta. Designers o utilizam para extrair cores de quadros de inspiração. Desenvolvedores front-end o utilizam para combinar uma captura de tela com um tema CSS. Profissionais de marketing o utilizam para extrair cores de marca de um logotipo. Pintores e artesãos o utilizam para combinar uma foto do mundo real com uma amostra de tinta ou fio. Ao contrário de um detector de 'cor dominante', esta ferramenta oferece controle por pixel: passe o mouse para visualizar, clique para capturar. A lupa ampliada mostra o pixel exato sob seu cursor com 8× de zoom, então escolher um único destaque ou uma borda de 1 pixel é simples. Tudo roda no seu navegador — sua imagem nunca sai da página.

Como escolher cores de uma imagem

1
Solte sua imagem
Arraste um arquivo JPG, PNG, WebP, GIF ou BMP para a área de upload, ou clique para escolher do seu dispositivo. A imagem é renderizada na área de trabalho na escala de visualização, mas a amostragem de pixels acontece contra a cópia de resolução original.
2
Passe o mouse para visualizar uma cor
Mova seu cursor sobre a imagem. Uma lupa ampliada aparece acima do cursor mostrando o pixel exato sob ele com 8× de zoom, com um marcador de 1 pixel no centro. O cartão de cor do cursor abaixo da tela é atualizado ao vivo com HEX, RGB e HSL.
3
Clique para adicionar uma cor à sua paleta
Clique em qualquer pixel para adicionar sua cor à paleta. Duplicatas são puladas automaticamente, então é seguro clicar à vontade sem inflar a lista. Até 20 cores cabem em uma paleta.
4
Copie qualquer valor com um clique
Clique em qualquer HEX, RGB ou HSL na paleta para copiá-lo para a área de transferência. Clique na amostra em si para copiar seu HEX. A paleta inteira também é exportada como um bloco de propriedades CSS personalizadas (--color-1, --color-2, …).
5
Redefinir e tentar uma imagem diferente
Clique em Nova imagem para limpar a área de trabalho e carregar um arquivo diferente. Use Limpar dentro do cartão da paleta para manter a imagem, mas reiniciar a paleta.

Como funciona a amostragem de pixels no navegador

1. Decodifique o arquivo de origem com new Image() — o navegador lida com JPG/PNG/WebP/GIF/BMP nativamente.
2. Desenhe a imagem de resolução original em um canvas fora da tela.
3. Renderize uma pré-visualização reduzida no canvas visível (máx. 900 px no lado mais longo).
4. Ao passar o mouse, mapeie as coordenadas do cursor (x,y) do espaço de visualização de volta para as coordenadas do espaço de origem.
5. Leia o pixel via getImageData(sx, sy, 1, 1).data → [R, G, B, A].
6. Converta para HEX (R/G/B como hex de 2 dígitos) e HSL (rgbToHsl).

A amostragem contra o canvas de resolução total (em vez da pré-visualização) é importante porque a redução de escala média os pixels vizinhos — o que parece um vermelho limpo em uma pré-visualização de 100px de altura pode ser (240, 30, 30) em vez do exato (255, 0, 0) da origem. Mapear as coordenadas do cursor de volta para a resolução de origem e amostrar lá mantém a cor escolhida fiel ao arquivo original. A lupa adota a mesma abordagem: ela captura um pequeno quadrado do canvas de resolução original ao redor do cursor e o renderiza em 8× em um círculo de 120 pixels, com imageSmoothingEnabled = false para que os pixels individuais permaneçam nítidos.

Referência: MDN — CanvasRenderingContext2D.getImageData

Trabalhos comuns de seleção de cores

Fonte	Melhor fluxo de trabalho
Logotipo da marca em PNG com fundo transparente	Passe a lupa sobre a área de cor sólida, clique uma vez. Copie o HEX. Feito em dois cliques. A transparência do PNG é renderizada contra o fundo da página — amostra dentro do logotipo, não na borda.
Captura de tela de inspiração de um site de design	Escolha o fundo, a cor da ação principal, o acento secundário e a cor do texto do corpo. Copie as variáveis CSS. Paletas de quatro cores geralmente são suficientes para recriar um sistema de design.
Foto para referência artística (gradiente de céu, correspondência de tinta)	Use a lupa para escolher pixels exatos ao longo do gradiente. Crie uma paleta de 5-7 cores para recriar o visual. Gradientes de fotos têm ruído — escolha de áreas que parecem sólidas, não das bordas.
Captura de tela de relatório de bug com o tom de vermelho errado	Passe a lupa sobre o vermelho ruim, copie o HEX, cole no problema com o HEX esperado ao lado. A lupa torna bordas de 1 pixel e linhas finas selecionáveis sem aumentar o zoom do navegador.

Quando usar um seletor de cores de imagem

Extraia as cores da marca de um logotipo em PNG para construir uma paleta de variáveis CSS.
Combine uma captura de tela de um site de design com sua folha de estilo sem abrir o Figma.
Extraia uma paleta de referência de 5-7 cores de uma foto para pintura, tricô ou trabalho de textura 3D.
Verifique a cor exata que um renderizador produziu — útil quando uma captura de tela parece 'errada', mas você não consegue identificar o porquê.
Amostre cores de um moodboard ou de uma captura de tela de inspiração para um deck de apresentação.
Escolha uma cor de tinta ou tecido de uma foto do mundo real (azul do céu, terracota, etc.) para um redesign.
Construa uma paleta de tema diretamente de uma imagem principal para que a interface ao redor pareça visualmente unificada.

Ferramentas relacionadas

Removedor de Fundo

Recorte o assunto de qualquer foto com IA no dispositivo — sem necessidade de upload.

Compressor de Imagem

Reduza arquivos JPG, PNG ou WebP no seu navegador com um controle deslizante de qualidade interativo.

Editor de Fotos

Ajuste, filtre, gire e corte fotos no navegador — sem uploads, sem marca d'água.

Criador de Meme

Componha memes e colagens de capturas de tela com camadas reais — cole, arraste, corte, legendas, exporte.

Perguntas frequentes

As cores são escolhidas do arquivo original ou da pré-visualização?

Do arquivo original. O canvas visível é reduzido para desempenho, mas a amostragem de pixels acontece contra uma cópia off-screen em resolução total. As coordenadas do cursor são mapeadas de volta para o espaço de origem antes de ler o pixel, então a cor que você copia corresponde ao que está no arquivo que você enviou.

Por que meu HEX escolhido difere do valor na minha ferramenta de design?

Duas causas comuns. Primeiro, a compressão JPG média os pixels vizinhos, então uma região de cor 'plana' pode ter alguns valores HEX dentro de uma faixa RGB de 1-2 unidades — escolha do centro visual, não da borda. Segundo, navegadores e ferramentas de design às vezes aplicam gerenciamento de cores; para fidelidade absoluta, trabalhe com fontes PNG, que preservam o RGB exato.

A imagem é enviada para um servidor?

Não. A decodificação, renderização e amostragem de pixels acontecem no seu navegador via API Canvas. Você pode verificar na aba de rede que nenhum byte de imagem sai da página após o carregamento.

Por que a lupa faz zoom tão longe?

O zoom de 8× sem suavização torna pixels individuais visíveis, que é o objetivo — escolher uma borda de 1 pixel ou um único destaque é impossível a 1× porque o próprio cursor é maior que o pixel. O marcador branco e preto de 1 pixel no centro da lupa mostra exatamente qual pixel será amostrado se você clicar.

Posso escolher mais de 20 cores?

Vinte é o limite porque a maioria dos casos de uso de paletas (sistemas de marca, correspondência de tinta, geração de temas) precisa de 5-12 cores e qualquer coisa maior se torna difícil de gerenciar. Se você atingir o limite, as entradas mais antigas são descartadas para abrir espaço para novas escolhas.

E os pixels transparentes em PNGs?

Se você clicar em um pixel totalmente transparente, o seletor lê (0, 0, 0) já que o RGB subjacente é 0. Para escolher a cor visível, passe a lupa sobre uma área totalmente opaca da imagem. Logotipos com fundos transparentes funcionam desde que você clique dentro da forma colorida.

Qual é a diferença entre isso e o Conversor de Cores?

O Conversor de Cores pega um HEX ou RGB que você já conhece e converte entre formatos. Esta ferramenta obtém a cor de um pixel em uma imagem. Use o seletor primeiro para extrair cores de uma captura de tela, depois o conversor se você precisar de OKLCH ou qualquer outro formato que o seletor não renderiza.

Última atualização 2026-04-29

Carregando...

O que é um seletor de cores de imagem?

Como escolher cores de uma imagem

Solte sua imagem

Arraste um arquivo JPG, PNG, WebP, GIF ou BMP para a área de upload, ou clique para escolher do seu dispositivo. A imagem é renderizada na área de trabalho na escala de visualização, mas a amostragem de pixels acontece contra a cópia de resolução original.

Passe o mouse para visualizar uma cor

Mova seu cursor sobre a imagem. Uma lupa ampliada aparece acima do cursor mostrando o pixel exato sob ele com 8× de zoom, com um marcador de 1 pixel no centro. O cartão de cor do cursor abaixo da tela é atualizado ao vivo com HEX, RGB e HSL.

Clique para adicionar uma cor à sua paleta

Clique em qualquer pixel para adicionar sua cor à paleta. Duplicatas são puladas automaticamente, então é seguro clicar à vontade sem inflar a lista. Até 20 cores cabem em uma paleta.

Copie qualquer valor com um clique

Clique em qualquer HEX, RGB ou HSL na paleta para copiá-lo para a área de transferência. Clique na amostra em si para copiar seu HEX. A paleta inteira também é exportada como um bloco de propriedades CSS personalizadas (--color-1, --color-2, …).

Redefinir e tentar uma imagem diferente

Clique em Nova imagem para limpar a área de trabalho e carregar um arquivo diferente. Use Limpar dentro do cartão da paleta para manter a imagem, mas reiniciar a paleta.

Como funciona a amostragem de pixels no navegador

1. Decodifique o arquivo de origem com new Image() — o navegador lida com JPG/PNG/WebP/GIF/BMP nativamente.
2. Desenhe a imagem de resolução original em um canvas fora da tela.
3. Renderize uma pré-visualização reduzida no canvas visível (máx. 900 px no lado mais longo).
4. Ao passar o mouse, mapeie as coordenadas do cursor (x,y) do espaço de visualização de volta para as coordenadas do espaço de origem.
5. Leia o pixel via getImageData(sx, sy, 1, 1).data → [R, G, B, A].
6. Converta para HEX (R/G/B como hex de 2 dígitos) e HSL (rgbToHsl).

Trabalhos comuns de seleção de cores

Fonte	Melhor fluxo de trabalho
Logotipo da marca em PNG com fundo transparente	Passe a lupa sobre a área de cor sólida, clique uma vez. Copie o HEX. Feito em dois cliques. A transparência do PNG é renderizada contra o fundo da página — amostra dentro do logotipo, não na borda.
Captura de tela de inspiração de um site de design	Escolha o fundo, a cor da ação principal, o acento secundário e a cor do texto do corpo. Copie as variáveis CSS. Paletas de quatro cores geralmente são suficientes para recriar um sistema de design.
Foto para referência artística (gradiente de céu, correspondência de tinta)	Use a lupa para escolher pixels exatos ao longo do gradiente. Crie uma paleta de 5-7 cores para recriar o visual. Gradientes de fotos têm ruído — escolha de áreas que parecem sólidas, não das bordas.
Captura de tela de relatório de bug com o tom de vermelho errado	Passe a lupa sobre o vermelho ruim, copie o HEX, cole no problema com o HEX esperado ao lado. A lupa torna bordas de 1 pixel e linhas finas selecionáveis sem aumentar o zoom do navegador.

Quando usar um seletor de cores de imagem

Extraia as cores da marca de um logotipo em PNG para construir uma paleta de variáveis CSS.

Combine uma captura de tela de um site de design com sua folha de estilo sem abrir o Figma.

Extraia uma paleta de referência de 5-7 cores de uma foto para pintura, tricô ou trabalho de textura 3D.

Verifique a cor exata que um renderizador produziu — útil quando uma captura de tela parece 'errada', mas você não consegue identificar o porquê.

Amostre cores de um moodboard ou de uma captura de tela de inspiração para um deck de apresentação.

Escolha uma cor de tinta ou tecido de uma foto do mundo real (azul do céu, terracota, etc.) para um redesign.

Construa uma paleta de tema diretamente de uma imagem principal para que a interface ao redor pareça visualmente unificada.