Conta-gotas online para pegar a cor do pixel exato

Um conta-gotas online é uma ferramenta que lê os valores reais dos pixels de uma imagem e devolve os códigos de cor deles. Você aponta para um ponto de uma foto, um print ou um logotipo, e ele diz que aquele pixel é #F5A17D, ou rgb(245, 161, 125), ou a notação de que você precisar. Não é um filtro nem um editor, e nada na sua imagem muda. É a forma de tirar uma cor de uma imagem e colocá-la numa folha de estilo, num arquivo de design ou num pedido de tinta.

Seu navegador decodifica a imagem numa grade de pixels, e cada pixel guarda um valor de vermelho, um de verde e um de azul entre 0 e 255. Esta ferramenta desenha essa imagem decodificada num canvas HTML, no tamanho original completo, e lê o pixel sob o cursor. Esses três números viram todas as outras notações: o HEX nada mais é que esses números escritos em base 16, enquanto HSL e OKLCH descrevem a mesma cor por ângulo e luminosidade. O zoom só muda o que você vê. O canvas que é lido de fato nunca é redimensionado, então a leitura com zoom de 10× é igual à leitura com a imagem ajustada à tela.

Porque adivinhar custa mais tempo do que medir, e as pessoas percebem quando uma cor está quase certa. Se você está refazendo um layout a partir de um print, igualando uma cor de marca tirada de um PDF que mandaram para você, ou extraindo uma paleta de uma fotografia, a cor já está ali. Você só precisa dela num formato que possa colar. Um seletor também entrega tudo o que cerca uma cor e é chato de calcular à mão: seus tons, sua relação de contraste com branco e preto, e se ela continua se distinguindo das vizinhas para quem tem uma deficiência de visão de cores.

Arraste a imagem para o seletor, passe o cursor pela área que quiser e clique. A lupa mostra o bloco de 13 × 13 pixels sob o cursor com a grade desenhada, então você vê qual pixel vai pegar antes de pegar. Clicar deixa um marcador numerado, e o painel ao lado se preenche com nove notações daquele pixel. Clique em qualquer uma para copiar. Quando precisar ser exato, dê zoom e use as setas, que movem a amostra um pixel por vez e dispensam a mão firme.

Qualquer um que o seu navegador decodifique, o que na prática cobre JPEG, PNG, WebP, AVIF, GIF e BMP, além de arquivos SVG que tenham largura e altura intrínsecas. O limite é de 40 MB por arquivo; não há limite de dimensões. Você pode arrastar um arquivo, escolher um no computador, colar um print com Ctrl + V ou colar a URL de uma imagem da web. Fotos tiradas no celular chegam na posição certa, porque a orientação EXIF é aplicada na decodificação em vez de ignorada.

Dá, de duas formas. Cada clique deixa um marcador e não há limite de quantos você coloca, então dá para percorrer uma imagem colhendo cores, renomear cada uma, reordená-las e exportar o conjunto de uma vez. Além disso, a aba de paleta descreve a imagem inteira de uma vez: ela é reduzida a 160 pixels no lado mais longo, dividida por corte pela mediana e depois refinada com k-médias ponderadas em CIE LAB, para que os grupos correspondam ao jeito como as pessoas realmente enxergam cor. Cada uma das oito amostras informa a fatia da imagem que ocupa.

Funciona. Toque para escolher, arraste com um dedo para mover a imagem e use o movimento de pinça com dois dedos para dar zoom. Na hora de escolher o arquivo, o celular costuma oferecer a câmera, então dá para fotografar algo e pegar a cor na hora. A única coisa que se perde numa tela sensível ao toque é o hover: não existe cursor passando na frente, então o toque já confirma a cor. Em detalhes pequenos, vale ampliar com a pinça primeiro e tocar depois, o mesmo conselho de usar as setas no computador.

Dá, no Chrome, no Edge e em outros navegadores baseados em Chromium. O botão “Capturar da tela” usa a API EyeDropper nativa do navegador, que consegue ler qualquer pixel da sua tela, inclusive outra janela, o quadro de um vídeo ou um PDF. Firefox e Safari não implementaram essa API, então lá o botão não aparece. Nesses navegadores, tire um print e cole com Ctrl + V. Pegar a cor de um print em PNG costuma devolver o mesmo valor que você teria na tela.

Nove, em tempo real, para cada cor que você pega: HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH e o nome CSS mais próximo. O nome é calculado com CIEDE2000 em vez de distância RGB direta, por isso acerta o nome que de fato mais se parece com a cor. HEX e RGB são os que você mais vai colar, HSL e HSV são mais fáceis de raciocinar quando você quer a mesma cor um pouco mais clara, e OKLCH é perceptualmente uniforme, razão pela qual as escalas de tom e as harmonias são calculadas nele e não em HSL. O seletor de cores, a ferramenta irmã desta, decompõe uma única cor em 34 códigos, acrescentando HWB, CIELUV, OKLab, CIE XYZ e sRGB linear.

A leitura em si é exata: a ferramenta devolve os valores de byte da imagem decodificada, sem interpolação e sem arredondamento. A precisão se perde na imagem. Num JPEG salvo com qualidade 95, um pixel numa área chapada fica a 0,37 delta-E do original (o delta-E mede a diferença de cor visível; abaixo de 1 ela é invisível). Um pixel sobre uma borda já está a 6,91, e a cor só volta a ser precisa a cerca de 3 pixels de uma borda nítida. A suavização de bordas faz um estrago parecido sem compressão: a borda de um círculo de teste produziu 77 cores que não aparecem nem na forma nem no fundo. Medido em 25 de agosto de 2026 no Chromium 151.0.7922.34.

Pode. Qualquer valor pode ser copiado com um clique, e a aba Exportar exporta um conjunto inteiro de uma vez, sejam seus marcadores, a paleta extraída da imagem, as harmonias ou uma escala completa de 50 a 950. Há seis formatos disponíveis: propriedades personalizadas de CSS, um bloco @theme do Tailwind v4, variáveis SCSS com um mapa, JSON, uma lista simples de códigos hexadecimais e uma folha de amostras SVG com os rótulos desenhados. Cada um pode ser copiado para a área de transferência ou baixado como arquivo. Não há exportação para PNG nem para paletas da Adobe; a folha SVG é o mais próximo de uma imagem compartilhável de uma paleta.

Não. Neste site não existe nenhum endpoint de upload: o seu navegador abre o arquivo e a ferramenta lê os pixels de um canvas na mesma aba. Não há conta nem analytics. Para conferir, abra a aba Rede do navegador e escolha algumas cores: nenhuma requisição aparece. O teste de ponta a ponta do projeto faz o mesmo e falha se alguma requisição sair da página. A única exceção é colar a URL de uma imagem, que faz o seu navegador buscar aquele endereço em quem o hospeda.

Você está em um. Este conta-gotas online é gratuito, sem cadastro, sem marca d’água, sem limite diário e sem nenhuma versão paga segurando nada: todas as notações, a extração de paleta e os seis formatos de exportação estão abertos a todo mundo. Isso só é possível porque o trabalho acontece no seu dispositivo, então não há custo de servidor por imagem a recuperar. Você pode usar este conta-gotas online de um computador, um tablet ou um celular, em qualquer navegador moderno e sem instalar nada. Salve a página nos favoritos se quiser tê-la à mão; o link na sua barra de endereços também guarda a última cor que você pegou.

Aquele que responde à pergunta que você realmente tem, e só há quatro coisas que vale a pena checar. Ele manda o seu arquivo para um servidor ou lê no seu navegador? Ele entrega algo além de um código hexadecimal, como uma paleta, uma verificação de contraste ou uma escala de tons? Dá para aumentar a área de amostragem, que é o que torna legível uma foto com ruído? E dá para exportar o resultado num formato que as suas ferramentas aceitem? Este cumpre as quatro. E, para ser franco sobre o que falta: o conta-gotas de tela só funciona em navegadores baseados em Chromium, e não há exportação para paletas da Adobe nem para PNG.

Tire o print, volte a esta página e pressione Ctrl + V (Cmd + V no Mac). A imagem abre na hora. Clique no pixel que você precisa e copie o código HEX. Prints costumam ser salvos em PNG, sem compressão, então o código normalmente é o mesmo que aparecia na tela.

Carregue a imagem e abra a aba Paleta da imagem: a ferramenta agrupa a foto nas suas oito cores principais e mostra quanto da imagem cada uma ocupa. Copie qualquer amostra ou exporte a paleta inteira como variáveis CSS, tema do Tailwind, SCSS, JSON, lista de HEX ou folha de amostras em SVG.

Dá. Cada cor que você pega mostra o nome CSS mais próximo, como “slateblue” ou “tomato”, escolhido pela semelhança visual entre as cores e não pela distância entre números RGB, além de uma descrição curta em palavras. O nome é a correspondência mais próxima; o código HEX é o valor exato.

Não diretamente. O seletor de cores do próprio Google, que aparece em buscas como “seletor de cores”, permite escolher uma cor num espectro, mas não lê um pixel da sua imagem. Para obter o código exato de uma foto ou print, abra a imagem num conta-gotas online e clique no pixel.

Não. Este conta-gotas funciona em qualquer navegador moderno, no computador ou no celular, sem instalar nada. Para pegar uma cor de qualquer lugar da tela, use o botão Capturar da tela, que funciona no Chrome e no Edge. Nos outros navegadores, tire um print e cole aqui.