# Paletas de cores suaves: tons empoeirados para marcas calmas

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

Salva, rosa antigo, ardósia e barro parecem calmos porque a cor foi suavizada com cinzento. Aqui fica como funciona a suavização, sete paletas para copiar e a única coisa que impede um esquema suave de virar nevoeiro.

## The short version

- Uma paleta de cores suaves é feita de cores com saturação reduzida, normalmente misturando cinzento ou um pouco do tom oposto.
- Cores suaves como salva, rosa antigo, azul-ardósia, malva e barro leem-se como calmas, naturais e adultas.
- As cores suaves partilham muitas vezes a mesma luminosidade, por isso uma paleta suave precisa de uma cor muito mais escura para texto e contornos.
- O verde-salva e o rosa antigo são diferentes no tom mas quase idênticos na luminosidade, e é por isso que texto de um sobre o outro é ilegível.
- Em CSS, o color-mix() no espaço oklch é uma forma fiável de suavizar qualquer cor de marca misturando-a com cinzento.

Uma **paleta de cores suaves** é um conjunto de cores com a saturação reduzida, para que pareçam empoeiradas, macias e ligeiramente acinzentadas em vez de puras. Salva `#9CAF88`, rosa antigo `#C9A9A6`, azul-ardósia `#6B7F99`, malva `#B48A9B` e barro `#B5826B` são típicas. Assentam a marcas que querem parecer calmas e ponderadas: cerâmica, bem-estar, papelaria, arquitetura, moda lenta. O senão é que as cores suaves tendem para a mesma luminosidade, por isso toda a boa paleta suave inclui um escuro firme que a segure.

## O que torna uma cor suave

Uma cor tem três definições: tom, saturação e luminosidade (vê [tom, saturação e brilho](https://gradiently.design/pt-pt/guide/hue-saturation-brightness)). Suavizar reduz a saturação mantendo o tom reconhecível. Há duas formas clássicas de o fazer: misturar cinzento, a que os designers chamam fazer um tom, ou misturar um pouco da cor complementar, o que os pintores sempre fizeram. Ambas puxam a cor para o neutro.

### Pura

- Verde `#2ECC71`
- Rosa `#FF5C8A`
- Azul `#2F6BFF`
- Laranja `#FF7A1A`

### Suave

- Salva `#9CAF88`
- Rosa antigo `#C9A9A6`
- Azul-ardósia `#6B7F99`
- Barro `#B5826B`

Suave não é o mesmo que pastel. Um pastel acrescenta branco, por isso fica limpo e claro; uma cor suave acrescenta cinzento, por isso pode ser clara, média ou escura e parece sempre um pouco empoeirada. As [paletas de cores pastel](https://gradiently.design/pt-pt/guide/pastel-color-palettes) e as [tintas, tons e sombras](https://gradiently.design/pt-pt/guide/tints-tones-shades) traçam a linha com mais pormenor.

## Sete paletas de cores suaves com códigos hex

- Giz: #eef0e8
- Salva: #9caf88
- Rosa antigo: #c9a9a6
- Barro: #b5826b
- Tinta musgo: #2e3a2c

Estúdio de jardim, a paleta que a maioria das pessoas imagina quando ouve falar de suave. A tinta musgo é a âncora que torna as outras quatro utilizáveis.

- **Porto:** nevoeiro `#E6E9EA`, azul-ardósia `#6B7F99`, cinzento-mar `#93A3A6`, corda `#C2AD8E`, azul-marinho profundo `#22303C`.
- **Cerâmica:** biscoito `#F1E8DD`, barro `#B5826B`, vidrado de cinza `#A7A39A`, ferro `#5B4A42`, preto de forno `#231D1A`.
- **Pó de lavanda:** bruma `#F1EBE6`, malva `#B48A9B`, urze `#8E8AA6`, salva `#9CAF88`, beringela `#4A3F4F`.
- **Olival:** creme `#F2EDE1`, oliva `#8A8A5C`, erva seca `#B1A87F`, terracota `#A9674E`, casca `#3A3328`.
- **Nórdica:** neve `#F2F3F1`, bétula `#D8D1C4`, líquen `#A3AE9D`, fiorde `#5F7A80`, pinho `#24302E`.
- **Crepúsculo empoeirado:** pergaminho `#EFE6DA`, pó de pêssego `#D9A88F`, castanho-rosa `#A06F6B`, cinzento-ameixa `#6E5866`, noite `#2A2329`.

Todas terminam num escuro. Isso não é decoração. Sem ele, não há nada em que compor o texto nem com que desenhar um contorno, e a paleta parece uma fotografia esquecida ao sol.

## Porque é que as paletas suaves viram nevoeiro

Suavizar remove as diferenças mais fortes entre cores, por isso a luminosidade passa a ser a única coisa que as separa. A salva `#9CAF88` e o rosa antigo `#C9A9A6` parecem um bonito contraste de verde e rosa, mas a sua razão de contraste é 1,09:1: quase a mesma luminosidade. Texto de uma sobre a outra é ilegível. Até a salva sobre branco puro só chega a 2,36:1.

| Par | Contraste | Usar para |
| --- | --- | --- |
| Salva sobre rosa antigo | 1,09:1 | Duas formas lado a lado, nunca texto |
| Salva sobre branco | 2,36:1 | Formas grandes e ilustração |
| Azul-ardósia sobre branco | 4,10:1 | Só títulos grandes |
| Rosa antigo com texto `#3A2A2A` | 6,29:1 | Texto corrido, passa AA |
| Tinta musgo `#2E3A2C` sobre giz | 10,39:1 | Texto corrido, passa AAA |
| Beringela `#4A3F4F` sobre bruma | 8,40:1 | Texto corrido, passa AAA |

As WCAG pedem 4,5:1 para texto corrido e 3:1 para texto grande. Numa paleta suave, o escuro de âncora faz todo o trabalho de leitura.

Verifica os teus próprios pares com as orientações do [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). Um bom hábito é converter a paleta para tons de cinzento por um momento: se duas cores ficarem o mesmo cinzento, nunca ponhas uma sobre a outra.

## Como suavizar qualquer cor em CSS

Se já tens uma cor de marca viva e queres uma companheira mais calma, mistura-a com cinzento em vez de escolher uma cor nova a olho. O `color-mix()` no espaço oklch mantém o tom estável enquanto a saturação desce, e é suportado em todos os principais navegadores atuais.

```css
:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}
```

Misturar em direção a um cinzento médio suaviza sem mudar o tom. Em oklch, uma croma entre 0,03 e 0,07 lê-se como suave; 0,15 ou mais lê-se como viva.

O [OKLCH explicado](https://gradiently.design/pt-pt/guide/oklch-explained) trata de porque é que este espaço se comporta de forma mais uniforme do que o HSL, e a [saturação no design](https://gradiently.design/pt-pt/guide/color-saturation) trata de quando voltar a subi-la.

## Gradientes e fundos suaves

As cores suaves fazem gradientes macios e silenciosos, sobretudo quando as paragens têm tons próximos e a luz vem de um lado. Junta um pouco de grão: as transições de baixo contraste fazem banding com facilidade, e a textura faz com que pareçam uma superfície e não uma definição de ecrã.

- Manhã de salva: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Pó de pêssego: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Bruma do porto: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Entardecer malva: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Quatro gradientes suaves. Cada um mantém tons vizinhos, por isso a transição nunca fica acastanhada no meio.

Um esquema suave também pode ter uma cor um pouco mais forte como acento, como uma terracota entre salvas ou um azul-petróleo mais profundo entre cinzentos. Limita-o a um só elemento por design: um preço, um botão, uma data. Dá ao olho um sítio onde pousar sem quebrar a calma, e é assim que costumam funcionar as [paletas de tons terra](https://gradiently.design/pt-pt/guide/earth-tone-colors) de onde os esquemas suaves se inspiram.

Uma publicação vertical de redes sociais para uma coleção de cerâmica, com letras escuras sobre um fundo suave e empoeirado

Uma publicação de cerâmica a 1080×1350. As cores suaves trazem o ambiente; o texto escuro traz a mensagem.

Se a tua marca vive em cores suaves, um fundo com grão e luz próprios faz muito do trabalho. Um Mark do Gradiently dá-te uma superfície macia e distintiva que mantém o texto legível por si, o que importa mais num esquema suave do que em qualquer outro.

## FAQ

### O que é uma paleta de cores suaves?

Uma paleta de cores com saturação reduzida, para que pareçam macias, empoeiradas e ligeiramente acinzentadas. Salva, rosa antigo, azul-ardósia e barro são exemplos comuns.

### Qual é a diferença entre cores suaves e pastel?

Os pastéis fazem-se acrescentando branco, por isso ficam claros e limpos. As cores suaves fazem-se acrescentando cinzento, por isso podem ter qualquer luminosidade e parecem sempre um pouco empoeiradas.

### Como torno uma cor mais suave?

Baixa a saturação, mistura cinzento ou acrescenta uma pequena quantidade da cor complementar. Em CSS, `color-mix(in oklch, yourcolour 50%, #8c8c8c)` faz isso de forma fiável.

### Que cores combinam com verde-salva?

Rosa antigo, barro, creme, cinzento quente e um musgo profundo ou carvão para o texto. Evita compor texto em salva sobre rosa antigo: têm quase a mesma luminosidade.

### As cores suaves são boas para branding?

Assentam bem a marcas calmas, artesanais e de bem-estar. Inclui um escuro forte para texto e contornos para que a paleta se mantenha legível.