Espaços perceptuais
OKLCH, Oklab, CIELAB, sRGB linear, HSL e HSV, com conversão nos dois sentidos.
colorust
Um motor de cor que mede contraste e exporta tokens
Escrito em Rust, compilado para WebAssembly, com uma porta em TypeScript que assume quando o WebAssembly não está disponível. Um teste compara as duas e reprova se elas discordarem.
O problema
Escolher cor de interface tem uma pergunta fácil e duas difíceis. A fácil é se ficou bonito. As difíceis são se o texto continua legível sobre aquela cor, e se a paleta ainda funciona para quem enxerga cor de outro jeito.
Boa parte das ferramentas responde a primeira e estima as outras duas, porque mede em espaço de cor que não corresponde ao que o olho percebe. Aqui a conta é feita em OKLCH, e as três perguntas têm resposta medida.
O que está implementado
Dois padrões de contraste
WCAG 2.1 com os portões AA, AA grande e AAA, e o APCA do WCAG 3.0 com os expoentes por polaridade e os cinco limiares de Lc.
Daltonismo
Simulação de protanopia, deuteranopia, tritanopia e acromatopsia, com grau ajustável, mais auditoria de contraste sob cada uma.
Gamut
sRGB, Display P3 e Rec. 2020, com busca do cusp e mapeamento por busca binária que informa quantos passos levou.
Cor dominante de imagem
k-means em Oklab, não em RGB, então os grupos seguem diferença percebida. Roda na própria página e nenhuma imagem sai do navegador.
Exportador de tokens
CSS, SCSS, Tailwind v3 e v4, Figma Tokens, Style Dictionary, SwiftUI e Android XML.
Auditor de páginas
Um crawler em Bun e Playwright que percorre o DOM renderizado e resolve o fundo efetivo compondo os ancestrais transparentes antes de medir.
Como conferir
O código
Licença MIT, quatro pacotes: o motor em Rust, os bindings WebAssembly, o crawler e o estúdio.
Os testes
cargo test roda 29 testes de integração sobre conversão, contraste, harmonia, gamut e quantização.
- 29 de 29 passam
O teste diferencial
A mesma matemática existe em Rust e em TypeScript. Um teste roda as duas sobre as mesmas entradas e compara cada campo de cada resultado.
- 11 funções comparadas
Os números acima valem para o commit que está no ar nesta página, e saem de comandos, não de estimativa.
Perguntas
Preciso instalar alguma coisa para usar?
Não. A ferramenta roda inteira no navegador, e a imagem que você usar para extrair paleta não sai do seu computador: a leitura de pixels acontece na própria página.
Existe linha de comando?
Existe, no pacote em Rust, com cinco comandos: audit para contraste entre duas cores, harmony para gerar paleta a partir de uma, tokens para exportar nos oito formatos, gamut para saber se uma cor cabe em sRGB, Display P3 ou Rec. 2020, e convert para ver a mesma cor em todos os espaços.
Por que a mesma matemática existe duas vezes?
O Rust é a implementação de referência: é onde estão os testes, os benchmarks e a linha de comando. A porta em TypeScript existe para o navegador funcionar mesmo sem o WebAssembly carregado. Duas implementações só são intercambiáveis enquanto concordam, então há um teste que roda as duas e compara os resultados campo a campo.
O que o auditor de páginas faz que uma extensão de navegador não faz?
Ele resolve o fundo efetivo. Um elemento com fundo semitransparente sobre outro semitransparente não tem a cor que o CSS declara, e é aí que auditor ingênuo erra. O crawler sobe a árvore de ancestrais compondo as camadas até chegar em opacidade cheia, e só então mede.
Dá para usar num projeto meu?
Dá, é MIT. O exportador cospe tokens prontos para CSS, Tailwind, Figma, SwiftUI e Android, então o caminho mais curto é gerar a paleta aqui e levar o arquivo.
Abrir a ferramenta
Roda no navegador, com o motor em WebAssembly quando ele está disponível.