# Paletas de cores suaves: tons empoeirados para marcas calmas

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

Sálvia, rosa envelhecido, ardósia e argila parecem calmos porque a cor foi suavizada com cinza. Veja como funciona o efeito, sete paletas para copiar e a única coisa que impede um esquema suave de virar neblina.

## The short version

- Uma paleta de cores suaves é feita de cores com saturação reduzida, geralmente misturando cinza ou um pouco do matiz oposto.
- Cores suaves como sálvia, rosa envelhecido, azul-ardósia, malva e argila parecem calmas, naturais e maduras.
- Cores suaves muitas vezes têm a mesma luminosidade, então uma paleta suave precisa de uma cor muito mais escura para texto e contornos.
- O verde sálvia e o rosa envelhecido parecem diferentes no matiz, mas são quase idênticos em luminosidade, e por isso o texto de um sobre o outro é ilegível.
- Em CSS, color-mix() no espaço oklch é um jeito confiável de suavizar qualquer cor da marca misturando-a com cinza.

Uma **paleta de cores suaves** é um conjunto de cores com a saturação reduzida, de modo que parecem empoeiradas, delicadas e levemente acinzentadas, e não puras. Sálvia `#9CAF88`, rosa envelhecido `#C9A9A6`, azul-ardósia `#6B7F99`, malva `#B48A9B` e argila `#B5826B` são típicas. Combinam com marcas que querem parecer calmas e ponderadas: cerâmica, bem-estar, papelaria, arquitetura, moda lenta. O porém é que as cores suaves tendem à mesma luminosidade, então toda boa paleta suave inclui um escuro firme para sustentá-la.

## O que torna uma cor suave

Uma cor tem três ajustes: matiz, saturação e luminosidade (veja [matiz, saturação e brilho](https://gradiently.design/pt-br/guide/hue-saturation-brightness)). Suavizar reduz a saturação mantendo o matiz reconhecível. Há dois jeitos clássicos de fazer isso: misturar cinza, o que os designers chamam de criar um tom, ou misturar um pouco da cor complementar, o que os pintores sempre fizeram. Os dois puxam a cor para o neutro.

### Pura

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

### Suave

- Sálvia `#9CAF88`
- Rosa envelhecido `#C9A9A6`
- Azul-ardósia `#6B7F99`
- Argila `#B5826B`

Suave não é o mesmo que pastel. O pastel acrescenta branco, então continua limpo e claro; uma cor suave acrescenta cinza, então pode ser clara, média ou escura e sempre parece um pouco empoeirada. [Paletas de cores pastel](https://gradiently.design/pt-br/guide/pastel-color-palettes) e [tons claros, médios e escuros](https://gradiently.design/pt-br/guide/tints-tones-shades) traçam essa linha com mais detalhes.

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

- Giz: #eef0e8
- Sálvia: #9caf88
- Rosa envelhecido: #c9a9a6
- Argila: #b5826b
- Tinta musgo: #2e3a2c

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

- **Porto:** névoa `#E6E9EA`, azul-ardósia `#6B7F99`, cinza-mar `#93A3A6`, corda `#C2AD8E`, azul-marinho profundo `#22303C`.
- **Cerâmica:** biscoito `#F1E8DD`, argila `#B5826B`, esmalte cinza `#A7A39A`, ferro `#5B4A42`, preto de forno `#231D1A`.
- **Pó de lavanda:** bruma `#F1EBE6`, malva `#B48A9B`, urze `#8E8AA6`, sálvia `#9CAF88`, berinjela `#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`, pinheiro `#24302E`.
- **Crepúsculo empoeirado:** pergaminho `#EFE6DA`, pó de pêssego `#D9A88F`, marrom-rosa `#A06F6B`, cinza-ameixa `#6E5866`, noite `#2A2329`.

Todas terminam num escuro. Isso não é decoração. Sem ele, não há onde colocar o texto nem como desenhar um contorno, e a paleta parece uma fotografia deixada no sol.

## Por que paletas suaves viram neblina

Suavizar elimina as diferenças mais fortes entre as cores, então a luminosidade passa a ser a única coisa que as separa. Sálvia `#9CAF88` e rosa envelhecido `#C9A9A6` parecem um belo contraste de verde e rosa, mas a razão de contraste é 1,09:1: quase a mesma luminosidade. O texto de um sobre o outro é ilegível. Até a sálvia sobre branco puro só chega a 2,36:1.

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

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

Confira os seus próprios pares com as orientações de [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility). Um bom hábito é converter a paleta para escala de cinza por um instante: se duas cores viram o mesmo cinza, nunca ponha uma sobre a outra.

## Como suavizar qualquer cor em CSS

Se você já tem uma cor de marca viva e quer uma companheira mais calma, misture-a com cinza em vez de escolher uma cor nova a olho. O `color-mix()` no espaço oklch mantém o matiz estável enquanto a saturação cai, e é compatível com 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 cinza médio suaviza sem mudar o matiz. No oklch, uma saturação em torno de 0,03 a 0,07 lê-se como suave; 0,15 ou mais, como viva.

[OKLCH explicado](https://gradiently.design/pt-br/guide/oklch-explained) trata de por que esse espaço se comporta de modo mais uniforme que o HSL, e [saturação no design](https://gradiently.design/pt-br/guide/color-saturation) trata de quando aumentá-la de novo.

## Degradês e fundos suaves

Cores suaves fazem degradês delicados e silenciosos, sobretudo quando as paradas são próximas no matiz e a luz vem de um lado. Acrescente um pouco de grão: misturas de baixo contraste formam faixas com facilidade, e a textura as faz parecer uma superfície, e não um ajuste de tela.

- Manhã de sálvia: `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 degradês suaves. Cada um mantém matizes vizinhos, então a mistura nunca vira marrom no meio.

Um esquema suave também pode receber uma cor um pouco mais forte como destaque, como uma terracota entre sálvias ou um azul-petróleo mais profundo entre cinzas. Limite-a a um elemento por design: um preço, um botão, uma data. Ela dá ao olho um lugar para pousar sem quebrar a calma e é assim que costumam funcionar as [paletas de tons terrosos](https://gradiently.design/pt-br/guide/earth-tone-colors) de onde os esquemas suaves tomam emprestado.

Post vertical de rede social para uma coleção de cerâmica, com letras escuras sobre um fundo suave e empoeirado

Um post de cerâmica em 1080×1350. As cores suaves carregam o clima; o texto escuro carrega a mensagem.

Se a sua marca vive em cores suaves, um fundo com grão e luz próprios faz boa parte do trabalho. Um Mark da Gradiently dá a você uma superfície suave e distintiva que mantém o texto legível sozinha, 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, que parecem delicadas, empoeiradas e levemente acinzentadas. Sálvia, rosa envelhecido, azul-ardósia e argila são exemplos comuns.

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

Os pastéis são feitos acrescentando branco, então continuam claros e limpos. As cores suaves são feitas acrescentando cinza, então podem ter qualquer luminosidade e sempre parecem um pouco empoeiradas.

### Como deixar uma cor mais suave?

Reduza a saturação, misture cinza ou acrescente uma pequena quantidade da cor complementar. Em CSS, `color-mix(in oklch, suacor 50%, #8c8c8c)` faz isso de forma confiável.

### Quais cores combinam com o verde sálvia?

Rosa envelhecido, argila, creme, cinza quente e um musgo escuro ou grafite para o texto. Evite texto em sálvia sobre rosa envelhecido: têm quase a mesma luminosidade.

### Cores suaves são boas para branding?

Combinam bem com marcas calmas, artesanais e de bem-estar. Inclua um escuro forte para texto e contornos para que a paleta continue legível.