Guia prático
Obter um código hexadecimal de uma foto leva um clique. Obter o código certo pede um pouco mais de cuidado, porque a compressão JPEG e as bordas suaves mudam os pixels antes do seu clique. Este guia mostra onde as cores dão errado e como evitar isso, e cada número dele foi medido num navegador real.
Por Md. Delwar Hossen · medições feitas em 25 de agosto de 2026 Última atualização
Carregue uma imagem, passe o cursor para achar o pixel que quer e clique para guardá-lo. A seguir, os mesmos três passos com o porquê de cada um.
Dentro da sua aba do navegador
Sua imagem
Arrastada, colada, escolhida nos arquivos ou baixada de uma URL.
Decodificada uma vez
createImageBitmap, com a orientação EXIF aplicada para que uma foto de celular saia na posição certa.
Canvas de origem
Mantido na resolução natural da imagem e nunca redimensionado. Toda leitura de cor sai daqui.
O canvas de exibição
o que você vê
Desenhado através de uma transformação de zoom e deslocamento, com a suavização desligada acima de 2× para você enxergar pixels individuais. Nenhuma cor é lida dele.
O amostrador
o que você obtém
Lê o canvas de origem no pixel sob o cursor, fazendo a média do quadrado escolhido no controle de amostra.
Aquela bifurcação no meio merece um segundo olhar, porque responde à pergunta mais comum. Ampliar até 6.400% não deixa a leitura mais precisa, e reduzir o zoom não a deixa mais borrada. O zoom existe para que você veja em qual pixel vai clicar. A leitura em si sai sempre do original, intocado.
Todas terminam no mesmo lugar. As diferenças estão no que pode dar errado.
Arraste um arquivo para qualquer ponto do seletor. A área de destino se destaca enquanto o arquivo passa sobre ela.
Soltar uma segunda imagem substitui a primeira e apaga seus marcadores.
Uma captura de tela, ou uma imagem copiada de qualquer lugar. Funciona de qualquer parte da página.
O atalho fica desativado enquanto o cursor está num campo de texto, então colar um link no campo de URL só cola o link.
O seletor de arquivos de sempre, filtrado para imagens.
No celular, é aqui que fica a sua galeria. A maioria dos celulares também oferece a própria câmera como opção.
Cole um link para uma imagem e ela é baixada e decodificada no seu navegador.
Só funciona se o servidor permitir que outros sites leiam as imagens dele. Muitos não permitem. Se recusar, baixe o arquivo e solte aqui.
Uma fotografia chamada Powder at sunset, que está ali para você testar tudo antes de usar um arquivo seu.
As grades de pixels da seção da lupa, mais abaixo, foram tiradas desta foto.
Não há limite de dimensões porque a imagem nunca é redimensionada para a leitura: ela fica na resolução original e é lida diretamente dali. A única regra de formato que pega é a dos vetores: um SVG sem largura e altura no elemento raiz não tem resolução para ser lido e será recusado.
Passar o cursor amplia os treze por treze pixels ao redor dele. Essa janela não é enfeite: no zoom normal, um pixel é bem menor que a ponta do cursor, então sem ela você está adivinhando.
Pixel 435, 204 da fotografia de exemplo, ampliado cerca de 20 vezes.
#E79983
O pixel único sob o cursor.
#CE8472
6,64 de distância da escolha de um só pixel.
#B97262
12,92 de distância da escolha de um só pixel.
#A8675D
17,9 de distância da escolha de um só pixel.
Dois elementos se encontram dentro dos mesmos treze pixels. Aumentar a amostra mistura os dois lados da borda e devolve uma cor que não é nenhum deles, então este é o único caso em que o certo é manter a amostra em 1 pixel e dar zoom.
Pixel 149, 336 da fotografia de exemplo, ampliado cerca de 20 vezes.
#877978
O pixel único sob o cursor.
#524442
19,53 de distância da escolha de um só pixel.
#554745
18,55 de distância da escolha de um só pixel.
#584948
17,79 de distância da escolha de um só pixel.
Detalhe e ruído de compressão, sem nenhuma borda atravessando. Errar por um pixel dá uma cor bem diferente, e é exatamente para isso que serve uma amostra maior.
Pixel 72, 17 da fotografia de exemplo, ampliado cerca de 20 vezes.
#283270
O pixel único sob o cursor.
#283371
0,36 de distância da escolha de um só pixel.
#283371
0,36 de distância da escolha de um só pixel.
#283371
0,36 de distância da escolha de um só pixel.
Nada acontece nestes treze pixels. Todos os tamanhos de amostra caem no mesmo lugar e errar por um pixel não custa nada, então a menor amostra é a certa.
Os dois números são diferenças CIEDE2000. Abaixo de 1, ninguém vê a diferença. Acima de 10, parecem cores diferentes.
Alterne entre eles acima e observe os dois números logo abaixo. Eles resumem toda a regra do controle de amostra, e você pode deduzi-la em vez de acreditar na minha palavra:
200 tentativas em pontos aleatórios de uma área com ruído cuja média real é #10A99B. Quanto menor, mais perto.
Ir de 1 px para 11 × 11 reduz o erro de 6,45 para 0,57: de uma cor visivelmente errada para uma que nenhum olho distingue da certa. Isso só vale onde os pixels ao redor do cursor pertencem à mesma superfície; atravessando uma borda, essa mesma média joga contra você.
Medido em um navegador de verdade
Três coisas estragam uma cor antes mesmo do clique. Nenhuma é culpa do seletor, todas dá para evitar e todas dá para medir. Por isso, em vez de descrevê-las, mostro as medições.
Um desenho de cores de marca chapadas, salvo em cinco níveis de qualidade e lido novamente. As barras mostram a diferença média CIEDE2000 em relação ao original, em 51.362 pixels de área chapada e 5.019 sobre uma borda.
Mesmo no nível de qualidade mais alto, um pixel sobre uma borda já erra por 6,91, enquanto um pixel numa área chapada fica em 0,37, o que é invisível. Cair para q40 muda os dois números bem menos do que sair da borda. Não é o controle de qualidade que decide se a sua cor está certa: é onde você clica.
Duas cores chapadas se encontrando numa borda nítida, salvas em q90 e lidas de novo, um pixel por vez, afastando-se da emenda.
pixels a partir da borda
O primeiro pixel do outro lado da emenda está a 19,04 da cor certa: ele volta como #648187, uma cor que não existe em nenhuma das duas metades da imagem. A 3 pixels da borda, o erro já fica abaixo da linha em que a diferença se vê de relance. Salvar o mesmo arquivo em q60 deu o mesmo resultado, então isso também não se resolve aumentando a qualidade.
Um círculo desenhado sobre um fundo, sem nenhuma compressão envolvida.
#24409A
A forma
o que você queria pegar
#7A736A
A borda dela
34,96 de distância da forma
#FBBF24
O fundo
a outra cor real
Para uma curva parecer suave, o renderizador mistura a forma com o fundo ao longo de todo o contorno. Aquele único círculo tem 77 cores distintas em volta da borda, e nenhuma delas está no design. Clique no meio visual de uma borda e você obtém #7A736A: uma cor que ninguém escolheu, a 34,96 daquela que você queria. Nenhum formato de arquivo evita isso, então a solução é dar zoom o bastante para ver a grade de pixels e clicar dentro da forma.
Cada número desta página vem de scripts/measure-color-drift.mjs, que roda no Chromium 151.0.7922.34. Ele foi executado pela última vez em 25 de agosto de 2026. A codificação e a decodificação JPEG são as do próprio navegador, então os resultados mostram o que um navegador real faz. Cada diferença é um valor CIEDE2000 calculado pela mesma função que a ferramenta usa. O script desenha as próprias imagens de teste; as grades de pixels vêm da foto de exemplo incluída.
As setas são a forma mais confiável de acertar um pixel específico. Clique uma vez na imagem para dar foco a ela e as teclas abaixo passam a funcionar.
Nenhum desses atalhos funciona antes de você carregar uma imagem, e isso é de propósito: um canvas vazio não tem pixels para percorrer.
Um clique que arrasta mais de quatro pixels é tratado como deslocamento e não pega nada, então uma mão um pouco trêmula nunca deixa um marcador que você não queria.
Um atalho funciona na página inteira, e não só sobre a imagem: Ctrl + V carrega a imagem que estiver na área de transferência ou abre o link de imagem, se foi isso que você copiou. Ele fica desativado enquanto você digita num campo de texto.
Um código HEX sozinho raramente resolve. As quatro abas ao lado da imagem transformam a cor escolhida em algo que você pode usar de verdade.
As cores de que a fotografia é feita, com a fatia de pixels que cada uma ocupa. A imagem é reduzida a 160 pixels no lado longo, dividida por corte pela mediana e depois refinada com k-médias ponderadas em CIE LAB, para que os grupos correspondam a como as pessoas agrupam cor e não a como um computador ordena números.
Áreas totalmente transparentes ficam de fora, então um logotipo sobre fundo transparente devolve as cores do logotipo e não uma fatia enorme de nada.
Cada clique deixa um marcador numerado sobre a imagem. Renomeie, reordene, descarte os que não quiser. A ordem em que você os deixa é a ordem em que saem na exportação, e os nomes viram os nomes de variável.
Os marcadores pertencem à imagem. Carregar outra apaga todos, então exporte antes se quiser guardá-los.
Seis esquemas construídos girando o matiz da cor escolhida. A rotação acontece em OKLCH, e não em HSL, o que importa mais do que parece: gire em HSL e os amarelos ficam sujos e os azuis, berrantes, porque passos iguais em HSL não são passos iguais para o olho.
Escolha algo quase cinza e todos os esquemas se reduzem ao mesmo tom. O painel avisa isso em vez de disfarçar.
Tons claros rumo ao branco, tons escuros rumo ao preto e tons apagados rumo ao cinza, com dez passos cada. A quarta opção é a que você quer para uma interface: uma escala de 50 a 950 com luminosidades perceptuais fixas, que é o formato que um design system espera.
Veja todas as variações de uma cor na página de cor, onde estas mesmas escalas têm mais espaço.
Passar o cursor pela imagem atualiza a amostra e as nove notações em tempo real; as harmonias e as escalas esperam você clicar, para não ficarem piscando entre mil valores enquanto você move o mouse. Para ir além com uma cor (34 formatos, contraste, daltonismo, gráfico de gama), cole-a no seletor de cores.
Tudo o que você vê pode ser exportado. Escolha o quê e em que formato.
Minhas cores
Os marcadores que você colocou, na sua ordem e com os seus nomes.
Paleta da imagem
As cores dominantes que o extrator encontrou.
Harmonia atual
Todas as cores dos seis esquemas.
Escala atual
A escala que você tiver aberta.
Copie ou baixe. Não há exportação em imagem; o mais próximo disso é a folha de amostras em SVG, que continua editável.
Cada cor que você confirma é escrita na barra de endereços. Salve nos favoritos, mande para alguém ou cole num chamado, e ela abre exatamente naquela cor. Nada mais da sua sessão viaja junto.
As últimas 24 cores que você pegou ficam guardadas no seu próprio dispositivo e continuam lá amanhã. Elas nunca saem dele, e basta um botão para apagá-las.
Quatro motivos comuns para abrir um seletor de cores, com o percurso completo pelas duas ferramentas.
Todas as mensagens que o seletor pode mostrar, o que significam e o que fazer em seguida.
Essa imagem é grande demais.Tente uma com menos de 40 MB.
O limite é de tamanho de arquivo, não de dimensões. Uma fotografia grande não é problema; uma exportação em camadas de 60 MB é. Salve uma cópia achatada.
Esse arquivo não é uma imagem.PNG, JPEG, WebP, AVIF, GIF, BMP e SVG funcionam todos.
Normalmente é um PDF, um arquivo de design ou um ZIP. Primeiro, exporte a partir dele uma imagem bitmap ou vetorial.
Essa imagem não tem tamanho fixo.Arquivos vetoriais precisam de largura e altura para serem amostrados.
Um SVG sem largura e altura no elemento raiz não tem resolução natural para amostrar. Acrescente-as, ou abra e exporte um PNG.
Não foi possível baixar essa imagem.O site que a hospeda impede que outros sites leiam as imagens dele. Baixe o arquivo e solte aqui.
É uma regra do navegador, e nenhuma página web consegue contorná-la. Baixe o arquivo e solte aqui.
Só são aceitas URLs de imagem http e https.
Você colou algo que não é um endereço web, ou uma URL data: ou file:. Para um arquivo local, use o botão Escolher imagem.
Seu navegador bloqueou o acesso à área de transferência
Copiar precisa de permissão, e alguns navegadores a retêm em janelas privativas ou quando a página está sem foco. Clique na página e tente de novo, ou selecione o valor e copie à mão.
O atalho de colar é ignorado enquanto o cursor está dentro de um campo de texto, para que colar um link no campo de URL não tente também carregar a área de transferência como imagem. Clique em qualquer parte vazia da página e cole em seguida.
Não. O zoom e o deslocamento afetam só o canvas que você vê. Toda leitura é feita num segundo canvas, oculto, mantido na resolução original da imagem, então o mesmo pixel devolve o mesmo valor a 100% e a 6.400%. Use o zoom só para enxergar em qual pixel vai clicar.
Comece em 1 px. Aumente só quando os pixels ao redor do cursor forem todos da mesma superfície, mas com ruído, que é onde a média mais ajuda: numa área com ruído, 11 × 11 ficou a 0,57 da cor verdadeira, enquanto 1 px ficou a 6,45. Perto de qualquer borda, faça o contrário e fique em 1 px, porque ali uma amostra maior mistura os dois lados e devolve uma cor que não existe em nenhum deles.
Quase sempre uma de três coisas. Você clicou a poucos pixels de uma borda, onde a compressão borrou as duas cores; medido numa borda nítida, o primeiro pixel do outro lado erra por 19,04 e leva 3 pixels para se recuperar. Ou você clicou numa borda suavizada, que é uma mistura da forma com o que está atrás e não existe em nenhum arquivo de design. Ou a imagem é um print de um print. Dê zoom, mova alguns pixels para dentro da forma e escolha de novo.
Clique uma vez na imagem para dar foco a ela e use as setas. Cada toque na tecla move o cursor um pixel, e Shift com uma seta move dez. Pressione Enter para fixar a cor que está sob o cursor.
O site que hospeda aquela imagem não permite que outros sites leiam os pixels dela. Os navegadores impõem isso e não há como contornar a partir de uma página web, e por isso a ferramenta avisa com clareza em vez de falhar em silêncio. Baixe a imagem e solte o arquivo aqui.
Sua cor atual sim, porque ela vive na barra de endereços e você pode salvar ou compartilhar esse link. As cores usadas recentemente ficam no seu próprio dispositivo e também sobrevivem. Os marcadores sobre a imagem não sobrevivem a um recarregamento, e carregar uma nova imagem também apaga todos, então exporte ou copie o que quiser guardar antes de seguir.
Abra o PDF, dê zoom até a cor ocupar boa parte da tela, tire um print e cole aqui com Ctrl + V (Cmd + V no Mac). Depois clique no pixel. Um print em PNG mantém as cores como a sua tela mostra, que é o que você precisa para trabalho na web.
Abra esta página no navegador do celular, toque em Escolher imagem para pegar uma foto da galeria ou tirar uma nova, depois faça o movimento de pinça para ampliar e toque no pixel que quiser. Os códigos aparecem abaixo da imagem, e cada um pode ser copiado com um toque.
Abra o conta-gotas e teste na foto de exemplo. Nada do que você carregar sai do seu dispositivo, e não é preciso fazer cadastro.
