Por que este conta-gotas online existe

Os dois motivos que me fizeram criar esta ferramenta

Seletores de cores de imagem não faltam. A maioria cai em um de dois vícios irritantes.

O primeiro é enviar o seu arquivo. Você solta o print de uma página ainda não publicada num site e ele viaja até o servidor de alguém só para que um script leia um único pixel, coisa que o seu próprio navegador sabe fazer desde 2010. O arquivo é lido, talvez armazenado, talvez registrado em log, e você não tem como saber qual dessas coisas aconteceu.

O segundo é parar no código hexadecimal. Você queria a cor porque ia usá-la: colocar numa folha de estilo, montar uma escala em volta dela, verificar se texto branco fica legível em cima. Uma ferramenta que entrega #3F51B5 e um botão de copiar fez a parte fácil e deixou o resto do trabalho com você.

Esta ferramenta evita as duas coisas. O site é feito de páginas estáticas e de um pequeno script que lê pixels de um canvas na sua própria aba, então não há servidor para onde enviar nada. Um clique dá nove códigos de cor, uma paleta de oito cores com a fatia que cada cor ocupa, seis harmonias, uma escala de 50 a 950, os resultados de contraste WCAG e uma simulação de daltonismo.

Quem faz

Eu sou Md. Delwar Hossen. Desenvolvo aplicações web há mais de oito anos, boa parte desse tempo em ferramentas de produtividade numa consultoria de software. Hoje sou diretor de Sistemas Web e Digitais numa empresa americana, trabalhando remotamente. Você me encontra no LinkedIn.

Criei esta ferramenta porque precisava dela o tempo todo. Minha tarefa mais comum era refazer uma interface a partir de um print sem arquivo de design, e cada seletor que eu testava ou enviava o print para um servidor ou parava num código HEX. O guia prático leva o meu nome pelo mesmo motivo que esta página: se um número aqui estiver errado, você sabe a quem avisar.

Como é feito

Astro e Tailwind CSS, sem nenhum framework de interface. O seletor é TypeScript puro comandando dois canvas.

Usar dois canvas em vez de um é a decisão em que a precisão se apoia. O primeiro é o que você vê: redimensionado, deslocado, ampliado e redesenhado conforme você move o cursor. O segundo guarda a imagem no tamanho original, nunca é redimensionado e é o único que é medido. É essa separação que faz a cor capturada com zoom de 12× ser idêntica à capturada com a imagem ajustada à tela, e ela é coberta por um teste de ponta a ponta justamente por ser o tipo de coisa que quebra sem ninguém perceber.

Toda a matemática de cor fica numa única pasta, sem dependências em tempo de execução. As conversões vão e voltam sem perda para cada combinação sRGB de 8 bits, um espaço pequeno o bastante para ser verificado por inteiro, sem amostragem. A rotação de matiz e as escalas de luminosidade são calculadas em OKLCH, e não em HSL, porque o HSL não é perceptualmente uniforme: uma escala montada nele parece regular nos números e irregular aos olhos, com os amarelos desbotados e os azuis pesados.

Como as afirmações deste site são verificadas

Os números de precisão deste site são gerados por scripts. Veja como cada tipo de afirmação é verificado.

• A matemática de cor tem sua bateria de testes unitários. As conversões são verificadas de ida e volta, a implementação do CIEDE2000 é conferida com pares de referência e as afirmações sobre visão de cores são verificadas percorrendo o cubo RGB em vez de serem tomadas como certas.
• A promessa de privacidade é testada. Um script de ponta a ponta carrega a ferramenta real no Chromium sem interface, escolhe cores e falha se alguma requisição sair da página.
• Os números de precisão vêm de um script. Cada número de desvio do guia prático é produzido por um script que roda num navegador real, então a codificação e a decodificação JPEG são as do próprio navegador. Ele mede cada diferença com o mesmo código delta-E que a ferramenta usa. A paleta da página inicial é feita do mesmo jeito: o script roda o código de paleta da própria ferramenta sobre a foto de exemplo incluída.
• Conselhos desatualizados são detectados. Se uma nova medição contradiz o conselho escrito em volta dela, a verificação falha até o conselho ser reescrito.

Cada número medido no guia prático informa a data e o navegador em que foi medido.

O que ele não faz, de propósito

Estes são os limites conhecidos da ferramenta.

• O conta-gotas de tela usa uma API de navegador que só o Chromium implementou. No Firefox e no Safari o botão fica oculto em vez de aparecer e não funcionar.
• Não há exportação para PNG, JPEG nem paletas da Adobe. A folha de amostras em SVG é o mais próximo de uma imagem compartilhável de uma paleta.
• Não há gerenciamento de cor. Você recebe os bytes sRGB que um navegador pintaria, que é a resposta certa para a web e a errada se você estiver fazendo prova de cor num monitor calibrado.
• Não é um aplicativo instalável que funciona offline. Depois que a página carrega, ela não precisa de internet, mas não há service worker: se você abrir o site do zero sem conexão, ele não carrega.

Correções

Se tem algo errado aqui, prefiro corrigir a defender. Escreva para info@exacthex.com ou use a página de contato, que explica o que incluir para que um problema de cor possa ser reproduzido. Correções nos números medidos são especialmente bem-vindas: são as afirmações que mais me envergonharia ver erradas.