# Paletas de cores pastel: códigos suaves para marcas gentis

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

Os pastéis são fáceis de amar e difíceis de usar: sozinhos, não sustentam texto. Cada paleta aqui vem com as duas cores extras que fazem tudo funcionar.

## The short version

- Uma paleta de cores pastel é feita de cores claras e de saturação suave, em geral com mais de 85% de luminosidade em HSL.
- Os pastéis são claros demais para servir de texto sobre branco, então uma paleta pastel precisa de uma cor de tinta escura para as palavras.
- A maioria das marcas pastel também precisa de uma cor âncora mais profunda, forte o bastante para sustentar texto branco em botões e rótulos.
- Os pastéis parecem mais coesos quando compartilham a mesma luminosidade e diferem principalmente no matiz.
- Um fundo off-white quente combina com pastéis melhor que o branco puro, que pode deixá-los desbotados.

Uma **paleta de cores pastel** é um conjunto de cores pálidas e de saturação suave: pêssego, manteiga, sálvia, azul-pó, lilás. Elas parecem gentis, frescas e amigáveis, e por isso padarias, cuidados com a pele, marcas de bebê e papelarias de casamento recorrem a elas. O problema é que nenhum pastel é escuro o bastante para texto. Por isso cada paleta abaixo une três pastéis a duas cores de trabalho: uma **tinta** escura para as palavras e uma **âncora** mais profunda para botões e acentos. Os códigos estão prontos para copiar e o contraste já foi verificado.

## Cinco paletas de cores pastel com códigos hex

**Pêssego e sálvia** é quente, natural e calma, uma ótima escolha para comida, cerâmica e marcas de vida sem pressa. A âncora terracota evita que fique enjoativa.

- Pêssego #f9d5c7: #f9d5c7
- Manteiga #fbe7b5: #fbe7b5
- Sálvia #cfe3d1: #cfe3d1
- Terracota #ad5a45: #ad5a45
- Tinta cacau #3a2e2a: #3a2e2a

Tinta cacau sobre pêssego dá 9,6:1. Branco sobre terracota dá 4,9:1, o suficiente para rótulos de botão.

**Vidro marinho** é fresca e limpa, indicada para bem-estar, cuidados com a pele e tudo que deve lembrar ar puro.

- Vidro marinho #c9e9e4: #c9e9e4
- Azul-pó #c9dff2: #c9dff2
- Neblina #e3f1ec: #e3f1ec
- Lagoa profunda #3f7f86: #3f7f86
- Tinta ardósia #2f3a4a: #2f3a4a

Tinta ardósia sobre vidro marinho dá 8,9:1. Branco sobre lagoa profunda dá 4,6:1.

**Lavanda e limão** junta dois quase opostos na mesma luminosidade suave, o que a mantém alegre sem conflito. Boa para papelaria, floriculturas e livros infantis.

- Lavanda #ddd3f2: #ddd3f2
- Limão #fbf0b5: #fbf0b5
- Rubor #f6cfdc: #f6cfdc
- Violeta #7a5ba8: #7a5ba8
- Tinta ameixa #3b2f48: #3b2f48

Tinta ameixa sobre lavanda dá 8,7:1 e sobre limão, 10,8:1. Branco sobre violeta dá 5,4:1.

**Sorbet** é a mais doce das cinco, com rosas e damascos quentes para padarias, esmalterias e campanhas de verão.

- Morango #f6cfdc: #f6cfdc
- Damasco #fcd9b8: #fcd9b8
- Baunilha #fbe7b5: #fbe7b5
- Framboesa #b54f6e: #b54f6e
- Tinta frutas #4a2e37: #4a2e37

Tinta de frutas vermelhas sobre morango dá 8,6:1. Branco sobre framboesa dá 4,9:1.

**Pistache** é fresca e verde, natural sem ser terrosa. Combina com lojas de plantas, cafés e marcas ecológicas.

- Pistache #d9e8c4: #d9e8c4
- Aipo #eef3d9: #eef3d9
- Pêssego #f9d5c7: #f9d5c7
- Folha #4f7a3f: #4f7a3f
- Tinta musgo #2e3b33: #2e3b33

Tinta musgo sobre pistache dá 9,1:1. Branco sobre folha dá 5:1. O pêssego é um pequeno acento quente.

Para escolher entre elas, comece pela temperatura. Pastéis quentes (pêssego, damasco, manteiga) parecem caseiros e comestíveis; pastéis frios (vidro marinho, azul-pó, lavanda) parecem limpos e arejados. Depois olhe para a âncora, porque ela vai aparecer em todo botão e etiqueta de preço e é a cor que as pessoas vão lembrar. Se nenhuma dessas âncoras combina com você, mantenha os pastéis e troque pela cor da sua marca, escurecida até que o texto branco sobre ela passe de 4,5:1. Precisa de mais sobriedade do que os pastéis permitem? [Paletas de cores apagadas](https://gradiently.design/pt-br/guide/muted-color-palettes) ficam um passo mais acinzentadas.

## Por que os pastéis precisam de uma tinta e de uma âncora

Todo pastel acima tem uma razão de contraste de cerca de 1,1:1 a 1,4:1 contra o branco. Isso está muito abaixo dos 4,5:1 de que o texto corrido precisa, o que significa que palavras pastel em uma página branca são simplesmente ilegíveis para muita gente. Botões pastel com rótulos brancos falham do mesmo jeito. A tinta e a âncora resolvem os dois problemas e mantêm a paleta suave no conjunto.

| Uso | Cor a escolher | Por quê |
| --- | --- | --- |
| Fundos de página e de seção | Um pastel ou um off-white quente | Áreas grandes e suaves definem o clima |
| Títulos e texto corrido | A tinta | Escura o bastante para 8:1 ou mais em todo pastel |
| Botões e etiquetas | A âncora, com texto branco | Passa de 4,5:1 e dá ao olhar um ponto focal |
| Ilustrações e formas | Qualquer pastel, mais a âncora com parcimônia | Variedade sem ruído |
| Texto sobre fotos | A tinta sobre um painel pastel ou branco sobre uma área escura da foto | Os pastéis somem sobre imagens carregadas |

Uma lista simples de funções para qualquer paleta pastel. Confira seus próprios pares com um verificador de contraste antes de publicar.

Escolha uma tinta que puxe para um dos seus pastéis em vez de um cinza chapado: cacau para paletas quentes, ardósia ou ameixa para as frias. Uma tinta tingida faz toda a paleta parecer pensada. As regras por trás desses números estão em [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

## Como transformar qualquer cor em pastel

Um pastel é qualquer matiz com alta luminosidade e saturação moderada. Em [HSL](https://gradiently.design/pt-br/guide/hsl-colors), mire em 85% a 92% de luminosidade e 40% a 80% de saturação. O problema do HSL é que amarelo e azul com os mesmos números têm brilhos muito diferentes. O [OKLCH](https://gradiently.design/pt-br/guide/oklch-explained) resolve isso, então uma única fórmula dá um pastel uniforme em todo matiz.

```css
:root {
  /* lightness 90%, gentle chroma, any hue */
  --pastel-peach: oklch(90% 0.06 60);
  --pastel-lemon: oklch(90% 0.06 100);
  --pastel-mint:  oklch(90% 0.06 150);
  --pastel-aqua:  oklch(90% 0.06 200);
  --pastel-pink:  oklch(90% 0.06 340);

  /* the ink: same idea, very dark */
  --ink: oklch(30% 0.03 40);
}
```

Mude só o matiz e todo pastel mantém o mesmo peso visual. Mantenha o croma em torno de 0,04 a 0,07; mais que isso começa a parecer bala.

A mesma abordagem transforma a cor da sua marca em um pastel próprio: mantenha o matiz, aumente a luminosidade, reduza a saturação. Você ganha uma cor de fundo suave que é inconfundivelmente sua. Para a teoria dos tons, veja [tintas, tons e sombras](https://gradiently.design/pt-br/guide/tints-tones-shades).

## Erros que deixam os pastéis com cara barata

### Evite

- Texto pastel sobre branco ou sobre outro pastel
- Seis pastéis ao mesmo tempo, sem nenhuma cor escura
- Pastéis de luminosidades diferentes, e um parece sujo
- Fundos de branco puro que desbotam os pastéis
- Fontes script finas em cores pálidas

### Faça

- Tinta escura e tingida para cada palavra
- Três pastéis mais uma âncora e uma tinta
- Pastéis com a mesma luminosidade
- Um off-white quente, como #fdf8f2
- Pesos sólidos com letras bem definidas

## Paletas pastel em um post de verdade

Aqui está a ideia em ação: fundo suave, tinta escura, uma cor âncora usada uma vez. Se você quer pastéis como fundos fluidos em vez de blocos chapados, [degradês pastel](https://gradiently.design/pt-br/guide/pastel-gradients) tem os códigos, e a [estética soft](https://gradiently.design/pt-br/guide/soft-aesthetic) mostra como o visual se estende por todo um feed.

Post pastel suave de Instagram de uma padaria anunciando que o bolo de limão voltou neste fim de semana

Um fundo suave com tipografia escura e segura. O pastel define o clima; a tinta faz a fala.

Fundos claros são onde a legibilidade costuma quebrar, e o Gradiently cuida disso por você. A tinta automática de um Mark escolhe tipografia clara ou escura para cada linha a partir da própria paleta, então as palavras sobre um Mark pastel suave ficam escuras o bastante para ler sem você conferir cada par.

## FAQ

### Quais cores fazem parte de uma paleta de cores pastel?

Versões pálidas e de saturação suave de qualquer matiz: pêssego, amarelo-manteiga, sálvia, menta, azul-pó, lavanda e rubor são as mais comuns.

### Qual é o código hex do rosa pastel?

Não há um código único, mas #f6cfdc é um rosa pastel equilibrado. Combine com uma tinta escura como #4a2e37 para o texto.

### Que cor de texto combina com cores pastel?

Uma cor escura e levemente tingida, como cacau #3a2e2a, ardósia #2f3a4a ou ameixa #3b2f48, que dão cerca de 8:1 a 10:1 nos pastéis típicos.

### As cores pastel são acessíveis?

Como fundos, sim. Como texto ou como cor de botão atrás de texto branco, não: os pastéis são claros demais. Use uma tinta escura para as palavras e uma cor âncora mais profunda para os botões.

### Como transformo uma cor em pastel?

Aumente a luminosidade para cerca de 85% a 92% e mantenha a saturação moderada. Em CSS, `oklch(90% 0.06 H)` dá um pastel uniforme para qualquer matiz H.