No design de interfaces digitais, uma técnica simples, mas extremamente eficaz, para organizar as cores é a regra 60-30-10. Originalmente usada na arquitetura e no design de interiores, ela também funciona muito bem no desenvolvimento de produtos digitais — como sites e apps.
O que é a regra 60-30-10?
Essa regra define uma proporção para três cores principais em uma interface:
- 60 %: cor dominante — a cor que mais aparece no layout.
- 30 %: cor secundária — usada para dar contraste e complementar a cor dominante.
- 10 %: cor de destaque — usada nos elementos mais importantes, como botões, links, ícones.
Esses valores não precisam ser exatos, mas servem como guia para dar uma ideia de equilíbrio entre as cores mais usadas.
Por que usar essa regra no UI Design?
- Mesmo que não se meça exatamente 60% de uma cor numa tela, a ideia é estabelecer uma hierarquia clara visualmente.
- Ela ajuda a definir quais cores terão mais presença na interface e quais serão usadas apenas para chamar atenção.
- Facilita manter a identidade visual da marca, especialmente se você já tem uma paleta de cores definida (ou parte dela).
Como aplicar na prática
- Escolha a cor dominante (60%)
Pode ser uma cor neutra, como branco, cinza claro ou outra cor suave. Essa cor vai cobrir grande parte do layout. - Defina a cor secundária (30%)
Essa cor deve contrastar bem com a dominante, mas sem brigar com ela. É usada em seções, cards, elementos menos urgentes, mas importantes. - Determine a cor de destaque (10%)
Essa cor é usada para os elementos que você quer que se destaquem: botões, ícones, chamadas para ação, links. É uma cor que normalmente remete à identidade da marca. - Trabalhe com outras variações
- Mesmo usando essa regra, é comum ter tons de cinza para textos e backgrounds: esses tons “extras” não precisam se encaixar nas porcentagens da regra 60-30-10.
- Em interfaces com modo claro e escuro, você pode adaptar esse esquema para manter a harmonia nas duas versões.
- Faça protótipos e wireframes
No wireframe, já pense onde cada cor vai entrar (áreas de fundo, botões, destaques). Depois, no protótipo de alta fidelidade, aplique a regra para testar se o equilíbrio está bom — pode ajustar um pouco conforme o projeto exige.
Exemplo prático
No artigo da Alura, é citado um exemplo fictício:
- 60% pode ser branco como cor de fundo.
- 30% pode ser um amarelo (como
#FFCB47) para as seções secundárias. - 10% pode ser um verde (
#8DCE97) para botões ou ícones — se essa for a cor da marca.
Ainda segundo o artigo, escalas de cinza para textos são totalmente válidas, e não precisam entrar no “cálculo” desses 60-30-10.
Vantagens para o seu trabalho
- Ajuda a construir uma identidade visual consistente e equilibrada.
- Facilita o fluxo de design, porque você já sabe quanto “peso” cada cor deve ter em diferentes elementos.
- Melhora a usabilidade, já que os elementos de destaque (10%) chamam a atenção sem exagero.
- Permite escalar para diferentes telas mantendo harmonia (por exemplo, no design responsivo).
Créditos: inspirado no artigo “Regra 60-30-10 em UI Design” por Mateus Villain, da Alura.
Link original: https://www.alura.com.br/artigos/regra-60-30-10-ui-design
