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

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.

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.

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.

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

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

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

As paletas terrosas cruzam-se com as paletas de cores de outono, as paletas de cores discretas e as cores japandi, 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.