Seletor de cores de imagem

Carregue ou cole a imagem aqui e clique no pixel que deseja — a ferramenta o lê via canvas HTML e mostra os valores HEX, RGB e HSL instantaneamente, copiando o código hex para sua área de transferência. A lupa de ampliação mostra os pixels individuais ao redor do cursor para que você acerte exatamente o certo. Não há envio para um servidor em nenhum momento; tudo roda no seu navegador usando a API canvas do HTML5. Isso a torna instantânea, privada e utilizável offline depois que a página carregou. Para áreas difíceis de clicar, como texto suavizado ou bordas de logo, aplique o zoom do próprio navegador antes de clicar.

Use este conta-gotas gratuito no navegador: solte a imagem, clique em um pixel e copie o código. Sem instalação, sem cadastro. Diferente do Adobe Photoshop ou Illustrator — ambos a partir de cerca de R$ 100/mês — esta ferramenta é completamente grátis. Diferente do Digital Color Meter do macOS ou do Color Picker do PowerToys do Windows, ela também extrai automaticamente a paleta dominante da imagem, para que você obtenha todas as cores principais de uma vez, em vez de clicar em cada uma individualmente. O imagecolorpicker.com é a alternativa dedicada mais popular, mas envia seu arquivo para um servidor; esta ferramenta não faz isso.

Eles codificam a mesma cor de duas formas. O HEX escreve vermelho/verde/azul como três pares hexadecimais (#FF5733) e é o padrão em CSS e web design; o RGB usa três números decimais de 0 a 255 — rgb(255, 87, 51) — comum em editores de imagem e código. A conversão entre eles é sem perdas, e esta ferramenta mostra ambos para cada pixel que você clica. Use HEX ao escrever CSS ou classes Tailwind; use RGB ao trabalhar com canvas, WebGL ou código de processamento de imagem que espera canais numéricos. Os dois formatos descrevem o mesmo ponto de cor sRGB.

HSL descreve uma cor por Matiz (Hue, 0-360°), Saturação e Luminosidade — o que é mais intuitivo para ajustar cores. Você pode tornar uma cor mais clara ou menos saturada sem alterar seu matiz. O CSS suporta hsl() nativamente, por isso designers frequentemente trabalham em HSL ao construir uma paleta: aumente a Luminosidade para um tom mais claro, diminua para um tom mais escuro. O seletor mostra HEX, RGB e HSL para cada pixel, para que você copie o que seu fluxo de trabalho precisar. Para Figma, Sketch ou Adobe XD, HEX costuma ser o formato mais rápido para colar; para Tailwind ou propriedades customizadas CSS, HEX ou HSL funcionam bem.

Basta carregar a foto — a paleta dominante aparece automaticamente. A ferramenta quantiza os pixels da imagem em grupos e os ordena por frequência, retornando as oito cores mais dominantes como amostras com códigos HEX. Clique em qualquer amostra para copiá-la, ou copie a paleta inteira de uma vez. O Adobe Color e o gerador de paletas do Canva fazem a mesma coisa, mas exigem uma conta; o Coolors.co pode gerar paletas de fotos, mas envia a imagem para seu servidor. Aqui, a extração de paleta roda totalmente no seu navegador — nada enviado, sem necessidade de conta e sem anúncios interrompendo seu trabalho.

A imagem é desenhada em um elemento canvas HTML no seu navegador; clicar lê os valores vermelho, verde e azul daquele pixel via a API getImageData e os converte para HEX, RGB e HSL. Como o canvas roda localmente, nenhum servidor é envolvido. A lupa usa um segundo elemento canvas para ampliar a região de pixels ao redor do cursor, permitindo que você mire exatamente no pixel certo mesmo em imagens com detalhes finos como texto suavizado, bordas de logo ou gradientes fotográficos.

Nesta ferramenta, sim — a imagem é carregada apenas na memória do seu navegador e nunca é transmitida para nenhum lugar. Você pode verificar isso na aba Rede do seu navegador: nenhuma requisição é feita após o carregamento da página. Isso é importante para designs não publicados, logos de clientes e fotos privadas. Muitos seletores baseados em upload — incluindo o imagecolorpicker.com e alguns recursos do Canva — enviam seu arquivo para um servidor e o armazenam temporariamente. Esta ferramenta processa tudo localmente, então seus arquivos ficam no seu dispositivo e desaparecem quando você fecha a aba.

Sim — o botão 'Pegar da tela' usa a API EyeDropper (suportada no Chrome e Edge) para amostrar qualquer pixel em qualquer lugar da sua tela, incluindo outras janelas, aplicativos e abas do navegador. A cor capturada aparece no mesmo painel HEX/RGB/HSL e no histórico das seleções de imagem. Para navegadores sem a API (Safari, Firefox), tire um screenshot da tela com PrtScn ou Cmd+Shift+4, depois cole diretamente no seletor com Ctrl+V — sem precisar salvar o arquivo antes. Isso funciona para frames de vídeo, PDFs no navegador e qualquer página da web ao vivo.

Salve ou tire um screenshot do logo e arraste até aqui, depois clique na cor da marca e copie o HEX. Ou pule o screenshot: use o botão do eyedropper de tela para amostrar o site ao vivo diretamente enquanto ele está aberto em outra aba. Isso é mais rápido do que usar o DevTools do navegador para inspecionar estilos computados, especialmente quando a cor está incorporada em um SVG ou ativo de imagem em vez de uma propriedade CSS. O histórico de seleções guarda suas últimas 16 cores, para que você possa coletar uma paleta de marca completa de várias fontes antes de mudar para sua ferramenta de design.

A maioria das paletas úteis tem 3 a 6 cores: uma cor dominante, uma ou duas secundárias e acentos. O extrator retorna oito amostras dominantes para que você escolha o subconjunto que funciona melhor — copie amostras individuais ou pegue o conjunto completo para um moodboard. Na prática, quatro cores é um bom ponto de partida: uma primária, uma secundária, uma neutra e um acento. Sistemas de design de empresas como Stripe e Linear usam paletas compactas com muitas variações de luminosidade e saturação dos mesmos matizes, em vez de muitas cores distintas.

HEX para CSS e trabalho web (o mais comum em bases de código e ferramentas de design), RGB/RGBA para telas e código canvas, HSL para construção de paletas e ajustes sistemáticos, e CMYK para impressão. Figma, Sketch e Adobe XD suportam HEX, RGB e HSL. Este seletor mostra HEX, RGB e HSL para cada pixel, para que você copie o que seu fluxo de trabalho precisar sem nenhuma conversão manual. Se você também precisar de CMYK para impressão, cole o HEX em um conversor online gratuito — a API canvas não gera CMYK nativamente.

Clicar em um pixel copia o HEX automaticamente para a área de transferência. Cada linha de valor, amostra do histórico e chip de paleta também tem cópia por clique — basta clicar no valor ou na amostra e está copiado. O histórico de seleções guarda suas últimas 16 cores para que você possa coletar vários tons de uma imagem em sequência antes de passar para outra. Passe o mouse sobre as amostras para ver os valores antes de clicar. Se precisar da paleta completa como lista, use 'Copiar tudo' para obter todos os oito códigos hex separados por vírgula, prontos para colar em variáveis CSS ou em um documento de design.

Sim — tire um screenshot do frame ou da página e cole no seletor com Ctrl+V (sem precisar salvar um arquivo), ou use o eyedropper de tela para amostrar diretamente enquanto o PDF ou vídeo está sendo exibido. Para PDFs abertos no navegador, o eyedropper de tela costuma ser o mais rápido: abra o PDF no Chrome, clique em 'Pegar da tela' e clique na cor desejada. Para vídeo, pause no frame primeiro para obter a amostra mais precisa.

Os navegadores podem aplicar conversão de perfil de cor (ICC) ao renderizar imagens, e screenshots herdam o perfil de cor da sua tela. O seletor reporta os valores reais de pixel sRGB conforme renderizados pelo seu navegador — os valores que você usaria em CSS — o que é correto para trabalho web. Se você estiver vendo uma diferença em relação ao Photoshop ou Figma, verifique se sua tela está calibrada para sRGB e se o arquivo de imagem tem um perfil de cor incorporado que corresponda. Para assets de logo, o designer deveria idealmente fornecer os valores HEX da marca diretamente, em vez de depender da extração.

O imagecolorpicker.com é a alternativa mais usada — oferece seleção de pixel único e extração de paleta, mas envia sua imagem para seu servidor e exibe anúncios. O Adobe Color extrai paletas de fotos, mas exige uma conta Adobe e envia as imagens para os servidores da Adobe; também não oferece seleção de pixel único com lupa de zoom. O seletor de cores do Canva é integrado ao editor do Canva e só funciona em imagens dentro de um projeto Canva. O Digital Color Meter do macOS e o Color Picker do PowerToys do Windows funcionam para amostragem de tela, mas não extraem paletas de arquivos. Esta ferramenta é a única opção gratuita e totalmente client-side com lupa de zoom, eyedropper de tela, histórico de 16 cores e extração de paleta combinados — sem conta, sem anúncios, sem upload.