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.