Cores neutras: como escolher e combinar

Cores neutras são as que quase não têm cor: branco, preto, cinza, bege, creme, marrom-escuro. Para combiná-las, escolha uma temperatura (quentes ou frias) e fique nela, usando de quatro a cinco tons em degraus de claridade: um para fundo, um para linhas e cartões, um para texto de apoio, um para texto principal. Depois, deixe uma cor viva por cima fazer o destaque. Os neutros sustentam o design, e a cor chama a atenção.

O que torna um neutro quente ou frio

Um cinza “puro” tem a mesma quantidade de vermelho, verde e azul. Na prática, quase todo cinza bonito tem uma pitada de cor. Um cinza com um pouco de azul parece frio e técnico. Um cinza com um pouco de amarelo ou vermelho parece quente e acolhedor. Isso se chama subtom: a cor discreta que mora dentro do neutro.

Por que importa? Porque o olho percebe o subtom quando dois neutros ficam lado a lado. Um bege quente ao lado de um cinza frio parece sujo, como se um dos dois estivesse errado. Dois neutros com o mesmo subtom parecem feitos um para o outro.

O guia de visualização de dados do Datawrapper traz uma dica na mesma linha: como o cinza pode parecer frio, use-o com um toque de cor, por exemplo um cinza quente (cinza com amarelo, laranja ou vermelho). Vale também para um design comum.

Uma escala de cinco neutros quentes para uma papelaria

Vamos montar uma escala de neutros quentes para o site de uma papelaria de bairro, a “Neutros quentes”. Cada código HEX (o código de seis caracteres que representa a cor) pode ser testado no editor do Tom a Tom.

1. Fundo: #FAF7F2, um branco com leve toque de creme. É mais quente que o branco puro e já dá personalidade ao fundo.
2. Cartões e linhas: #E5DED3, um bege-areia, um degrau mais escuro que o fundo.
3. Texto de apoio: #9C948A, um cinza-pedra para legendas e dados menos importantes.
4. Texto principal: #4A443D, um marrom-carvão para os parágrafos.
5. Títulos e contornos fortes: #1E1B18, quase preto, mas com calor.

Todos os cinco têm subtom quente (puxam para o amarelo-marrom), e a distância de claridade entre eles é bem visível. É isso que permite um design de uma cor só, em que a hierarquia vem do degrau do neutro.

Confira se o texto se lê

Aqui entra o contraste, que é a diferença de claridade entre texto e fundo, medida em uma razão (1:1 é nenhuma diferença, 21:1 é preto sobre branco). A WCAG, o conjunto de diretrizes de acessibilidade do W3C, pede no mínimo 4,5:1 para texto normal e 3:1 para texto grande, no nível AA (a versão 2.2, de outubro de 2023, manteve esses valores). Calculei os números da nossa escala:

Combinação	Razão	Pode ser usado em
#1E1B18 sobre #FAF7F2	16,04:1	títulos e texto longo
#4A443D sobre #FAF7F2	8,99:1	parágrafos
#4A443D sobre #E5DED3	7,19:1	texto dentro de cartões
#9C948A sobre #FAF7F2	2,80:1	não passa nem como texto grande
#E5DED3 sobre #FAF7F2	1,25:1	só como divisória sutil

A conclusão é prática. O cinza-pedra #9C948A, tão charmoso, não serve para texto, nem o pequeno nem o grande. Ele existe aqui para elementos decorativos, como um ícone sem função ou uma linha. Para legenda, escureça: use o #4A443D, ou um tom intermediário que você ajuste até passar de 4,5:1.

Esse é o erro mais frequente com neutros: o cinza claro “elegante” que ninguém consegue ler. A elegância se mantém com o carvão.

Como combinar neutros com uma cor viva

Com a escala pronta, a cor viva entra pontualmente. Alguns caminhos que funcionam:

• Neutros quentes com terracota, mostarda ou verde-oliva. Tons terrosos combinam entre si porque dividem o subtom.
• Neutros quentes com azul-petróleo. O azul faz contraste de temperatura e dá clareza ao conjunto.
• Neutros frios com uma cor quente. Um cinza azulado com laranja queimado chama a atenção para o laranja.

Para conferir proporções, a regra 60-30-10 ajuda: 60% de neutro dominante, 30% de neutro ou cor de apoio, 10% de cor viva. É uma regra de bolso, não uma lei.

Enganos que deixam a escala de neutros desencontrada

Misturar subtons. Bege quente com cinza azulado e branco puro, tudo na mesma página, parece desencontrado. Escolha uma temperatura e, se quiser contrastá-la, faça isso de propósito, com a cor viva.

Usar preto puro para tudo. O #000000 sobre branco é o contraste máximo, 21:1, e na prática muita gente acha duro em textos longos. Um quase-preto como #1E1B18 mantém a leitura firme e fica mais suave.

Achar que neutro é sem graça. Uma paleta toda neutra é uma escolha de estilo, e pode ser bonita em uma loja de cerâmica ou num consultório. O truque é variar a textura (foto, papel, tecido) e a escala de claridade.

Não reservar um neutro escuro. Quem só tem neutros claros não consegue fazer texto. Garanta pelo menos um tom escuro na escala.

Neutros fora da tela

O raciocínio é o mesmo na casa e na roupa. Um sofá bege e uma parede cinza fria podem brigar. Se quiser aplicar em ambientes, veja como escolher as cores de uma sala. Para uma paleta de site completa, com fundo, texto, ação e apoio, siga como montar a paleta de cores de um site.

Como achar o subtom de um neutro que você já tem

Se você já tem uma cor de marca ou um móvel e quer neutros que combinem, faça assim:

1. Coloque o neutro ao lado de uma folha de papel branco. O contraste com o branco faz o subtom aparecer.
2. Pergunte se ele puxa para o amarelo, o vermelho, o verde ou o azul.
3. Escolha os outros neutros que puxam para o mesmo lado.

No editor, a ideia é a mesma. Digite o HEX, compare com #FFFFFF e observe para que lado ele pende. Um neutro com subtom verde-oliva, por exemplo, pede companheiros terrosos. Um neutro com subtom azulado pede cinzas frios e brancos limpos.

Esse hábito de olhar o subtom economiza tentativas. Em vez de testar vinte beges, você já elimina os que pendem para o lado errado.