Seletor de cores de imagem

Carregue ou cole a imagem aqui e clique no pixel que quer — a ferramenta lê-o via canvas HTML e mostra instantaneamente os valores HEX, RGB e HSL, copiando o código hex para a sua área de transferência. A lupa ampliadora mostra píxeis individuais à volta do cursor para acertar exatamente no correto. Não há envio para um servidor em nenhum momento; tudo corre no seu browser usando a API canvas HTML5. Isso torna-o instantâneo, privado e utilizável offline depois de a página ter carregado. Para áreas difíceis de clicar como texto anti-aliased ou bordas de logotipos, amplie primeiro com o zoom integrado do browser antes de clicar.

Use este conta-gotas gratuito baseado no browser: carregue a imagem, clique num pixel e copie o código. Sem instalação, sem registo. Ao contrário do Adobe Photoshop ou Illustrator — ambos a partir de cerca de 20€/mês — esta ferramenta é completamente gratuita. Ao contrário do Medidor de Cores Digital do macOS ou do Color Picker do Windows PowerToys, extrai também automaticamente a paleta dominante da imagem, para obter todas as cores principais de uma vez em vez de clicar em cada uma individualmente. O imagecolorpicker.com é a alternativa dedicada mais popular, mas carrega o seu ficheiro para um servidor; esta ferramenta não o faz.

Codificam a mesma cor de duas formas diferentes. 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 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. Ambos os formatos descrevem o mesmo ponto de cor sRGB.

O HSL descreve uma cor por Matiz (0-360°), Saturação e Luminosidade — o que é mais intuitivo para ajustar cores. Pode tornar uma cor mais clara ou menos saturada sem alterar o seu matiz. O CSS suporta hsl() nativamente, por isso os designers trabalham frequentemente em HSL ao construir uma paleta: aumente a Luminosidade para um tom mais claro, diminua para um tom mais escuro. O conta-gotas mostra HEX, RGB e HSL para cada pixel, para poder copiar o que o seu fluxo de trabalho necessitar. Para Figma, Sketch ou Adobe XD, o HEX é normalmente o formato mais rápido para colar; para Tailwind ou propriedades personalizadas CSS, tanto HEX como HSL funcionam bem.

Basta carregar a fotografia — a paleta dominante aparece automaticamente. A ferramenta quantiza os píxeis da imagem em grupos e ordena-os por frequência, devolvendo as oito cores mais dominantes como amostras com códigos HEX. Clique em qualquer amostra para a copiar, ou copie toda a paleta de uma vez. O Adobe Color e o gerador de paletas do Canva fazem a mesma coisa, mas requerem uma conta; o Coolors.co pode gerar paletas a partir de fotografias, mas envia a imagem para o seu servidor. Aqui, a extração de paleta corre inteiramente no seu browser — nada é carregado, não é necessária conta e sem anúncios a interromper o seu trabalho.

A imagem é desenhada num elemento canvas HTML no seu browser; clicar lê os valores de vermelho, verde e azul desse pixel através da API getImageData e converte-os para HEX, RGB e HSL. Como o canvas corre localmente, não está envolvido nenhum servidor. A lupa ampliadora usa um segundo elemento canvas para ampliar a região de píxeis à volta do cursor, permitindo-lhe apontar exatamente ao pixel certo mesmo em imagens com detalhes finos como texto anti-aliased, bordas de logotipos ou gradientes fotográficos.

Nesta ferramenta, sim — a imagem é apenas carregada para a memória do seu browser e nunca transmitida para lado nenhum. Pode verificar isto no separador Rede do seu browser: não são feitos pedidos depois de a página carregar. Isso é importante para designs não publicados, logotipos de clientes e fotografias privadas. Muitos conta-gotas baseados em envio de ficheiros — incluindo o imagecolorpicker.com e algumas funcionalidades do Canva — enviam o seu ficheiro para um servidor e armazenam-no temporariamente. Esta ferramenta processa tudo localmente, por isso os seus ficheiros ficam no seu dispositivo e desaparecem quando fecha o separador.

Sim — o botão "Capturar do ecrã" usa a API EyeDropper (suportada no Chrome e Edge) para amostrar qualquer pixel em qualquer parte do seu ecrã, incluindo outras janelas, aplicações e separadores do browser. A cor capturada aparece no mesmo painel HEX/RGB/HSL e histórico que as seleções de imagem. Em browsers sem a API (Safari, Firefox), o fluxo de colar cobre a lacuna: faça um screenshot com PrtScn ou Cmd+Shift+4, depois cole diretamente nesta página com Ctrl+V — sem necessidade de guardar o ficheiro primeiro. Isto cobre fotogramas de vídeo, PDFs no browser e qualquer página web em direto.

Guarde ou faça screenshot do logotipo e carregue-o aqui, depois clique na cor de marca e copie o HEX. Ou ignore o screenshot completamente: use o botão de conta-gotas de ecrã para amostrar diretamente o website em direto enquanto está aberto noutro separador. Isso é mais rápido do que usar o DevTools do browser para inspecionar estilos computados, especialmente quando a cor está incorporada num SVG ou recurso de imagem em vez de uma propriedade CSS. O histórico de seleções guarda as suas últimas 16 cores, para poder recolher uma paleta de marca completa de várias fontes antes de mudar para a sua ferramenta de design.

A maioria das paletas utilizáveis tem 3 a 6 cores: uma cor dominante, uma ou duas secundárias e acentos. O extrator devolve oito amostras dominantes para poder escolher o subconjunto que funciona melhor — copie amostras individuais ou tome 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. Os sistemas de design de empresas como a Stripe e a Linear usam paletas compactas com muitas variantes 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 ecrãs 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 todos HEX, RGB e HSL. Este conta-gotas mostra HEX, RGB e HSL para cada pixel para poder copiar o que o seu fluxo de trabalho necessitar sem qualquer conversão manual. Se também precisar de CMYK para trabalho de impressão, cole o HEX num conversor online gratuito — a API canvas não produz CMYK nativamente.

Clicar num pixel copia automaticamente o seu HEX para a área de transferência. Cada linha de valor, amostra do histórico e chip de paleta também permite copiar com um clique — basta clicar no valor ou amostra e fica copiado. O histórico de seleções guarda as suas últimas 16 cores para poder recolher vários tons de uma imagem em sequência antes de mudar para outra. Passe o rato sobre as amostras para ver os seus 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írgulas, prontos a colar em variáveis CSS ou num documento de design.

Sim — faça screenshot do fotograma ou página e cole-o no conta-gotas com Ctrl+V (sem necessidade de guardar um ficheiro), ou use o conta-gotas de ecrã para amostrar diretamente enquanto o PDF ou vídeo está a ser reproduzido. Para PDFs abertos no browser, o conta-gotas de ecrã é normalmente o mais rápido: abra o PDF no Chrome, clique em "Capturar do ecrã" e depois clique na cor que quer. Para vídeo, pause no fotograma primeiro para uma amostra mais precisa.

Os browsers podem aplicar conversão de perfil de cor (ICC) ao renderizar imagens, e os screenshots herdam o perfil de cor do seu ecrã. O conta-gotas reporta os valores de pixel sRGB reais como renderizados pelo seu browser — os valores que usaria em CSS — o que é correto para trabalho web. Se estiver a ver uma discrepância em relação ao Photoshop ou Figma, verifique que o seu ecrã está calibrado para sRGB e que o ficheiro de imagem tem um perfil de cor incorporado que corresponde. Para recursos de logotipo, o designer deveria idealmente fornecer os valores HEX de marca diretamente em vez de depender de extração.

O imagecolorpicker.com é a alternativa mais usada — oferece seleção pixel a pixel e extração de paleta, mas carrega a sua imagem para o seu servidor e exibe anúncios. O Adobe Color extrai paletas de fotografias, mas requer uma conta Adobe e envia imagens para os servidores da Adobe; também não oferece seleção pixel a pixel com lupa de zoom. O conta-gotas do Canva está integrado no editor Canva e só funciona com imagens dentro de um projeto Canva. O Medidor de Cores Digital do macOS e o Color Picker do Windows PowerToys funcionam para amostragem de ecrã, mas não extraem paletas de ficheiros. Esta ferramenta é a única opção gratuita e totalmente do lado do cliente com lupa de zoom, conta-gotas de ecrã, histórico de 16 cores e extração de paleta combinados — sem conta, sem anúncios, sem envio de ficheiros.