HELMLAB: An Analytical, Data-Driven Color Space for Perceptual Distance in UI Design Systems

O artigo apresenta o HELMLAB, um espaço de cor analítico e orientado por dados com 72 parâmetros projetado para sistemas de design de interface, que supera o CIEDE2000 na precisão da distância perceptual ao incorporar correções de Fourier, ajustes Helmholtz-Kohlrausch e neutralidade garantida, oferecendo também utilitários para mapeamento de gamut e adaptação a temas claros e escuros.

O essencial

Imagine que você é um designer de aplicativos ou sites. Você precisa escolher cores que não apenas sejam bonitas, mas que funcionem bem juntas: que tenham o contraste certo para serem lidas, que mudem de cor de forma suave (como um degradê do azul para o ciano) e que o cinza pareça realmente cinza, sem um toque esverdeado ou rosado indesejado.

Por anos, os designers usaram uma "régua" antiga e um pouco defeituosa chamada CIEDE2000 para medir a diferença entre cores. Ela funciona, mas é como tentar medir a distância entre duas cidades usando um mapa desenhado à mão em 1970: às vezes funciona, às vezes erra feio, especialmente em cores específicas como o azul.

Aqui entra o HELMLAB, o novo "sistema de navegação" criado por Görkem Yıldız. Vamos explicar como ele funciona usando analogias do dia a dia.

1. O Problema: A Régua Quebrada

Imagine que você tem uma caixa de lápis de cor. Se você pedir para alguém misturar dois lápis azuis para criar um degradê perfeito, a régua antiga (CIEDE2000) às vezes diz que a mistura está boa, mas seus olhos veem uma mancha estranha ou um "salto" brusco de cor. Isso acontece porque a régua antiga não foi feita pensando em como nossos olhos realmente funcionam hoje em dia, especialmente em telas de celulares e computadores.

2. A Solução: O HELMLAB (O GPS de Precisão)

O HELMLAB é como um GPS de alta tecnologia para cores. Em vez de usar uma régua fixa, ele usa um sistema inteligente com 72 "botões de ajuste" (parâmetros) que foram aprendidos por uma inteligência artificial analisando milhares de testes feitos por humanos reais.

Aqui está como ele faz a mágica, passo a passo:

• O Tradutor (Transformação): Primeiro, ele pega a cor bruta (que o computador entende) e a traduz para uma linguagem que o cérebro humano entende melhor. É como traduzir um livro de um idioma técnico para uma história emocionante.
• O Ajuste de Brilho (Helmholtz-Kohlrausch): Você já notou que uma cor vermelha vibrante parece mais "brilhante" do que um cinza da mesma intensidade de luz? O HELMLAB entende isso. Ele ajusta o brilho da cor dependendo de quão saturada ela é, igualando a percepção humana.
• O "Limpa-Cinza" (Correção Neutra): Este é um dos maiores trunfos. Em outros sistemas, se você tenta criar uma escala de cinzas (do preto ao branco), às vezes o cinza fica levemente azulado ou amarelado. O HELMLAB tem um "filtro de limpeza" que garante que, se a cor for cinza, ela seja perfeitamente cinza (zero cor). Isso é essencial para criar gradientes suaves e profissionais.
• O Giro da Bússola (Rotação Rígida): Imagine que a bússola das cores estava um pouco torta. O HELMLAB gira o mapa inteiro levemente para que as cores primárias (Vermelho, Verde, Azul) fiquem exatamente onde esperamos que estejam, sem estragar a medição de distância entre elas.

3. O Resultado: Menos Erros, Mais Beleza

O teste principal foi feito em um conjunto de dados gigante chamado COMBVD (mais de 3.800 pares de cores comparados por humanos).

• A Régua Antiga (CIEDE2000): Teve um "estresse" (erro) de 29,18.
• O HELMLAB: Teve um erro de apenas 23,30.

Isso significa que o HELMLAB é 20% mais preciso do que o padrão atual. É como trocar um mapa de papel por um GPS em tempo real: você chega ao destino com muito mais certeza e menos desvios.

4. O "Pulo do Gato" Azul

Durante o desenvolvimento, os criadores notaram que, na região entre o azul e o ciano, as cores ficavam um pouco "tortas" ao criar degradês. Para consertar isso, eles aplicaram um ajuste fino específico nessa área.

• O Custo: O erro geral aumentou apenas um pouquinho (0,08 pontos).
• O Ganho: A uniformidade do degradê azul melhorou em 8,9 vezes.
  É como afinar um violão: você ajusta uma corda para que o som fique perfeito, mesmo que isso exija um ajuste minúsculo em outra parte do instrumento.

5. Por que isso importa para você?

Se você usa um aplicativo ou site, o HELMLAB garante que:

1. Os textos sejam legíveis: O contraste entre o fundo e a letra será calculado com precisão cirúrgica.
2. Os degradês sejam suaves: Não haverá "saltos" visíveis quando você mudar de uma cor para outra.
3. O Modo Escuro funcione bem: O sistema já está preparado para adaptar as cores automaticamente quando você muda do modo claro para o escuro, mantendo a harmonia.

Resumo em uma frase

O HELMLAB é um novo sistema de cores que usa inteligência artificial e matemática avançada para garantir que as cores que você vê na tela sejam exatamente o que seus olhos esperam ver, eliminando erros antigos e tornando o design de interfaces mais bonito, acessível e preciso.

É como se, pela primeira vez, tivéssemos encontrado a "receita perfeita" para misturar cores que funciona tanto para o computador quanto para o olho humano.

Resumo técnico

Resumo Técnico: HELMLAB

1. O Problema

Os sistemas de design de interface (UI) exigem um espaço de cor que satisfaça simultaneamente três requisitos críticos, os quais nenhum espaço de cor existente atende perfeitamente:

1. Precisão na Predição de Diferença de Cor: Necessária para verificações de contraste e acessibilidade.
2. Eixo Achromático Puro: Cores neutras (cinzas) devem mapear para crominância zero ($a=b=0$) para permitir interpolação de gradientes sem artefatos de cor.
3. Alinhamento de Ângulo de Matiz (Hue): Primárias e secundárias devem estar alinhadas com ângulos de matiz convencionais para manipulação programática.

Espaços existentes apresentam falhas específicas:

• CIE Lab / CIEDE2000: Padrão-ouro para diferença de cor, mas sofrem de vazamento de crominância em cinzas e não são otimizados para uniformidade perceptual em gradientes de UI.
• Oklab: Simples e nativo do CSS, mas otimizado para uniformidade de matiz, não para predição de diferença de cor (alto erro STRESS).
• CAM16-UCS: Baseado em modelos de aparência, mas computacionalmente caro e com vazamento de crominância em cinzas.
• IPT / Jzazbz: Otimizados para linearidade de matiz ou HDR, mas complexos ou com precisão de luminosidade inadequada para UI.

Nenhum desses espaços otimiza a transformação de cor e a métrica de distância de forma conjunta (end-to-end) contra dados psicofísicos.

2. Metodologia

O HELMLAB é um espaço de cor analítico com 72 parâmetros aprendíveis, tratado como um único sistema otimizado contra o maior conjunto de dados de diferença de cor disponível (COMBVD).

A Transformação Forward (11 Estágios)

O mapeamento de CIE XYZ (D65) para HELMLAB Lab ocorre através de uma pipeline de 11 estágios:

1. Resposta de Cone (9 parâmetros): Uma matriz $3\times3$aprendida ($M_1$) mapeia XYZ para sinais semelhantes à resposta de cone, substituindo matrizes fixas (como Bradford).
2. Compressão de Potência (3 parâmetros): Compressão de potência com sinal em cada canal ($\gamma_i$), generalizando a raiz cúbica do CIE Lab. Os valores otimizados (~0.4) situam-se entre a raiz cúbica e a raiz quadrada.
3. Projeção Lab (9 parâmetros): Uma segunda matriz ($M_2$) projeta os sinais comprimidos em canais oponentes ($L, a, b$).
4. Correção de Matiz (8 parâmetros): Uma rotação de Fourier harmônica (4 harmônicos) corrige distorções sistemáticas de matiz, redistribuindo os ângulos sem alterar a crominância.
5. Incorporação Helmholtz–Kohlrausch (6 parâmetros): A luminosidade ($L$) é explicitamente dependente da crominância ($C$), incorporando o efeito onde cores saturadas parecem mais brilhantes.
6. Refinamento de Luminosidade (8 parâmetros): Um polinômio cúbico com termos dependentes de matiz e compressão exponencial para regiões escuras, tratando a interação entre luminosidade e matiz (ex: ciano escuro vs. ciano médio).
7. Processamento de Crominância (18 parâmetros): Realizado em quatro sub-estágios intercalados: escalonamento dependente de matiz, potência não linear de crominância, escalonamento dependente de $L$ e interação matiz$\times$luminosidade.
8. Luminosidade Dependente de Matiz (4 parâmetros): Correção final para interações residuais.
9. Correção Neutra (Neutral Correction): Um estágio crucial que calcula o erro do eixo acromático em 256 níveis de cinza e aplica uma correção via interpolação PCHIP. Isso garante que cinzas reais mapeiem para $a=b=0$ (crominância $< 10^{-6}$), permitindo gradientes limpos.
10. Rotação Rígida (1 parâmetro): Uma rotação de $-28.2^\circ$ no plano $(a,b)$ para alinhar primárias de sRGB com ângulos de matiz convencionais. Como é uma isometria, não altera a métrica de distância.

Métrica de Distância

A métrica de distância não é puramente euclidiana. Ela utiliza:

• Ponderação dependente do par para luminosidade ($S_L$) e crominância ($S_C$).
• Um expoente de Minkowski ($p=0.804$) que favorece ligeiramente diferenças de crominância.
• Compressão monótona e pós-potência para reduzir viés sistemático em grandes diferenças.

Otimização

Os 72 parâmetros são otimizados conjuntamente minimizando uma função de perda que combina:

• STRESS no conjunto COMBVD (3.813 pares).
• Regularização leve no conjunto He et al. 2022.
• Penalidade de Banda Azul: Uma contribuição específica introduzida na versão 2 para reduzir a não uniformidade de gradientes na região azul-ciano.
• Restrições de precisão de ida-e-volta (round-trip) e integridade acromática.

3. Principais Contribuições

1. Novo Espaço de Cor: HELMLAB com 72 parâmetros, alcançando um STRESS de 23,30 no conjunto COMBVD, uma redução de 20,2% em relação ao CIEDE2000 (29,18).
2. Correção Neutra Garantida: Um mecanismo que assegura crominância $< 10^{-6}$ para cores acromáticas, resolvendo o problema de "vazamento" de cor em gradientes cinzas, com custo mínimo de STRESS (+0,04).
3. Alinhamento de Matiz sem Custo: Uma rotação rígida que reduz o erro de matiz (RMS 18,1°) sem afetar a métrica de distância (devido à invariância da métrica sob isometrias).
4. Correção Helmholtz–Kohlrausch Embutida: A luminosidade depende da crominância, aprendida diretamente dos dados, ao contrário de espaços onde são tratadas como independentes.
5. Refit da Banda Azul: Uma penalidade de subconjunto que reduz a não uniformidade de gradientes na região azul-ciano em 8,9x, melhorando a performance em 5 dos 6 subconjuntos do COMBVD.
6. Utilitários para Design Systems: Inclui mapeamento de gamut, exportação de tokens (CSS, Android, iOS) e adaptação para modos claro/escuro.

4. Resultados e Avaliação

Precisão de Diferença de Cor

• COMBVD: HELMLAB (23,30) supera significativamente CIEDE2000 (29,18), CIE94 (33,59) e Oklab (47,46). O intervalo de confiança de 95% não se sobrepõe ao do CIEDE2000 ($p < 10^{-4}$).
• Validação Cruzada:
  • No conjunto He et al. 2022: HELMLAB (30,3) supera CIEDE2000 (32,6).
  • No conjunto MacAdam 1974 (totalmente retido): HELMLAB (20,3) fica atrás do CAM16-UCS (18,7), mas ainda é competitivo, demonstrando generalização razoável.

Propriedades de Geração

• Integridade Acromática: Garante $C < 10^{-6}$ para cinzas, eliminando artefatos de cor em rampas de luminosidade (comparado a vazamento de 1,42 no CAM16-UCS).
• Precisão de Ida-e-Volta: Erros de reconversão (sRGB $\to$ Lab $\to$ sRGB) abaixo de $10^{-14}$.
• Uniformidade Munsell: Coeficiente de variação (CV) de 20,0%.

Análise de Componentes (Ablation Study)

• A correção de matiz é o componente mais crítico (melhoria de +15,5 pontos de STRESS se removida).
• A incorporação H-K contribui com +4,0 pontos.
• A métrica de distância completa (não apenas euclidiana) contribui com mais 4,3 pontos de melhoria sobre a transformação espacial pura.

5. Significado e Impacto

O HELMLAB representa um avanço significativo para sistemas de design de UI ao resolver o dilema entre medição (precisão de diferença de cor) e geração (utilidade para gradientes e paletas).

• Usabilidade Prática: A correção neutra permite que designers criem gradientes e escalas semânticas (ex: Tailwind 50-950) sem introduzir cores indesejadas, algo impossível em espaços como CAM16-UCS ou CIE Lab sem correções manuais complexas.
• Otimização End-to-End: Demonstra que tratar a transformação de cor e a métrica de distância como um sistema único, aprendido a partir de dados psicofísicos massivos, supera abordagens baseadas em modelos teóricos fixos.
• Adoção em UI: Com utilitários prontos para exportação de tokens e suporte a gamuts modernos (sRGB, Display P3), HELMLAB está posicionado para substituir espaços tradicionais em bibliotecas de design modernas e ferramentas de desenvolvimento frontend.

O código, parâmetros treinados e demonstrações interativas estão disponíveis publicamente, facilitando a adoção imediata pela comunidade de design e engenharia.