Teoria das cores na prática: a regra 60-30-10

Uma dúvida comum de quem programa e precisa decidir cor sozinho: "quantas cores eu uso, e em que proporção?". Uma resposta prática e testada há décadas em design de interior e depois adotada em design de produto é a regra 60-30-10.

O que os números representam

60-30-10 é sobre proporção de área ocupada na tela — não sobre opacidade, não sobre intensidade, não sobre ordem de aparição. Três papéis, três faixas de cor:

• 60% — cor dominante: geralmente neutra (fundo, superfícies), a base de tudo.
• 30% — cor secundária: dá personalidade sem competir com a dominante (textos de destaque, ícones, bordas).
• 10% — cor de destaque: reservada pra ação mais importante da tela (botão primário, alerta, indicador ativo).

Repare que a cor de destaque é a que menos aparece — é justamente essa raridade que faz o olho ir direto nela quando ela aparece. Se você usar a cor de destaque em tudo (botões, títulos, ícones, bordas), ela deixa de significar "aja aqui" e vira só mais uma cor no meio das outras.

Por que cinco cores competindo cansa o olho

Cada cor nova numa tela é mais um "grupo" que o cérebro precisa categorizar (é o princípio de similaridade da Gestalt, que a lição 5 detalha: itens da mesma cor parecem pertencer ao mesmo grupo). Quando existem cinco cores fortes disputando atenção, o cérebro não consegue decidir qual é a principal — o resultado não é uma tela "vibrante", é uma tela onde nenhum elemento realmente se destaca, porque todos estão competindo pelo mesmo papel.

:root {
  --color-base: #0f172a;      /* 60% — dominante */
  --color-secundaria: #475569; /* 30% — secundária */
  --color-destaque: #22c55e;   /* 10% — destaque, só na ação principal */
}

Ponto de partida, não lei obrigatória

60-30-10 é uma regra geral pra quem está decidindo proporção de cor sem outra referência — não uma lei que toda tela precisa seguir à risca. Um dashboard de visualização de dados, por exemplo, pode precisar de mais de três cores pra diferenciar categorias em um gráfico, e isso é uma exceção legítima: o propósito ali (distinguir dados) justifica quebrar a proporção. O que a regra realmente ensina é o hábito de perguntar "essa cor tem um papel claro?" antes de adicionar mais uma.