Eyedropper (Conta-gotas) da Tela
Explica como usar a API EyeDropper do navegador para coletar uma cor de qualquer ponto da tela.
Copiado!
Clique num campo de saída para copiar. O conta-gotas exige Chrome/Edge 95+; o campo HEX funciona em qualquer navegador.
O navegador (Chromium 95+) oferece a API EyeDropper:
const ed = new EyeDropper();\nconst r = await ed.open();\nconsole.log(r.sRGBHex); // ex: "#3b82f6"O usuário precisa permitir e clicar em algum ponto da tela. Não funciona em Safari e Firefox no momento.
Capturar a cor de qualquer pixel da tela
Voce viu uma cor num PDF, num frame de video pausado ou num programa que nem esta no navegador, e precisa do codigo HEX para reproduzir. O caminho classico e dar print, abrir num editor de imagem e usar o conta-gotas de la, o que consome uns bons minutos por cor. Existe um atalho embutido no proprio navegador.
O botao de captura chama a API EyeDropper: o cursor vira uma mira, voce clica em qualquer ponto da tela e o navegador devolve o HEX daquele pixel. A pagina entao preenche a amostra colorida e converte o valor para RGB e HSL nos tres campos de saida. Tem tambem o caminho manual: digitar o HEX direto no campo aceita tanto a forma curta de tres digitos quanto a de seis, e faz a mesma conversao.
A API existe no Chrome e no Edge a partir da versao 95 e nos navegadores derivados do Chromium. Firefox e Safari nao a implementam, e nesse caso a pagina mostra um aviso amarelo e voce continua podendo digitar o HEX na mao. Clicar em qualquer campo de saida copia o valor para a area de transferencia. A leitura e de um pixel so, entao em foto com compressao JPEG ou ruido a cor varia de pixel para pixel: clique numa area chapada. Nada sai da sua maquina.
Perguntas frequentes
Funciona no Firefox ou no Safari?
Consigo pegar cor fora da janela do navegador?
Ele calcula a media de uma area?
Ferramentas Relacionadas
Seletor de Cor
Escolha uma cor e obtenha os valores em HEX, RGB e HSL com um clique para copiar.
Rateio de Conta com Itens
Cada pessoa indica os pratos consumidos; o sistema soma os valores, aplica taxa de serviço proporcional e mostra quanto cada um paga.
Verificador de Contraste (WCAG)
Verifique o contraste entre cor de texto e fundo conforme as diretrizes WCAG 2.1. Exibe a proporção e os níveis AA e AAA para texto normal e grande.
Tela em Branco
Tela totalmente branca para projetar, limpar a tela ou usar como fundo de foco. Suporta modo escuro.
Simulador de Daltonismo
Veja como uma imagem aparece para pessoas com protanopia, deuteranopia, tritanopia ou acromatopsia. Ferramenta de acessibilidade para designers e desenvolvedores.
Gerador de Tons de Cor
Gere tons (shades) e matizes (tints) de qualquer cor. Clique para copiar o código HEX, RGB ou HSL. Ideal para sistemas de design.