A Regra 60-30-10: Equilibrar a Cor no Design

A primeira vez que a regra 60-30-10 fez mesmo "clique" na minha cabeça foi a olhar para um dashboard que eu tinha construído e que parecia atarefado de uma forma que não conseguia explicar. A paleta estava bem. As cores eram harmoniosas, tiradas diretamente da roda. Mas o ecrã sentia-se ruidoso, como se toda a gente na sala estivesse a falar ao mesmo tempo. O problema não era quais cores eu tinha escolhido. Era quanto de cada uma tinha usado.

Essa distinção é todo o cerne da regra 60-30-10. Diz quase nada sobre tonalidade e quase tudo sobre proporção: cerca de 60% do seu design é uma cor dominante, 30% é uma cor secundária de apoio e 10% é um destaque. Acerte nesses rácios e até uma paleta medíocre se lê como intencional. Erre neles e a harmonia mais cuidadosamente afinada continua a sentir-se caótica.

De onde vem a regra

A regra 60-30-10 foi pedida emprestada ao design de interiores, onde os decoradores a usam há décadas para equilibrar uma divisão. A repartição clássica: 60% vai para as paredes, cerca de 30% para os estofos e os móveis maiores, e os últimos 10% para os acessórios — uma almofada, um vaso, a arte na parede. Entre-se numa sala bem desenhada e normalmente não se consegue articular porque é que parece calma, mas as proporções estão a fazer um trabalho silencioso em segundo plano.

Os estilistas de moda usam a mesma lógica (fato, camisa, lenço de bolso) e, algalgures pelo caminho, ela migrou para o design gráfico e web. O meio mudou; o princípio não. Dá-se a cada cor um papel definido e uma quantidade de espaço definida, e o equilíbrio segue quase automaticamente.

Como se mapeia no design de UI e web

Eis a tradução que efetivamente uso quando me sento para construir uma interface.

• 60% — a cor dominante. Esta é a sua tela: fundos de página, superfícies grandes, o espaço vazio sobre o qual o seu conteúdo assenta. Define o ambiente geral e, crucialmente, é normalmente a cor que as pessoas não notam. Na maioria das boas interfaces a dominante é um neutro — um branco, branco-sujo, cinzento-claro, ou no modo escuro um quase-preto como #0F1115. Os neutros são dominantes porque são generosos; deixam as outras cores carregar a personalidade sem lutar com elas.
• 30% — a cor secundária. Este é o elenco de apoio: cartões, barras laterais, barras de navegação, separadores de secção, superfícies secundárias. Fornece estrutura e uma segunda camada de contraste contra a dominante, mas nunca exige atenção. Pense nela como os móveis da sala.
• 10% — a cor de destaque. É aqui que a ação vive: botões primários, links, estados ativos, badges, a única série de um gráfico que quer que as pessoas sigam. É a almofada decorativa. Toda a razão pela qual funciona é a escassez.

Esse último ponto é o que a maioria das pessoas não capta, por isso deixe-me dizê-lo com clareza. O destaque não é poderoso por causa da cor. É poderoso porque há tão pouco dele. Quando o seu azul aparece apenas no botão primário e no item de navegação ativo, o olho de um utilizador aprende em cerca de dois segundos que azul significa agir aqui. No momento em que o azul também aparece em títulos, ícones, três contornos de cartão e um gradiente de fundo, deixa de significar fosse o que for. Gastou o sinal.

Um exemplo trabalhado

Deixe-me construir um real para que as proporções não sejam abstratas. Digamos que estou a desenhar um dashboard de SaaS e abro o gerador de paletas de cores, escolho um azul calmo como base e uso as harmonias monocromática e complementar para puxar tons de apoio.

• Dominante (60%): #F7F8FA, um cinzento frio quase-branco. É o fundo da página e o espaço vazio dentro dos cartões. Mal se repara nele, o que é exatamente certo.
• Secundária (30%): #1E293B, um ardósia profundo. Carrega a navegação de topo, a barra lateral, os títulos e o texto de corpo. Repare que "secundária" não tem de ser uma cor viva — aqui é um neutro escuro a fazer trabalho estrutural pesado. Em conjunto com a dominante já é uma interface completa e utilizável.
• Destaque (10%): #2563EB, um azul confiante, reservado ao CTA primário, aos links e ao estado de menu ativo. Mais nada o recebe.

Passe esse azul por um verificador de contraste face ao fundo branco e fica confortavelmente acima do limiar AA das WCAG de 4.5:1 para texto normal — vale a pena confirmar, porque um destaque que falha o contraste é um destaque que falha a sua única função. (Mais sobre isto em Rácios de Contraste WCAG Explicados.) O verificador incorporado na ferramenta vai assinalar-lho antes de o lançar.

O que mais impressiona as pessoas nesta paleta é o quão pouca cor ela na verdade contém. Dois neutros e um azul. É a regra 60-30-10 a funcionar como pretendido — a contenção lê-se como polimento.

Porque a proporção vence a escolha de tonalidade

Vou fazer uma afirmação ligeiramente contracorrente: para uma interface, acertar nas proporções importa mais do que acertar nas tonalidades exatas. Pode trocar o meu destaque #2563EB por um verde-azulado, um violeta ou um coral quente e o design continuará a parecer composto, porque a estrutura aguenta. Mas pegue numa paleta de três cores lindamente escolhida e perfeitamente harmoniosa e aplique-a em terços iguais, e parecerá um sinal de estacionamento.

Isto é libertador uma vez que se interioriza. Significa que um principiante não precisa de um olho perfeito para a cor — precisa de disciplina sobre quanto de cada cor mobilizar. Escolha qualquer harmonia sólida (análoga e complementar dividida são ambas pontos de partida tolerantes; veja Compreender a Harmonia de Cor no Design de UI para saber como escolher), depois atribua papéis e racione o destaque sem dó.

O Nielsen Norman Group faz um ponto relacionado no seu trabalho sobre usar a cor para melhorar o design: a cor carrega melhor o significado quando é usada com parcimónia e consistência. A divisão 60-30-10 é, no fundo, uma receita prática para essa parcimónia.

Os erros que vejo com mais frequência

Sem dominante clara. Este é o problema do dashboard com que abri. Três cores com peso quase igual, nenhuma delas claramente a tela, e o olho não tem onde descansar. Solução: escolha uma cor (normalmente um neutro) e comprometa-a a cerca de 60% da superfície antes de colocar fosse o que for.

Uso excessivo do destaque. A falha mais comum por larga margem. O destaque infiltra-se nos títulos, depois nos ícones, depois em alguns contornos, e numa tarde o design fica sem ponto focal. Uma verificação de instinto útil: se consegue apontar rapidamente para mais do que um punhado de sítios distintos onde o seu destaque aparece num dado ecrã, provavelmente gastou-o de mais. Recolha-o para os verdadeiros momentos interativos.

Tratar os números como evangelho. São um rácio, não uma medição. Ninguém anda a contar pixels. 60-30-10 é uma forma abreviada de "um dominante, um de apoio, um raro". Se a sua divisão ficar mais perto de 70-20-10, tudo bem. É a hierarquia que importa, não a casa decimal.

Esquecer que a regra escala recursivamente. Dentro de um único cartão pode correr as mesmas proporções outra vez — sobretudo superfície, algum detalhe estrutural, um toque de destaque. E a regra viaja para o modo escuro de forma limpa: os seus 60% passam simplesmente a ser um neutro escuro em vez de um claro, com destaques que muitas vezes precisam de uma ligeira dessaturação para evitar o brilho. Se vai por aí, Boas Práticas para Paletas de Cor em Modo Escuro escava os ajustes.

Transformá-la num método repetível

Eis o fluxo de trabalho que entregaria a um designer júnior.

• Escolha primeiro uma harmonia. Abra a roda de cores, escolha uma tonalidade base e gere um conjunto relacionado — análoga para calma, complementar para impacto. Não pense demais nos hexes exatos por agora.
• Atribua a dominante. Decida os seus 60%. Nove em cada dez vezes é um neutro. Claro por defeito, escuro para o modo escuro.
• Atribua a secundária. Escolha os 30% que dão estrutura — muitas vezes um segundo neutro ou uma versão esbatida da sua cor de marca. Confirme que dominante e secundária sozinhas formam um layout funcional.
• Racione o destaque. Puxe uma cor viva para os 10%. Verifique o seu contraste face às superfícies que vai tocar. Depois guarde-a — sempre que sentir a tentação de a reutilizar, pergunte se esse elemento é genuinamente interativo.
• Audite semicerrando os olhos. Recue, desfoque o olhar e olhe para o ecrã. Deve ver um campo calmo com um ou dois pontos brilhantes a puxar o seu olhar. Se a coisa toda cintila, o seu destaque vazou.

A razão pela qual esta regra sobreviveu a um salto das salas de estar para os dashboards é que resolve um problema que as pessoas sentem antes de o conseguirem nomear. A cor num design não é, na verdade, sobre gosto — é sobre orçamento. A regra 60-30-10 é apenas uma forma sensata de o gastar. Se quiser testar à pressão um conjunto de tonalidades antes de avançar, coloque-as no gerador de paletas de cores, verifique o contraste, e depois faça a pergunta mais difícil que a ferramenta não pode responder por si: não serão estas as cores certas, mas quanto de cada uma estou prestes a usar.