Paleta de Cores

Atualização: veja também as diferenças entre LCH e OKLCH. O segundo modelo é uma atualização do modelo anterior que corrige uma variação no Hue da cor azul.

A criação de paletas de cores para interfaces modernas evoluiu além da simples escolha estética. Para construir sistemas de design (Design Systems) escaláveis e acessíveis, é fundamental compreender espaços de cores perceptuais, a hierarquia de tokens e as novas métricas de acessibilidade. Este guia detalha os pilares para estruturar paletas de alta performance.

1. Espaços de Cores: HSL vs. LCH

A forma como as telas interpretam e exibem cores impacta diretamente a percepção do usuário.

HSL (Hue, Saturation, Lightness): É um modelo comum onde se adiciona preto ou branco à cor pura para variar o brilho. No entanto, a transição entre cores pode parecer ríspida e menos natural.

LCH (Lightness, Chroma, Hue): Este espaço de cores é projetado para ser perceptual, ou seja, mais próximo da forma como o olho humano percebe a luz e a cor no mundo real.

• Vantagens: Transições mais suaves, cores mais ricas e uniformidade visual.

• Desafios: Atualmente, a maioria das ferramentas de design, como o Figma, não suporta LCH nativamente, exigindo o uso de conversores para Hexadecimal. No entanto, navegadores já oferecem suporte a valores LCH desde 2023.

2. Arquitetura de Cores: Primitivas e Semânticas

Uma estrutura eficiente de Design System separa a aparência da função por meio de tokens de cores.

Cores Primitivas

São as cores em seu formato mais básico e bruto, geralmente nomeadas pela sua aparência (ex: Red 600, Blue 500). Elas servem como a "biblioteca de recursos" do sistema, representando a paleta completa disponível.

Cores Semânticas

Em vez de descrever a cor, os nomes semânticos descrevem a função da cor na interface (ex: Error, Success, Favorite).

Vantagem de Manutenção

Ao usar cores semânticas, um token como Error "bebe" da variável primitiva Red 600. Se você precisar alterar o tom de vermelho de todo o sistema, basta mudar a primitiva, e todas as instâncias semânticas serão atualizadas automaticamente.

3. Acessibilidade: Além do WCAG

Garantir o contraste adequado é um pilar do design inclusivo.

WCAG (Web Content Accessibility Guidelines): O padrão tradicional que foca na relação de contraste entre duas cores (ex: 4.5:1 para passar em AA).

APCA (Accessible Perceptual Contrast Algorithm): Uma evolução mais robusta que, além da cor, considera o tamanho e o peso da fonte para determinar a legibilidade. O APCA permite mais flexibilidade, ajustando a necessidade de peso visual conforme a composição cromática.

4. Implementação Prática no Figma

Para organizar cores de forma profissional, recomenda-se o uso de Local Variables.

1. Criação de Coleções: Organize suas variáveis em coleções distintas, como "Primitives" e "Colors" (Semânticas).

2. Agrupamento: Utilize barras (ex: Colors/Slate/) para criar pastas e manter o painel organizado.

3. Uso de Plugins: Ferramentas como o Color Variables Creator podem acelerar o processo de criação de variáveis em massa a partir de layers renomeadas.

4. Tematização (Modos): O uso de variáveis permite a criação de modos Light e Dark. Ao definir que um token semântico tem um valor para o modo claro e outro para o escuro, a interface inteira pode ser alternada automaticamente.
   
   

5. Conclusão

Dominar a transição entre cores primitivas e semânticas, aliada à compreensão de espaços perceptuais como o LCH, é o que separa um layout simples de um Design System profissional. Ao aplicar essas técnicas, o designer garante não apenas beleza, mas consistência, facilidade de manutenção e acessibilidade para o produto final.