# Paletas de cores terrosas: códigos com os pés na terra

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

Os tons terrosos são as cores do barro, da areia, da casca de árvore, do musgo e da pedra. Parecem calmos, honestos e quentes, e é surpreendentemente fácil deixá-los planos. Aqui ficam oito paletas com códigos que se mantêm vivas.

## The short version

- Uma paleta de cores terrosas usa as cores discretas de materiais naturais: castanhos, beges, areia, barro, terracota, ocre, oliva, musgo e cinzentos quentes.
- Os tons terrosos parecem calmos, quentes e de confiança, e por isso são comuns em interiores, comida, bem-estar, ar livre e marcas artesanais.
- As paletas terrosas ficam planas quando todas as cores têm a mesma luminosidade, por isso inclui uma base clara, um tom médio e um castanho ou oliva muito escuro.
- Um único destaque mais vivo, como laranja queimado, ocre ou um azul-petróleo profundo, impede uma paleta terrosa de parecer apagada.
- O castanho café expresso ou de casca de árvore escuro é a cor de texto mais fiável sobre tons terrosos claros, e o creme quente lê-se bem sobre os escuros.

Uma **paleta de cores terrosas** constrói-se com as cores discretas e quentes de materiais naturais: areia `#e7d8c3`, barro `#c2703d`, siena `#a0522d`, oliva `#6b7046`, casca `#3d2b1f` e os cremes, ocres e cinzentos à volta. Estas cores parecem calmas e honestas porque as vemos na terra, na pedra, na madeira e na erva seca. O truque é a amplitude. Uma boa paleta terrosa inclui sempre uma base clara, um ou dois tons médios e um escuro profundo, senão transforma-se numa única mancha de bege. Abaixo ficam oito paletas com códigos que podes copiar.

## O que conta como tom terroso

Os tons terrosos têm menor saturação do que as cores de um círculo cromático padrão e ficam sobretudo na metade quente: vermelhos que viram ferrugem, laranjas que viram barro, amarelos que viram ocre, verdes que viram oliva e salva. Muitos têm o nome de pigmentos reais, como siena e sombra, que eram feitos originalmente de terra colorida.

| Cor | Hex | Encontra-se em | Transmite |
| --- | --- | --- | --- |
| Areia | `#e7d8c3` | Praias, estuque, linho | Leve, calmo |
| Ocre | `#c8963e` | Pigmento de barro, erva seca | Soalheiro, envelhecido |
| Terracota | `#c2703d` | Barro cozido, azulejos | Quente, artesanal |
| Siena | `#a0522d` | Solo rico em ferro | Rico, terroso |
| Oliva | `#6b7046` | Folhas de oliveira, líquen | Firme, maduro |
| Salva | `#9caf88` | Ervas secas | Suave, repousante |
| Pedra | `#a8a196` | Granito, ardósia | Silencioso, neutro |
| Casca | `#3d2b1f` | Casca de árvore, café | Sólido, fiável |

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

## Oito paletas de cores terrosas

Cada paleta lista as cores da mais clara à mais escura. Usa 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

**Barro do deserto.** Quente e banhada de sol. Serve cerâmica, interiores e viagens.

- Salva pálida: #eef0e5
- Salva: #9caf88
- Oliva: #6b7046
- Musgo: #4a4a2f
- Tinta de floresta: #1f2416

**Olival.** Inclinada para o verde e repousante. Serve bem-estar, comida e jardinagem.

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

**Areia costeira.** Mais fria e arejada. Serve hotéis, cuidados de pele e arquitetura.

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

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

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

**Neutro tranquilo.** Quase sem cor, muito calmo. Serve interiores japandi, mobiliário e layouts editoriais.

- Barro rosado: #f4e9df
- Adobe: #d9a38a
- Tijolo: #b4644a
- Óxido: #7a3b2e
- Cacau: #3a1f19

**Estúdio de terracota.** Inclinada para o rosa e suave. Serve floristas, velas e marcas boémias.

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

**Terra escura.** Soturna e premium. Serve uísque, couro, equipamento de exterior e moda masculina.

- Osso: #f3ece2
- Camelo: #d9c3a5
- Oliva: #6b7046
- Azul-petróleo profundo: #2f5d62
- Casca: #3d2b1f

**Terra com um destaque.** Um azul-petróleo profundo anima o conjunto sem quebrar o ambiente.

## Como equilibrar uma paleta de cores terrosas

Os tons terrosos partilham uma saturação baixa, por isso a luminosidade tem de fazer o trabalho que a saturação costuma fazer. Se todas as tuas cores forem tons médios, o design fica plano e turvo. Distribui-as entre claro, médio e escuro e atribui-as depois com a [regra 60 30 10](https://gradiently.design/pt-pt/guide/60-30-10-rule).

| Papel | Peso | Exemplo do barro do deserto |
| --- | --- | --- |
| Base | 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 atribuída a papéis. O destaque ganha atenção porque há tão pouco dele.

> **Acrescenta uma nota mais viva** Um laranja queimado, uma mostarda ou um azul-petróleo profundo com saturação ligeiramente superior à das restantes dá ao olhar um sítio onde pousar. Sem isso, uma paleta terrosa pode parecer sonolenta.

### Erros comuns com tons terrosos

- **Cinco beges seguidos.** Cores com a mesma luminosidade fundem-se; mantém pelo menos uma muito clara e uma muito escura.
- **Texto preto puro.** Parece frio ao lado dos castanhos quentes. Usa antes expresso ou casca.
- **Misturar castanhos quentes e frios.** Uma terracota rosada ao lado de uma toupeira acinzentada parece acidental. Mantém os subtons coerentes.
- **Demasiados destaques.** Uma nota viva anima a paleta; três transformam-na numa paleta completamente diferente.

## Gradientes de tons terrosos

Os tons terrosos misturam-se com facilidade porque já têm saturações próximas, por isso o risco de um meio cinzento é pequeno. Mantém a fonte de luz suave e junta grão, que condiz com a sensação de material destas cores. Os [gradientes castanhos](https://gradiently.design/pt-pt/guide/brown-gradient) e os [gradientes beges](https://gradiently.design/pt-pt/guide/beige-gradient) aprofundam cada família.

- Do osso à 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 construídos a partir das paletas acima.

## Cores de texto sobre tons terrosos

O preto puro e o branco puro podem parecer duros ao lado de cores tão suaves. Usa um castanho muito escuro para texto sobre bases claras e um creme quente sobre as escuras; o branco ainda funciona sobre os tons médios mais profundos, como siena e oliva. As proporções usam a fórmula WCAG, em que 4,5:1 é o objetivo habitual para texto pequeno; o [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica-o.

| Fundo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| 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 |

A terracota e o ocre são mais claros do que parecem, por isso confirma com cuidado o texto branco sobre eles.

Uma publicação vertical para uma loja de cerâmica com letras castanho-escuras sobre um fundo quente do osso à terracota

Uma publicação de loja de cerâmica em barro do deserto, com texto castanho casca.

Uma publicação quadrada de torrefação de café com letras cor de areia sobre um fundo castanho de terra escura

Uma publicação de torrefação de café 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 do barro do deserto como propriedades personalizadas. O osso sobre ferrugem passa para o texto de botões; a casca sobre terracota só chega a cerca de 3,6:1, por isso limita-a a etiquetas grandes e a negrito.

As paletas terrosas cruzam-se com as [paletas de cores de outono](https://gradiently.design/pt-pt/guide/autumn-color-palettes), as [paletas de cores discretas](https://gradiently.design/pt-pt/guide/muted-color-palettes) e as [cores japandi](https://gradiently.design/pt-pt/guide/japandi-colors), por isso vai buscar a essas depois de teres uma base. Se queres um fundo terroso com material a sério, os Marks do Gradiently combinam cor com materiais, grão e luz, e o Designer pode compor publicações no teu Mark a partir de uma descrição curta.

## FAQ

### Que cores são tons terrosos?

Cores discretas e sobretudo quentes de materiais naturais: castanhos, beges, areia, terracota, ferrugem, ocre, oliva, salva, musgo e cinzentos quentes.

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

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

### Que cor fica bem com tons terrosos?

Um azul-petróleo profundo, um laranja queimado ou uma mostarda usados como pequeno destaque. O creme quente e o expresso escuro servem de extremos claro e escuro.

### Como evito que uma paleta de tons terrosos pareça apagada?

Distribui as cores por valores claros, médios e escuros e junta um destaque ligeiramente mais saturado, usado em cerca de um décimo do design.

### Os tons terrosos servem para branding?

Sim, para marcas que querem transmitir calma, naturalidade e confiança, como interiores, comida, bem-estar, ar livre e negócios artesanais.