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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/color-saturation)

A saturação é o botão entre o vivo e o cinzento, e muda o quão ruidoso, barato, calmo ou caro um design parece. Eis quando aumentá-la, quando baixá-la e os códigos para fazer qualquer das duas coisas.

## The short version

- A saturação em design é a intensidade de uma cor, de totalmente viva a completamente cinzenta, independente do seu tom.
- A saturação alta atrai a atenção e dá energia, por isso funciona melhor em áreas pequenas, como botões, destaques e realces.
- Uma saturação mais baixa parece mais calma e muitas vezes mais premium, e serve áreas grandes, como fundos e superfícies de leitura longa.
- Duas cores complementares muito saturadas lado a lado podem parecer vibrar, o que torna cansativo ler texto sobre elas.
- As cores saturadas costumam precisar de ser suavizadas no modo escuro e muitas vezes não se conseguem igualar exatamente na impressão CMYK.

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](https://gradiently.design/pt-pt/guide/hue-saturation-brightness) explica como os três se relacionam.

- Vermelho, saturação de 85% a 0%: `linear-gradient(90deg, hsl(350 85% 50%) 0%, hsl(350 60% 50%) 25%, hsl(350 40% 50%) 50%, hsl(350 20% 50%) 75%, hsl(350 0% 50%) 100%)`
- Azul, saturação de 85% a 0%: `linear-gradient(90deg, hsl(210 85% 45%) 0%, hsl(210 60% 45%) 25%, hsl(210 40% 45%) 50%, hsl(210 20% 45%) 75%, hsl(210 0% 45%) 100%)`
- Verde, saturação de 70% a 0%: `linear-gradient(90deg, hsl(150 70% 38%) 0%, hsl(150 50% 38%) 25%, hsl(150 32% 38%) 50%, hsl(150 15% 38%) 75%, hsl(150 0% 38%) 100%)`

Três tons com a luminosidade constante enquanto a saturação desce. O meio de cada faixa é onde vivem muitas cores de marca sofisticadas.

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](https://gradiently.design/pt-pt/guide/hsl-colors) 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](https://gradiently.design/pt-pt/guide/accent-color).
- **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](https://gradiently.design/pt-pt/guide/dark-mode-design) tem os detalhes.
- **Por trás de fotografias e texto.** Um fundo mais calmo deixa a fotografia e as palavras liderar.

Uma publicação vertical de saldos com Saldos de fim de semana, só 48 horas

Um momento curto e ruidoso, como uns saldos de fim de semana, é onde a saturação alta ganha o seu lugar. Publicação vertical a 1080×1350.

Uma publicação vertical de diário intitulada Notas do estúdio

Algo em que as pessoas se devem demorar, como uma publicação de diário, é onde pertence uma cor mais calma, de saturação mais baixa.

## 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.

### Vibra

- Texto vermelho puro sobre verde puro
- Azul saturado sobre laranja saturado
- Magenta ao lado de lima com toda a intensidade
- Cores vivas lado a lado num cartaz inteiro

### Lê-se com calma

- Texto vermelho profundo sobre uma salva suave
- Azul-marinho sobre um alperce suave
- Destaque magenta sobre um fundo lima acinzentado
- Uma cor viva sobre uma base de saturação mais baixa

## 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()`.

```css
: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);
}
```

Três formas de baixar a saturação mantendo o tom: a saturação em HSL, o croma em oklch e a mistura com cinzento.

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](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) explica a diferença.

- Vermelho pleno: #e8173a
- Vermelho suave: #b8505f
- Azul pleno: #1c7ae0
- Azul suave: #4f6f93
- Verde pleno: #14a85a
- Verde suave: #5b8a6f

Cada cor de marca em duas saturações. As versões plenas são para momentos pequenos e ruidosos; as suaves levam as áreas grandes e sobrevivem melhor à impressão.

A saturação também trabalha com a [temperatura de cor](https://gradiently.design/pt-pt/guide/color-temperature): 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](https://gradiently.design/pt-pt/guide/muted-color-palettes) e [paletas de cores vivas](https://gradiently.design/pt-pt/guide/bright-color-palettes).

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.

## FAQ

### O que é a saturação em design?

A intensidade ou pureza de uma cor, de totalmente viva a completamente cinzenta. É independente do tom e da luminosidade.

### A saturação alta é má?

Não, mas é melhor em áreas pequenas e momentos curtos. Grandes áreas de saturação alta cansam e podem parecer baratas.

### Qual é a diferença entre saturação e brilho?

A saturação é quanto cinzento se mistura numa cor; o brilho ou luminosidade é quão perto está do branco ou do preto. Podes mudar um sem o outro.

### Porque é que as cores saturadas ficam piores no modo escuro?

Em fundos escuros, as cores vivas parecem brilhar e esborratar nas bordas. Baixar ligeiramente a saturação e subir a luminosidade mantém-nas nítidas.

### Como torno uma cor menos saturada em CSS?

Baixa o segundo valor em `hsl()` ou `oklch()`, ou mistura-a com cinzento usando `color-mix(in oklch, yourcolour 60%, #808080)`.