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

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

Os pastéis são fáceis de amar e difíceis de usar: sozinhos não aguentam texto. Cada paleta aqui traz as duas cores extra que a fazem funcionar.

## The short version

- Uma paleta de cores pastel é feita de cores claras com saturação suave, tipicamente acima de 85% de luminosidade em HSL.
- Os pastéis são demasiado claros para servir de texto sobre branco, por isso uma paleta pastel precisa de uma cor de tinta escura para as palavras.
- A maioria das marcas pastel precisa também de uma cor de âncora mais profunda, forte o suficiente para levar texto branco em botões e etiquetas.
- Os pastéis ficam mais coesos quando partilham a mesma luminosidade e diferem sobretudo no matiz.
- Um fundo off-white quente serve melhor os pastéis do que o branco puro, que os pode fazer parecer desbotados.

Uma **paleta de cores pastel** é um conjunto de cores pálidas e de saturação suave: pêssego, manteiga, salva, azul-bebé, lilás. Parecem delicadas, frescas e simpáticas, e é por isso que pastelarias, cuidados de pele, marcas de bebé e papelarias de casamento recorrem a elas. O senão é que nenhum pastel é escuro o suficiente para texto. Por isso, cada paleta abaixo junta 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 a copiar e o contraste já foi verificado.

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

**Pêssego e salva** é quente, natural e calma, uma boa escolha para comida, cerâmica e marcas de vida lenta. A âncora terracota impede-a de parecer açucarada.

- Pêssego #f9d5c7: #f9d5c7
- Manteiga #fbe7b5: #fbe7b5
- Salva #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 etiquetas de botões.

**Vidro marinho** é fria e limpa, indicada para bem-estar, cuidados de pele e tudo o que deva parecer ar fresco.

- Vidro marinho #c9e9e4: #c9e9e4
- Azul-bebé #c9dff2: #c9dff2
- Névoa #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.

**Alfazema e limão** junta dois quase opostos com a mesma luminosidade suave, o que a mantém alegre sem choques. Boa para papelaria, floristas e livros infantis.

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

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

**Sorvete** é a mais doce das cinco, com rosas quentes e alperces para pastelarias, estúdios de unhas e campanhas de verão.

- Morango #f6cfdc: #f6cfdc
- Alperce #fcd9b8: #fcd9b8
- Baunilha #fbe7b5: #fbe7b5
- Framboesa #b54f6e: #b54f6e
- Tinta bagas #4a2e37: #4a2e37

Tinta bagas sobre morango dá 8,6:1. Branco sobre framboesa dá 4,9:1.

**Pistácio** é fresca e verde, natural sem ser terrosa. Serve lojas de plantas, cafés e marcas ecológicas.

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

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

Para escolher entre elas, começa pela temperatura. Os pastéis quentes (pêssego, alperce, manteiga) parecem caseiros e comestíveis; os frios (vidro marinho, azul-bebé, alfazema) parecem limpos e arejados. Depois olha para a tua âncora, porque vai aparecer em cada botão e etiqueta de preço, e é a cor de que as pessoas se vão lembrar. Se nenhuma destas âncoras te serve, mantém os pastéis e troca-a pela cor da tua marca, escurecida até o texto branco passar 4,5:1. Precisas de mais contenção do que os pastéis permitem? As [paletas de cores apagadas](https://gradiently.design/pt-pt/guide/muted-color-palettes) ficam um passo mais acinzentadas.

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

Cada pastel acima tem um rácio de contraste entre cerca de 1,1:1 e 1,4:1 contra o branco. Está muito abaixo dos 4,5:1 de que o texto corrente precisa, o que quer dizer que palavras pastel numa página branca são simplesmente ilegíveis para muita gente. Botões pastel com etiquetas brancas falham da mesma maneira. A tinta e a âncora resolvem os dois problemas e mantêm a paleta suave no conjunto.

| Uso | Cor a escolher | Porquê |
| --- | --- | --- |
| Fundos de página e de secção | Um pastel, ou um off-white quente | As grandes áreas suaves criam o ambiente |
| Títulos e texto corrente | A tinta | Escura o suficiente para 8:1 ou mais em todos os pastéis |
| Botões e etiquetas | A âncora, com texto branco | Passa 4,5:1 e dá ao olhar um ponto focal |
| Ilustrações e formas | Qualquer pastel, e a âncora com parcimónia | Variedade sem ruído |
| Texto sobre fotografias | A tinta num painel pastel, ou branco numa zona escura da fotografia | Os pastéis desaparecem sobre imagens carregadas |

Uma lista simples de tarefas para qualquer paleta pastel. Verifica os teus pares num verificador de contraste antes de publicar.

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

## Como tornar qualquer cor pastel

Um pastel é qualquer matiz com luminosidade alta e saturação moderada. Em [HSL](https://gradiently.design/pt-pt/guide/hsl-colors), aponta a 85% a 92% de luminosidade e 40% a 80% de saturação. O problema do HSL é que o amarelo e o azul com os mesmos números parecem muito diferentes em brilho. O [OKLCH](https://gradiently.design/pt-pt/guide/oklch-explained) resolve isso, por isso uma só fórmula dá-te um pastel uniforme em todos os matizes.

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

Muda só o matiz e cada pastel mantém o mesmo peso visual. Mantém o croma entre 0,04 e 0,07; acima disso começa a parecer rebuçado.

A mesma abordagem transforma a cor da tua marca no seu próprio pastel: mantém o matiz, sobe a luminosidade, baixa a saturação. Obténs uma cor de fundo suave que é inconfundivelmente tua. Para a teoria das tintas, vê [tintas, tons e sombras](https://gradiently.design/pt-pt/guide/tints-tones-shades).

## Erros que fazem os pastéis parecer baratos

### Evita

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

### Faz

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

## Paletas pastel numa publicação real

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

Publicação suave em tons pastel no Instagram de uma pastelaria a anunciar que o bolo de limão voltou este fim de semana

Um fundo suave com tipografia escura e segura. O pastel cria o ambiente; a tinta fala.

Os fundos pálidos são onde a legibilidade costuma falhar, e a Gradiently trata disso por ti. A tinta automática de um Mark escolhe texto claro ou escuro para cada linha a partir da sua própria paleta, por isso as palavras num Mark pastel suave ficam escuras o suficiente para ler sem verificares cada par.

## FAQ

### Que 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, salva, menta, azul-bebé, alfazema e rosa 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. Combina-o com uma tinta escura como #4a2e37 para o texto.

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

Uma cor escura e ligeiramente 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ões com texto branco, não: os pastéis são demasiado claros. Usa uma tinta escura para as palavras e uma cor de âncora mais profunda para os botões.

### Como torno uma cor pastel?

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