Saturação em design: quando aumentar ou baixar a cor

A saturação em design é a intensidade de uma cor: totalmente saturada é viva e pura, totalmente dessaturada é cinzenta. Aumenta-a onde queres atenção e energia, num botão, num preço de saldos ou num único realce. Baixa-a em áreas grandes, leitura longa, marcas premium e interfaces escuras, onde a cor viva rapidamente cansa. A maioria das boas paletas mistura as duas de propósito: uma base calma de saturação mais baixa com uma ou duas notas saturadas.

O que é a saturação e o que não é

Qualquer cor pode descrever-se por três propriedades: tom (que cor é), luminosidade (quão perto do branco ou do preto) e saturação (quão pura ou acinzentada). Muda só a saturação e um vermelho cereja desliza para um rosa empoeirado e depois para cinzento, sem ficar mais claro nem mais escuro. Tom, saturação e brilho explica como os três se relacionam.

No HSL, a saturação é o segundo número. No espaço de cor oklch, mais recente, o equivalente é o croma, que se comporta de forma mais uniforme entre tons, por isso um amarelo e um azul com o mesmo croma parecem igualmente intensos. Cores HSL trata do modelo mais antigo e de como ler os seus números.

Quando aumentar a saturação

• A única coisa a carregar. Um botão saturado numa página calma não precisa de uma seta a apontar para ele. É o trabalho de uma cor de destaque.
• Momentos curtos e ruidosos. Anúncios de saldos, publicações de lançamento e contagens decrescentes de eventos servem para interromper o scroll.
• Marcas jovens, divertidas ou desportivas. Produtos infantis, bebidas energéticas e festivais usam muitas vezes saturação alta como parte da personalidade.
• Dados que têm de se destacar. Num gráfico, satura a série que importa e põe o resto a cinzento.
• Áreas pequenas em fundos escuros. Uma cor viva numa área pequena sobre quase preto lê-se como luz, e é por isso que o néon funciona à noite.

Quando baixar a saturação

• Áreas grandes. Um ecrã inteiro de cor saturada pura cansa. Os fundos costumam funcionar melhor ligeiramente acinzentados.
• Posicionamento premium. Cores suaves e complexas, como oliva, sangue-de-boi e ardósia, leem-se muitas vezes como mais pensadas e caras do que as primárias.
• Leitura longa. Artigos, documentos e painéis precisam de uma superfície calma que as pessoas aguentem olhar durante uma hora.
• Modo escuro. As cores saturadas brilham e esborratam em fundos escuros. Baixa a saturação e sobe um pouco a luminosidade; design em modo escuro tem os detalhes.
• Por trás de fotografias e texto. Um fundo mais calmo deixa a fotografia e as palavras liderar.

O problema da vibração

Põe duas cores complementares muito saturadas lado a lado, como vermelho sobre verde ou azul sobre laranja, e a borda entre elas parece cintilar. É um efeito ótico, e torna realmente desconfortável ler texto sobre esses pares, mesmo quando o rácio de contraste parece aceitável. A solução é dessaturar uma das duas ou separá-las com um neutro.

Como ajustar a saturação em CSS

Os códigos hex escondem a saturação, e é por isso que ajustá-la a olho em hex é lento. Trabalha antes em HSL ou oklch, ou mistura uma cor com cinzento usando color-mix().

:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}

Um hábito útil é definir cada cor de marca em duas saturações desde o início: uma versão plena para destaques e uma versão suave para preenchimentos grandes. Assim ninguém tem de improvisar um tom mais suave mais tarde.

As fotografias seguem a mesma lógica. Uma fotografia carregada e saturada atrás de um título compete com ele; baixa a saturação da fotografia em cerca de um terço e as palavras passam a liderar sem caixa nem sombra por trás. No sentido contrário, um único objeto saturado numa fotografia de resto suave, um casaco vermelho numa rua cinzenta, é uma das formas mais antigas de dirigir o olhar.

A saturação na impressão

Os ecrãs conseguem mostrar cor mais saturada do que a tinta CMYK consegue imprimir, sobretudo azuis, verdes, laranjas e roxos vivos. Uma cor viva no ecrã muitas vezes imprime-se visivelmente mais baça. Se a saturação é central para a tua marca, considera uma tinta direta Pantone para impressão e verifica uma prova antes de uma tiragem grande. RGB vs CMYK explica a diferença.

A saturação também trabalha com a temperatura de cor: uma paleta suave e quente parece vintage, uma suave e fria parece escandinava. Para conjuntos prontos em cada extremo do botão, vê paletas de cores suaves e paletas de cores vivas.

Os Marks do Gradiently aplicam o mesmo princípio a um fundo vivo: a zona mais calma e de melhor contraste desloca-se para trás do texto e o detalhe carregado relaxa aí, para as palavras assentarem numa zona mais tranquila enquanto o resto do Mark mantém a sua cor.