Pegar cor de imagem (conta-gotas)
Para pegar cor de imagem, carregue uma imagem pela seleção de arquivo, arrastando e soltando ou com Ctrl + V e clique ou toque no ponto desejado. O conta-gotas mostra a cor do pixel em HEX, RGB e HSL e identifica as cores principais da imagem. A imagem não é enviada a nenhum servidor.
Fonte: MDN Web Docs – CanvasRenderingContext2D: getImageData(). Atualizado em: .
Como o cálculo é feito
Sua imagem fica no seu aparelho
O conta-gotas funciona inteiramente no seu navegador: a imagem é decodificada localmente e desenhada numa área de desenho (canvas), e a cor é lida com getImageData() direto da memória. Não há upload nem nenhuma requisição de rede com dados da imagem; ao fechar a página, a imagem some. Só para fotos HEIC que o seu navegador não consegue abrir sozinho é baixado uma única vez um decodificador deste site, e mesmo assim a sua foto continua local.
Como ler uma cor
- Escolha a imagem, arraste-a para o campo ou cole com Ctrl + V (por exemplo, uma captura de tela).
- Clique ou toque no ponto desejado. Pelo teclado, as setas movem o conta-gotas pixel a pixel.
- Copie o valor HEX, RGB ou HSL. As oito últimas cores escolhidas ficam guardadas como amostras.
Como as cores principais são obtidas
Para as cores principais, a imagem é reduzida para no máximo 200 pixels no lado maior. Cada pixel opaco cai em uma de 4.096 faixas de cor (16 níveis por canal). As faixas mais frequentes e bem diferentes entre si viram até seis cores principais; a porcentagem é a proporção delas entre todos os pixels opacos. É uma quantização simples: boa para ter uma visão geral, mas não é uma medição de cor.
Por que o valor pode diferir do original
- Perfis de cor: os navegadores convertem imagens com perfil embutido (ex.: Display P3 do celular) para sRGB. O conta-gotas mostra o valor sRGB, o mesmo que você usaria no CSS; um editor de imagens no modo P3 mostra outros números.
- Compressão: JPEG e WebP armazenam as cores com perda; pixels vizinhos de uma área “lisa” podem diferir em alguns níveis.
- Imagens muito grandes (acima de 4.096 pixels no lado maior) são reduzidas para a leitura, e pixels vizinhos são mesclados. A posição exibida se refere à imagem original.
Próximos passos: converta valores com o conversor de cores, encontre cores que combinam com o gerador de paleta de cores e confira a legibilidade com o verificador de contraste.
Perguntas frequentes
Minha imagem é enviada ou salva?
Não. A imagem é processada só na memória do seu navegador e não é enviada para lugar nenhum. Também nada é gravado no armazenamento do navegador (localStorage).
Como descubro o código de cor de uma captura de tela?
Faça a captura (ex.: no Windows, Win + Shift + S), clique nesta página e pressione Ctrl + V. Depois, clique no ponto: o código HEX aparece na hora.
Quais formatos de imagem funcionam?
JPG, PNG, WebP, GIF, BMP e AVIF, desde que o seu navegador consiga abri-los, além de fotos HEIC do iPhone. Em imagens com transparência, o conta-gotas mostra também a opacidade do pixel.
Posso reutilizar a cor?
Sim: copie o valor HEX e converta para outros formatos no conversor de cores, gere cores que combinam no gerador de paleta de cores ou verifique no verificador de contraste se um texto nessa cor fica legível.
Qual a diferença entre HEX, RGB e HSL?
Os três descrevem a mesma cor: RGB como vermelho, verde e azul de 0 a 255, HEX com os mesmos valores em hexadecimal (#FF0000 = 255, 0, 0) e HSL como matiz, saturação e luminosidade.
Fontes e base legal
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Conversor de cores: HEX, RGB, HSL, HSV, CMYKConverta cores: HEX para RGB, RGB para HEX, HSL, HSV, HWB e CMYK. Digite em qualquer formato ou use o seletor de cores e copie o resultado, tudo no navegador.
- Gerador de paleta de coresGere cores que combinam a partir de uma cor base: complementar, análoga, triádica, quadrado, complementar dividida ou monocromática, com HEX, RGB e HSL.
- Verificador de contraste de cores pelas WCAG 2.2Verifique o contraste entre cor do texto e do fundo: razão de contraste pelas WCAG 2.2, avaliação AA/AAA para texto normal e grande e elementos de interface.
- Calculadora de IMC segundo a OMSCalculadora de IMC: índice de massa corporal com altura e peso, classificação da OMS em escala de cores, faixa de peso normal para a sua altura e BMI Prime.
- Metrônomo onlineMetrônomo online grátis: 20–300 BPM, compassos de 2/4 a 12/8, acento por tempo, subdivisões e tap tempo. Precisão de amostra, sem aplicativo.
- Calculadora Wilks com pontos DOTS e IPF GLCalculadora Wilks para powerlifting: informe o peso corporal e o total e veja os pontos Wilks, DOTS e IPF GL lado a lado – clássico, equipado ou só supino.
- Calculadora percentil bebê: peso, comprimento e perímetro cefálicoCalculadora percentil bebê pela OMS: informe sexo, idade, peso, comprimento e perímetro cefálico e veja o percentil, o escore z e a faixa normal até 5 anos.
- Calculadora do peso da mochila escolarPeso mochila escolar: qual porcentagem do peso da criança é a mochila cheia e quanto ela pode pesar no máximo com 10 % e com 15 % do peso corporal.
- Vitamina D UI para mcgConverta vitamina D de UI para mcg e de volta: 1 mcg = 40 UI, então 1.000 UI = 25 mcg. Com a ingestão diária e os limites máximos por idade do MedlinePlus.