# Saturação no design: quando aumentar ou reduzir a cor

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

A saturação é o botão entre o vivo e o cinza, e muda o quanto um design parece barulhento, barato, calmo ou caro. Veja quando aumentar, quando reduzir e os códigos para fazer as duas coisas.

## The short version

- Saturação no design é a intensidade de uma cor, do totalmente vivo ao completamente cinza, independente do matiz.
- A saturação alta chama atenção e transmite energia, por isso funciona melhor em áreas pequenas, como botões, destaques e realces.
- A saturação mais baixa transmite calma e muitas vezes parece mais premium, e combina com á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.
- Cores saturadas geralmente precisam ser suavizadas no modo escuro e muitas vezes não podem ser reproduzidas com exatidão na impressão CMYK.

**Saturação no design** é o quanto uma cor é intensa: totalmente saturada, ela é viva e pura; totalmente dessaturada, é cinza. Aumente onde você quer atenção e energia, num botão, num preço promocional ou num único realce. Reduza para áreas grandes, leitura longa, marcas premium e interfaces escuras, onde a cor viva cansa rápido. 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 ela não é

Toda cor pode ser descrita por três propriedades: matiz (qual cor ela é), luminosidade (o quanto se aproxima do branco ou do preto) e saturação (o quanto é pura ou acinzentada). Mude só a saturação e um vermelho cereja desliza para um rosa empoeirado e depois para o cinza, sem ficar mais claro nem mais escuro. [Matiz, saturação e brilho](https://gradiently.design/pt-br/guide/hue-saturation-brightness) explica como as 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 matizes com a luminosidade fixa enquanto a saturação cai. 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 os matizes, então um amarelo e um azul com o mesmo croma parecem igualmente intensos. [Cores HSL](https://gradiently.design/pt-br/guide/hsl-colors) explica o modelo mais antigo e como ler os números.

## Quando aumentar a saturação

- **A única coisa para clicar.** Um botão saturado numa página tranquila não precisa de nenhuma seta apontando para ele. Esse é o trabalho de uma [cor de destaque](https://gradiently.design/pt-br/guide/accent-color).
- **Momentos curtos e barulhentos.** Anúncios de promoção, posts de lançamento e contagens regressivas de eventos existem para interromper a rolagem.
- **Marcas jovens, divertidas ou esportivas.** Produtos infantis, energéticos e festivais costumam usar saturação alta como parte da personalidade.
- **Dados que precisam se destacar.** Num gráfico, sature a série que importa e deixe o resto cinza.
- **Áreas pequenas sobre fundos escuros.** Uma cor viva numa área pequena sobre um quase preto é lida como luz, e é por isso que o neon funciona à noite.

## Quando reduzir a saturação

- **Áreas grandes.** Uma tela inteira de cor pura e saturada cansa. Fundos costumam funcionar melhor levemente acinzentados.
- **Posicionamento premium.** Cores suaves e complexas, como oliva, sangue de boi e ardósia, muitas vezes parecem mais pensadas e caras do que as primárias.
- **Leitura longa.** Artigos, documentos e dashboards precisam de uma superfície calma para olhar durante uma hora.
- **Modo escuro.** Cores saturadas brilham e borram em fundos escuros. Reduza a saturação e aumente um pouco a luminosidade; [design para modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) traz os detalhes.
- **Atrás de fotos e textos.** Um fundo mais discreto deixa a foto e as palavras liderarem.

Um post retrato de promoção com o texto Promoção de fim de semana, só 48 horas

Um momento curto e barulhento, como uma promoção de fim de semana, é onde a saturação alta conquista seu lugar. Post retrato em 1080×1350.

Um post retrato de diário com o título Notas do ateliê

Algo em que as pessoas devem se demorar, como um post de diário, é o lugar de cores mais calmas e menos saturadas.

## O problema da vibração

Coloque duas cores complementares muito saturadas lado a lado, como vermelho sobre verde ou azul sobre laranja, e a borda entre elas parece tremeluzir. É um efeito óptico, e torna o texto nesses pares realmente desconfortável de ler, mesmo quando a razão 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 verde-limão na intensidade máxima
- Cores vivas lado a lado num pôster inteiro

### Lê com calma

- Texto vermelho profundo sobre sálvia suave
- Azul-marinho sobre damasco suave
- Destaque magenta sobre um fundo limão acinzentado
- Uma cor viva sobre uma base de saturação mais baixa

## Como ajustar a saturação no CSS

Códigos hex escondem a saturação, e é por isso que ajustá-la no olho em hex é lento. Trabalhe em HSL ou oklch, ou misture a cor com cinza 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 reduzir a saturação mantendo o matiz: a saturação do HSL, o croma do oklch e a mistura com cinza.

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

Fotos seguem a mesma lógica. Uma foto movimentada e saturada atrás de um título compete com ele; reduza a saturação da foto em cerca de um terço e as palavras assumem a liderança sem nenhuma caixa ou sombra por trás. No sentido contrário, um único objeto saturado numa foto suave, um casaco vermelho numa rua cinza, é uma das formas mais antigas de guiar o olhar.

## Saturação na impressão

Telas mostram cores mais saturadas do que a tinta CMYK consegue imprimir, principalmente azuis, verdes, laranjas e roxos vibrantes. Uma cor viva na tela muitas vezes sai bem mais apagada no papel. Se a saturação é central para a sua marca, considere uma cor especial Pantone para impressão e confira uma prova antes de uma tiragem grande. [RGB vs CMYK](https://gradiently.design/pt-br/guide/rgb-vs-cmyk) explica essa diferença.

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

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

A saturação também trabalha junto com a [temperatura de cor](https://gradiently.design/pt-br/guide/color-temperature): uma paleta suave e quente parece vintage, uma suave e fria parece escandinava. Para conjuntos prontos em cada ponta do botão, veja [paletas de cores suaves](https://gradiently.design/pt-br/guide/muted-color-palettes) e [paletas de cores vibrantes](https://gradiently.design/pt-br/guide/bright-color-palettes).

Os Marks do Gradiently aplicam o mesmo princípio a um fundo vivo: a região mais calma e de melhor contraste se move para trás do texto e os detalhes movimentados relaxam ali, então as palavras ficam sobre uma área mais tranquila enquanto o resto do Mark mantém sua cor.

## FAQ

### O que é saturação no design?

A intensidade ou pureza de uma cor, do totalmente vivo ao completamente cinza. Ela é independente do matiz e da luminosidade.

### Saturação alta é ruim?

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

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

Saturação é quanto cinza está misturado na cor; brilho ou luminosidade é o quanto ela se aproxima do branco ou do preto. Dá para mudar um sem mudar o outro.

### Por que cores saturadas ficam piores no modo escuro?

Em fundos escuros, cores vivas parecem brilhar e borrar nas bordas. Reduzir um pouco a saturação e aumentar a luminosidade as mantém nítidas.

### Como deixo uma cor menos saturada no CSS?

Reduza o segundo valor em `hsl()` ou `oklch()`, ou misture a cor com cinza usando `color-mix(in oklch, yourcolour 60%, #808080)`.