Saturação

O quanto uma cor é viva ou apagada, da mais intensa à quase cinza.

Hard

O que é

Saturação é a intensidade da cor. Um vermelho muito saturado salta aos olhos, enquanto o mesmo vermelho dessaturado puxa pro cinza e fica bem mais suave. Ela é uma das três propriedades da cor, ao lado do matiz e do brilho.

Na interface, a saturação ajuda a guiar a atenção. Uma cor mais saturada chama o olho e funciona bem pra ação principal, como um botão, enquanto uma cor menos saturada acalma e serve de apoio ou de fundo. Quando você usa tudo no talo, a vista cansa e a hierarquia se perde.

A saturação também ajuda a desenhar emoção e marca, já que uma paleta viva passa energia e uma paleta suave passa sobriedade. O cuidado fica por conta da acessibilidade, porque cor muito saturada com pouco contraste atrapalha a leitura.

Em uma frase

Vamos deixar só o botão principal num laranja bem saturado e baixar a saturação dos secundários, pra o olho ir direto pra ação certa.

A pergunta que ele responde

Por que minha tela cansa a vista mesmo com cores bonitas e como uso cor pra guiar o olho?

Quando usar

Ajuda na hora de montar paleta, definir cor de ação, criar hierarquia visual e ajustar o tom emocional da interface.

Como não usar

O cuidado é não saturar tudo achando que cor forte em todo lugar dá destaque, porque quando tudo grita, no fim nada se destaca.

Na prática

Pense num time que deixa o botão principal num laranja saturado e os secundários num tom mais apagado. Com isso, o olho vai direto pra ação certa.

Não confunda com

Vale separar saturação de brilho, que costuma ser confundido com ela. A saturação fala da pureza da cor, enquanto o brilho fala de quanta luz ela tem. Tanto é assim que dá pra ter uma cor saturada e escura ao mesmo tempo.

Design

Em inglês

Saturation

Pronúncia

n/a

Também chamado de

saturação, intensidade de cor, croma

Origem

Teoria da cor.

Fonte

Saiba mais

Interaction Design Foundation, material sobre teoria da cor (matiz, saturação e brilho)