Teoria das cores na prática para interfaces
Comece com uma cor base, escolha uma harmonia, verifique o contraste e exporte os tokens. Este guia explica decisões úteis no trabalho com interfaces reais.
Regras de harmonia
Cada harmonia organiza os matizes de uma forma diferente e pode apoiar diferentes composições de interface.
- Complementar — matizes opostos no círculo cromático. Podem destacar ações e estados de alerta. Ajuste a intensidade e verifique o contraste real entre texto e fundo.
- Análoga — matizes vizinhos. Uma base coesa para interfaces com muito conteúdo, ajustando a luminosidade para manter a legibilidade.
- Triádica — três matizes igualmente espaçados. Oferece variedade; use hierarquia e reserve os destaques mais fortes para funções claras.
- Complementar dividida — uma cor base e duas cores vizinhas à sua complementar. Oferece variação com uma relação diferente de tensão entre os matizes.
- Monocromática — um matiz com diferentes níveis de luminosidade e saturação. Pode ajudar a manter a consistência em interfaces com muitos dados.
Use os tons conforme sua função
Os números de 50 a 950 identificam tons, sem determinar funções fixas na interface.
- Use
500apenas se esse tom servir ao projeto; a cor original fica na posição marcada, que nem sempre é 500. - Use
600e700como candidatos a estados de interação, depois de verificar o contraste. - Use
50e100como candidatos a fundos e superfícies, conferindo o contraste do texto. - Use
800e900quando o projeto precisar de texto escuro com parte do matiz da marca, após testar a combinação real.
Contraste WCAG na prática
Confira o contraste do texto sobre o fundo em que será exibido.
- O nível AA exige 4,5:1 para texto de tamanho normal, salvo as exceções previstas no critério.
- Texto grande, a partir de 18 pt ou 14 pt em negrito, precisa de 3:1 no nível AA.
- O nível AAA exige 7:1 para texto normal. Confira quais requisitos de conformidade se aplicam ao seu projeto.
- Elementos decorativos, controles desativados e logotipos têm exceções nos requisitos de contraste.
- A informação visual necessária para identificar controles ativos e gráficos significativos geralmente precisa de 3:1 em relação às cores adjacentes.
Por qual harmonia começar em um produto SaaS?
Análoga ou monocromática pode ser um bom ponto de partida. Use uma cor complementar para destacar ações quando necessário e confira cada par de texto e fundo.
Quantas cores com nome um sistema de design deve ter?
Comece com uma escala principal, uma escala neutra e cores semânticas conforme os estados necessários. Acrescente outras cores quando houver uma função clara e documente seu uso.
Por que a paleta parece legível no Figma, mas não atende ao contraste?
A aparência depende da tela, do zoom e da renderização do texto. O contraste é calculado a partir dos valores de cor. Uma combinação que parece legível com zoom alto pode funcionar mal no tamanho real do texto.
OKLCH é melhor que HSL para gerar paletas?
OKLCH ajuda a controlar a luminosidade percebida e o croma. No Chromoforge, as harmonias usam relações HSL e as escalas de tons usam OKLCH, com conversão e recorte para sRGB. O inspetor mostra também o valor OKLCH de cada cor.