Paletas de cores terrosas: códigos naturais para copiar

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.

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.

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.

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 e gradientes bege aprofundam cada família.

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 explica.

Paleta de cores terrosas como variáveis 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%);
}

Paletas terrosas se sobrepõem às paletas de cores de outono, às paletas de cores suaves e às cores japandi, 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.