Quantas cores usar em uma paleta

Para a maioria dos designs, três cores bastam: um neutro para o fundo, uma cor principal e uma cor de destaque. Dá para chegar a cinco ou seis com tons de apoio, e passar disso só vale a pena em casos específicos, como gráficos com várias categorias. Não existe um número mágico aprovado por estudo. O que existe é uma regra prática: cada cor precisa ter uma função que as outras não cumprem.

A conta que funciona na prática

Em vez de perguntar “quantas cores?”, pergunte “quantos papéis?”. Um design comum tem quatro: fundo, texto, cor principal (a que dá identidade, em títulos, faixas e elementos grandes) e cor de destaque (a que chama o olho para uma ação, como um botão ou um preço). A explicação de cada papel está em como montar a paleta de um site.

Fundo e texto costumam ser neutros. Por isso, na linguagem do dia a dia, essa paleta é “de duas cores” ou “de três cores”. Quando alguém diz que um site usa só azul e laranja, geralmente é isso.

Variações da mesma cor, como um azul mais claro para o fundo de um cartão, não contam como cor nova. Contam como tom de apoio. Mas ficam sujeitas ao mesmo cuidado: se cada uma ganhar uma função, ótimo. Se forem decoração solta, corte.

Três cores para uma artesã de cadernos

Vamos montar a paleta de um perfil de uma artesã que vende cadernos feitos à mão. Chamaremos de “Azul-noite e coral”.

1. Fundo: um creme, #F4F1DE. Lembra papel.
2. Texto e cor principal: o mesmo azul-noite, #1F2A44. Usar a mesma cor nos dois papéis economiza uma cor e dá firmeza.
3. Destaque: um coral, #E07A5F, só no botão “Encomendar” e em um sublinhado.

Pronto: três cores, quatro papéis. Calculei as razões de contraste pela fórmula da WCAG, o padrão de acessibilidade do W3C, que pede 4,5:1 para texto normal e 3:1 para texto grande:

Combinação	Razão	Uso
#1F2A44 sobre #F4F1DE	12,55:1	texto, passa com folga
#1F2A44 sobre #E07A5F	4,83:1	texto escuro dentro do botão coral, passa
#E07A5F sobre #F4F1DE	2,60:1	não serve para texto sobre o creme

Esse último número ensina uma lição prática. Como o coral tem contraste fraco com o creme, ele não pode ser a cor de uma frase solta. O jeito certo de usá-lo é como fundo do botão, com o texto azul-noite dentro. Uma paleta pequena força boas decisões desse tipo.

Quando passar de três cores

Há situações em que mais cores fazem sentido:

• Marcas com linhas de produto. Cada linha pode ter sua cor, desde que haja um padrão claro. Mesmo assim, o conjunto ganha com um neutro em comum.
• Interfaces com estados. Um sistema precisa de cores para erro, sucesso e aviso. Elas são cores funcionais, e não de decoração. Como não se deve passar informação só pela cor, a WCAG exige (critério 1.4.1, nível A) que a cor não seja o único meio de passar uma informação: acrescente texto, forma ou padrão.
• Ilustrações e materiais infantis. Aqui a variedade faz parte da proposta.
• Gráficos com categorias. É o caso mais comum, e tem uma regra própria, a seguir.

E nos gráficos?

Em gráficos, cada categoria precisa de uma cor distinta. O guia de visualização de dados do Datawrapper, redigido por Lisa Charlotte Muth, sugere evitar mais de sete cores numa paleta de categorias. Quando há mais categorias, a saída é agrupar algumas ou trocar o tipo de gráfico. O guia também recomenda usar cinza para o que é contexto e reservar cor para o que se quer destacar. Veja mais em cores para gráficos que se leem bem.

Erros de quem conta cores demais

Colocar uma cor para cada ideia. Um site de cinco seções não precisa de cinco cores. A seção se distingue pelo título, não pelo fundo.

Tratar o branco e o preto como “sem cor” e esquecer deles na conta. Neutros também mandam no clima do design. Um bege quente e um cinza frio mudam o conjunto inteiro. Escolha o neutro com o mesmo cuidado das outras cores.

Duas cores fortes com o mesmo peso. Quando o destaque e a cor principal têm a mesma intensidade, nenhuma se destaca. Dê a uma delas a área grande e à outra a área pequena. A regra 60-30-10 é uma forma simples de dividir essa proporção.

Criar tons novos a cada peça. Se um post usa #E07A5F e o seguinte usa um coral parecido tirado de memória, o conjunto perde coesão. Anote os códigos HEX (os códigos de seis caracteres que identificam cada cor) e use sempre os mesmos.

Teste de corte: desligue uma cor de cada vez

Pegue seu design e faça este exercício: desligue uma cor de cada vez, trocando-a por um tom neutro, e veja se algo se perdeu. Se nada se perdeu, a cor era supérflua. Se a mensagem ficou menos clara, a cor tem função e fica.

Repita até que cada cor remanescente seja necessária. O que sobrar é a sua paleta.

O teste de corte numa loja de plantas

Pense numa loja de plantas com um perfil de rede social que usa seis cores: verde-escuro, verde-claro, rosa, amarelo, azul e cinza. Faça o teste.

• Troque o azul por cinza. Nada muda, porque ele só aparecia num ícone. Corte.
• Troque o amarelo por cinza. O preço perde destaque, então o amarelo tem função. Fica.
• Troque o rosa por cinza. O post continua claro. Corte.

Sobram verde-escuro, verde-claro, amarelo e cinza. Quatro cores, cada uma com tarefa: verde-escuro para título, verde-claro para fundo de cartão, amarelo para preço, cinza para texto de apoio. O perfil ficou mais fácil de reconhecer, porque quem passa o dedo pelo feed associa “verde com amarelo” à loja.

Cores e tons: como contar

Uma dúvida frequente é se um azul claro e um azul escuro contam como uma cor ou duas. Na prática, contam como uma cor com dois tons. A conta que importa é a do olhar: se a pessoa percebe “o azul” e “o laranja”, são duas cores. Se percebe “o azul, o azul claro, o laranja, o laranja queimado”, você passou de duas para quatro, e a paleta pede mais disciplina. Escreva os tons com nome (por exemplo, “azul base” e “azul suave”) para não criar um tom novo toda vez que abrir o editor.

Para aplicar o resultado num logotipo, siga o guia de paleta de um logo.