Você já passou horas escolhendo cores para um site, mas o resultado final parecia desorganizado, cansativo ou até amador? Esse é um dos maiores desafios de quem trabalha com design web. A boa notícia é que existe uma técnica simples, usada por profissionais de WordPress e Elementor, que resolve esse problema: a regra 60/30/10.
Originalmente vinda do design de interiores, essa proporção se adapta perfeitamente ao mundo digital. Ela dá um norte claro para equilibrar cores dominantes, secundárias e de destaque. Neste artigo, vou te mostrar como aplicá-la em projetos reais, com exemplos práticos e dicas de ferramentas como Figma e Elementor.
Prepare-se para transformar seus layouts de uma vez por todas.
O que é a Regra 60/30/10 e Por Que Ela Funciona?
A regra 60/30/10 é um princípio de equilíbrio cromático que divide o uso das cores em três categorias com proporções fixas:
- 60% — Cor Dominante: Geralmente neutra (branco, cinza, preto, bege). É a base do design, usada em fundos, espaços amplos e áreas de respiro.
- 30% — Cor Secundária: Complementa a dominante. Pode ser um tom mais vibrante ou um neutro contrastante. Aparece em menus, cards, botões secundários.
- 10% — Cor de Destaque (Accent): A cor mais forte e contrastante. Usada com moderação: CTAs, links, ícones importantes, badges.
Por que não usar 3 cores iguais?
Distribuir as cores igualmente (33% cada) gera competição visual. O usuário não sabe para onde olhar, e o design parece poluído. A regra 60/30/10 resolve isso estabelecendo uma hierarquia clara.
Psicologia das Cores na Prática (com Exemplos)
A escolha das cores não é aleatória. Cada tom evoca emoções específicas. Veja como aplicar a regra com psicologia:
| Função | Cor Sugerida | Psicologia | Exemplo de Uso |
|---|---|---|---|
| Dominante (60%) | Branco, Off-white | Clareza, foco, minimalismo | Fundo de páginas, áreas de texto |
| Secundária (30%) | Azul escuro, Cinza | Confiança, estabilidade, profissionalismo | Sidebar, cabeçalho, rodapé |
| Destaque (10%) | Laranja, Verde limão | Urgência, ação, otimismo | Botão “Comprar”, links, notificações |
Exemplo real: Em um site de cursos online, usamos 60% de branco (fundo), 30% de azul marinho (menus e títulos) e 10% de laranja vibrante (CTA de matrícula). A taxa de cliques aumentou 23%.
Como Aplicar a Regra no WordPress e Elementor
Agora que você entende a teoria, vamos à prática. Se você usa WordPress com Elementor, o processo é direto.
Passo a passo no Elementor
- Defina as cores no Kit Global: Vá em Elementor > Kit Global > Cores. Crie três paletas: Primária (60%), Secundária (30%) e Terciária (10%). Nomeie-as claramente.
- Aplique a cor dominante (60%): No estilo do site, use a cor Primária como fundo geral (body).
- Use a secundária (30%): Aplique a cor Secundária em containers, seções de destaque, cabeçalhos e rodapés.
- Reserve a terciária (10%): Configure botões, links e ícones com a cor Terciária. Nunca a use em áreas grandes.
Dica extra para quem usa Crocoblock ou JetEngine
Se você trabalha com sites dinâmicos usando Crocoblock ou JetEngine, a regra 60/30/10 é ainda mais crucial. Em meta campos, listas dinâmicas e grids, a cor de destaque (10%) deve ser usada apenas para informações críticas: preços, status (disponível/indisponível), links de ação. Evite colorir campos inteiros.
Erros Comuns (e Como Evitá-los)
Mesmo designers experientes escorregam. Veja os erros mais frequentes:
- Usar a cor de destaque em excesso: Se o botão de CTA e o fundo de um card usam a mesma cor vibrante, o contraste se perde. Lembre-se: 10% é o limite.
- Ignorar acessibilidade: Uma cor de destaque muito clara sobre fundo claro pode falhar no contraste. Teste com ferramentas como o WebAIM Contrast Checker.
- Escolher cores que não conversam: A tríade (dominante, secundária, destaque) precisa ter harmonia. Use um círculo cromático ou paletas prontas do Figma.
Exemplos Práticos de Sites Brasileiros
Vamos a aplicações reais que você pode adaptar:
Exemplo 1: Landing Page de Curso Online
- 60%: Branco (#FFFFFF) — fundo da página
- 30%: Azul petróleo (#1A3A4A) — faixa de depoimentos, rodapé
- 10%: Amarelo mostarda (#E8B830) — botão “Inscreva-se”, estrelas de avaliação
Exemplo 2: Site de Portfólio (Fotógrafo)
- 60%: Cinza claro (#F4F4F4) — fundo
- 30%: Preto suave (#2C2C2C) — tipografia, navegação
- 10%: Dourado (#C9A96E) — bordas de imagens, ícones de contato
Perceba como a cor de destaque (10%) aparece apenas em elementos que merecem atenção imediata. O restante do design respira.
Ferramentas para Criar Sua Paleta 60/30/10
Se você não quer começar do zero, use estas ferramentas:
- Coolors: Gere paletas e veja a proporção automaticamente.
- Figma: Crie estilos globais e teste a regra em protótipos.
- Elementor: Use o recurso de cores globais e veja a prévia ao vivo.
Conclusão: Sua Vez de Aplicar
A regra 60/30/10 não é um bicho de sete cabeças. É um atalho inteligente para qualquer projeto de design web. Seja você um iniciante montando seu primeiro site no WordPress ou um profissional experiente usando Elementor e JetEngine, essa técnica vai economizar horas de ajustes e entregar resultados mais profissionais.
Comece hoje: pegue um projeto que você está desenvolvendo, identifique as três cores principais e ajuste as proporções. Teste com usuários ou apenas observe como a hierarquia visual melhora.
Quer levar seu design ao próximo nível? Compartilhe nos comentários qual será sua primeira paleta 60/30/10. Vou adorar ver suas criações!
