# Paletas de cores terrosas: códigos naturais para copiar

[Canonical HTML page](https://gradiently.design/pt-br/guide/earth-tone-colors)

Tons terrosos são as cores da argila, da areia, da casca de árvore, do musgo e da pedra. Eles transmitem calma, honestidade e calor, e é surpreendentemente fácil deixá-los sem vida. Aqui estão oito paletas com códigos que continuam vivas.

## The short version

- Uma paleta de cores terrosas usa as cores suaves de materiais naturais: marrons, caramelos, areia, argila, terracota, ocre, oliva, musgo e cinzas quentes.
- Os tons terrosos transmitem calma, calor e confiança, e por isso são comuns em marcas de decoração, comida, bem-estar, atividades ao ar livre e artesanato.
- Paletas terrosas ficam sem vida quando todas as cores têm a mesma luminosidade, então inclua um fundo claro, um tom médio e um marrom ou oliva bem escuro.
- Um único destaque mais vivo, como laranja queimado, ocre ou um verde-azulado profundo, impede que uma paleta terrosa pareça apagada.
- Marrom café ou casca de árvore é a cor de texto mais confiável sobre tons terrosos claros, e um creme quente se lê bem sobre os escuros.

Uma **paleta de cores terrosas** é feita das cores suaves e quentes de materiais naturais: areia `#e7d8c3`, argila `#c2703d`, siena `#a0522d`, oliva `#6b7046`, casca `#3d2b1f` e os cremes, ocres e cinzas ao redor delas. Essas cores transmitem calma e honestidade porque as vemos no solo, na pedra, na madeira e no capim seco. O segredo é a variação. Uma boa paleta terrosa sempre inclui um fundo claro, um ou dois tons médios e um escuro profundo; caso contrário, vira um único borrão bege. Abaixo estão oito paletas com códigos para copiar.

## O que conta como tom terroso

Tons terrosos têm menos saturação do que as cores de um círculo cromático padrão e ficam quase todos na metade quente: vermelhos que viraram ferrugem, laranjas que viraram argila, amarelos que viraram ocre, verdes que viraram oliva e sálvia. Muitos levam o nome de pigmentos reais, como siena e sombra, que eram feitos originalmente de terra colorida.

| Cor | Hex | Encontrada em | Sensação |
| --- | --- | --- | --- |
| Areia | `#e7d8c3` | Praias, reboco, linho | Leve, calma |
| Ocre | `#c8963e` | Pigmento de argila, capim seco | Ensolarada, envelhecida |
| Terracota | `#c2703d` | Argila cozida, ladrilhos | Quente, artesanal |
| Siena | `#a0522d` | Solo rico em ferro | Rica, terrosa |
| Oliva | `#6b7046` | Folhas de oliveira, líquen | Firme, madura |
| Sálvia | `#9caf88` | Ervas secas | Suave, tranquila |
| Pedra | `#a8a196` | Granito, ardósia | Quieta, neutra |
| Casca | `#3d2b1f` | Casca de árvore, café | Sólida, confiável |

Oito tons terrosos essenciais. A maioria das paletas abaixo é feita de três a cinco deles.

## Oito paletas de cores terrosas

Cada paleta lista as cores da mais clara para a mais escura. Use a primeira como fundo, as do meio para formas e imagens, e a última para o texto.

- Osso: #f3ece2
- Duna: #e0c3a3
- Terracota: #c2703d
- Ferrugem: #8b4a2b
- Casca: #3d2b1f

**Argila do deserto.** Quente e ensolarada. Combina com cerâmica, decoração e viagens.

- Sálvia clara: #eef0e5
- Sálvia: #9caf88
- Oliva: #6b7046
- Musgo: #4a4a2f
- Tinta de floresta: #1f2416

**Olival.** Puxando para o verde e tranquila. Combina com bem-estar, comida e jardinagem.

- Concha: #f5efe6
- Areia: #e7d8c3
- Madeira de praia: #a8a196
- Pedra do mar: #5f6b6d
- Ardósia: #2e3335

**Areia do litoral.** Mais fria e arejada. Combina com hotéis, skincare e arquitetura.

- Palha: #f1e4c8
- Ocre: #c8963e
- Siena: #a0522d
- Sombra: #6b3e26
- Espresso: #2b1d14

**Colheita de outono.** Rica e dourada. Combina com padarias, café e campanhas sazonais.

- Papel de arroz: #ece6dc
- Aveia: #c9bba5
- Taupe: #8c7b67
- Nogueira: #5b5246
- Carvão: #262320

**Neutro silencioso.** Quase sem cor, muito calma. Combina com interiores japandi, móveis e layouts editoriais.

- Argila rosada: #f4e9df
- Adobe: #d9a38a
- Tijolo: #b4644a
- Óxido: #7a3b2e
- Cacau: #3a1f19

**Ateliê terracota.** Puxando para o rosa e suave. Combina com floriculturas, velas e marcas boho.

- Névoa: #d8cfc0
- Líquen: #6b6250
- Turfa: #4a3b2c
- Solo: #2a2119
- Terra noturna: #14100c

**Terra escura.** Intensa e premium. Combina com uísque, couro, equipamentos de aventura e moda masculina.

- Osso: #f3ece2
- Camelo: #d9c3a5
- Oliva: #6b7046
- Verde-azulado profundo: #2f5d62
- Casca: #3d2b1f

**Terra com destaque.** Um verde-azulado profundo levanta o conjunto inteiro sem quebrar o clima.

## Como equilibrar uma paleta de cores terrosas

Os tons terrosos têm pouca saturação, então a luminosidade precisa fazer o trabalho que a saturação normalmente faz. Se todas as cores forem tons médios, o design fica chapado e sujo. Espalhe as cores entre claro, médio e escuro, e depois distribua-as com a [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule).

| Papel | Proporção | Exemplo com Argila do deserto |
| --- | --- | --- |
| Fundo | Cerca de 60% | Osso `#f3ece2` |
| Apoio | Cerca de 30% | Duna `#e0c3a3` e Ferrugem `#8b4a2b` |
| Destaque | Cerca de 10% | Terracota `#c2703d` |
| Texto | Conforme necessário | Casca `#3d2b1f` |

Uma paleta distribuída em papéis. O destaque chama a atenção justamente porque aparece tão pouco.

> **Acrescente uma nota mais viva** Um laranja queimado, um mostarda ou um verde-azulado profundo com um pouco mais de saturação que o resto dá ao olhar um lugar onde pousar. Sem isso, uma paleta terrosa pode parecer sonolenta.

### Erros comuns com tons terrosos

- **Cinco beges em sequência.** Cores com a mesma luminosidade se fundem; mantenha pelo menos uma bem clara e uma bem escura.
- **Texto em preto puro.** Parece frio ao lado de marrons quentes. Use espresso ou casca no lugar.
- **Misturar marrons quentes e frios.** Uma terracota rosada ao lado de um taupe acinzentado parece acidental. Mantenha os subtons consistentes.
- **Destaques demais.** Uma nota viva levanta a paleta; três a transformam em outra paleta.

## Gradientes em tons terrosos

Os tons terrosos se misturam com facilidade porque já têm saturação parecida, então há pouco risco de um meio acinzentado. Mantenha a fonte de luz suave e acrescente granulado, que combina com a sensação de material dessas cores. [Gradientes marrons](https://gradiently.design/pt-br/guide/brown-gradient) e [gradientes bege](https://gradiently.design/pt-br/guide/beige-gradient) aprofundam cada família.

- Osso a terracota: `linear-gradient(160deg, #f3ece2 0%, #e0c3a3 50%, #c2703d 100%)`
- Sombra de oliveira: `radial-gradient(circle at 75% 25%, #9caf88 0%, #6b7046 45%, #2a2a1a 100%)`
- Colheita: `linear-gradient(180deg, #f1e4c8 0%, #c8963e 55%, #6b3e26 100%)`
- Brasas na terra: `radial-gradient(ellipse at 30% 110%, #b4644a 0%, #4a3b2c 45%, #14100c 90%)`

Quatro gradientes terrosos feitos a partir das paletas acima.

## Cores de texto sobre tons terrosos

Preto puro e branco puro podem parecer duros ao lado de cores tão suaves. Use um marrom bem escuro para texto sobre fundos claros e um creme quente sobre os escuros; o branco ainda funciona nos tons médios mais profundos, como siena e oliva. As proporções usam a fórmula do WCAG, em que 4,5:1 é a meta usual para texto pequeno; [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica.

| Fundo | Texto | Contraste | Veredito |
| --- | --- | --- | --- |
| Osso `#f3ece2` | Casca `#3d2b1f` | 11,5:1 | Excelente |
| Areia `#e7d8c3` | Casca `#3d2b1f` | 9,6:1 | Excelente |
| Terracota `#c2703d` | Branco | 3,7:1 | Só títulos grandes |
| Siena `#a0522d` | Branco | 5,6:1 | Bom |
| Oliva `#6b7046` | Branco | 5,2:1 | Bom |
| Casca `#3d2b1f` | Areia `#e7d8c3` | 9,6:1 | Excelente |

Terracota e ocre são mais claros do que parecem, então confira com cuidado o texto branco sobre eles.

Um post vertical de uma loja de cerâmica com letras marrom-escuras sobre um fundo quente de osso a terracota

O post de uma loja de cerâmica em argila do deserto, com texto marrom casca.

Um post quadrado de uma torrefação de café com letras cor de areia sobre um fundo marrom de terra escura

O post de uma torrefação em terra escura, com texto cor de areia.

## Paleta de cores terrosas como variáveis CSS

```css
:root {
  --bone: #f3ece2;
  --dune: #e0c3a3;
  --terracotta: #c2703d;
  --rust: #8b4a2b;
  --bark: #3d2b1f;
}

body {
  background: var(--bone);
  color: var(--bark);
}

.button {
  background: var(--rust);
  color: var(--bone);
}

.tag {
  background: var(--terracotta);
  color: var(--bark);
  font-weight: 700;
}

.hero {
  background: linear-gradient(160deg, var(--bone) 0%, var(--dune) 55%, var(--terracotta) 100%);
}
```

A paleta Argila do deserto como propriedades personalizadas. Osso sobre ferrugem passa para rótulos de botão; casca sobre terracota só chega a cerca de 3,6:1, então use apenas em etiquetas grandes e em negrito.

Paletas terrosas se sobrepõem às [paletas de cores de outono](https://gradiently.design/pt-br/guide/autumn-color-palettes), às [paletas de cores suaves](https://gradiently.design/pt-br/guide/muted-color-palettes) e às [cores japandi](https://gradiently.design/pt-br/guide/japandi-colors), então pegue emprestado delas quando tiver uma base. Se você quer um fundo terroso com material de verdade, os Marks do Gradiently combinam cor com materiais, granulado e luz, e o Designer pode montar posts no seu Mark a partir de uma descrição curta.

## FAQ

### Quais cores são tons terrosos?

Cores suaves, quase todas quentes, de materiais naturais: marrons, caramelos, areia, bege, terracota, ferrugem, ocre, oliva, sálvia, musgo e cinzas quentes.

### Quais são alguns códigos hex de tons terrosos?

Areia `#e7d8c3`, ocre `#c8963e`, terracota `#c2703d`, siena `#a0522d`, oliva `#6b7046`, sálvia `#9caf88` e casca `#3d2b1f` são um bom conjunto inicial.

### Que cor combina com tons terrosos?

Um verde-azulado profundo, um laranja queimado ou um mostarda usados como pequeno destaque. Creme quente e espresso escuro funcionam como as pontas clara e escura.

### Como evitar que uma paleta terrosa fique apagada?

Espalhe as cores entre valores claros, médios e escuros, e acrescente um destaque um pouco mais saturado, usado em cerca de um décimo do design.

### Tons terrosos são bons para branding?

Sim, para marcas que querem transmitir calma, naturalidade e confiança, como decoração, comida, bem-estar, atividades ao ar livre e artesanato.