Resumindo
- A regra 60 30 10 diz que um design equilibrado usa uma cor dominante em cerca de 60% do espaço, uma cor secundária em cerca de 30% e uma cor de destaque em cerca de 10%.
- A regra vem do design de interiores, onde paredes, móveis e acessórios se dividem naturalmente nesses três papéis.
- Nas telas, os 60% costumam ser o fundo, os 30% ficam com painéis, formas ou texto, e os 10% vão para a única coisa que você quer que as pessoas notem ou toquem.
- Num gradiente, a regra define quanto do campo cada cor ocupa, e por isso o destaque deve aparecer numa área pequena, não numa faixa inteira.
- Os números são um ponto de partida: os neutros podem contar como os 60%, e muitos designs fortes ficam mais perto de 70-25-5 ou 90-10.
Nesta página
A regra 60 30 10, normalmente escrita 60-30-10, é um guia simples de proporção de cores: use uma cor dominante em cerca de 60% do design, uma cor secundária em cerca de 30% e uma cor de destaque nos 10% restantes. Ela vem do design de interiores, onde paredes, móveis e acessórios assumem esses papéis por conta própria. Funciona igualmente bem em posts, slides, sites e paletas de marca, porque impede que todas as cores disputem a mesma atenção.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)O que cada parte faz
As três partes têm funções diferentes. Os 60% definem o clima e costumam ser calmos: um fundo, uma base, uma parede. Os 30% dão estrutura e contraste, com painéis, formas ou textos grandes. Os 10% são para onde o olhar vai primeiro, então pertencem à coisa mais importante: um botão, um preço, uma data, um logo.
| Parte | Papel | Cor típica | Onde vai |
|---|---|---|---|
| 60% | Dominante | Discreta: um neutro, um tom claro ou um escuro profundo | Fundos, áreas grandes, base da página |
| 30% | Secundária | Contrastante, mas sem gritar | Painéis, cards, textos grandes, áreas de imagem |
| 10% | Destaque | A cor mais saturada que você tem | Botões, preços, palavras-chave, formas pequenas |
A regra 60-30-10 num post de rede social
Num post, a cor dominante é o fundo, a secundária é o título ou uma forma atrás dele, e o destaque é um pequeno detalhe, como uma data, um preço ou uma única palavra sublinhada. O erro comum é dar o destaque ao título inteiro. Aí 30% do post grita, e nada se sobressai porque tudo se sobressai.
Campo dominante, texto secundário e o destaque reservado para a linha da data.
As mesmas proporções num slide largo. As partes se mantêm mesmo quando o formato muda.
Aplicando em slides e sites
Nos slides, defina os 60% uma vez, como fundo de todos os slides, e mantenha. Use os 30% para títulos, gráficos e molduras de imagem. Reserve os 10% para o único número ou palavra por slide que o público precisa lembrar. O guia de fundos para apresentações vai além, com bases que não brigam com o conteúdo.
Num site, o fundo da página e as seções grandes são os 60%, a navegação, os cards, os rodapés e o texto corrido são os 30%, e os 10% vão para os botões de ação e os links. Se o seu botão principal tem a mesma cor dos títulos, a página fica sem destaque para orientar as pessoas.
:root {
--dominant: #f3efe6; /* 60%: page and section backgrounds */
--secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
--accent: #e76f51; /* 10%: buttons, links, key numbers */
}
body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }Numa marca, escreva as partes no seu guia de estilo da marca, ao lado dos códigos hex. Uma paleta sem proporções convida cada designer a escolher a cor favorita para o fundo, e em um mês a marca parece três marcas.
A regra 60 30 10 num gradiente
Os gradientes quebram as proporções com facilidade, porque uma mistura uniforme dá a cada cor a mesma parte. Aplique a regra movendo as paradas: deixe a cor dominante ocupar a maior parte do campo, misture com a secundária ao longo de um terço e traga o destaque só numa borda ou num pequeno brilho.
Quando flexibilizar ou quebrar a regra
Quebre quando
- Você trabalha com um só matiz: um esquema monocromático se aproxima mais do 60-30-10 em luminosidade do que em matiz
- O design é sobretudo texto sobre um neutro, onde 90-10 fica mais limpo
- Uma foto traz a própria cor e a sua paleta só a emoldura
- A cor da marca precisa dominar, como num pôster todo no vermelho da marca
Mantenha quando
- As cores começam a competir e nada se destaca
- Uma equipe divide uma paleta e precisa de uma regra para seguir
- Você tem três ou mais cores fortes para equilibrar
- Botões e números importantes estão se perdendo
Os números são aproximados. O espaço em branco conta. Neutros como off-white, grafite e areia podem ser os seus 60%, com duas cores de verdade dividindo o resto. O que importa é a ordem: um líder claro, um apoio, um destaque raro. Para escolher as cores em si, veja como escolher as cores da marca e o básico da teoria das cores.
Perguntas frequentes
O que é a regra 60 30 10?
É um guia de proporção de cores: cerca de 60% do design numa cor dominante, 30% numa cor secundária e 10% numa cor de destaque.
De onde vem a regra 60-30-10?
É uma regra prática antiga do design de interiores, onde paredes, móveis e acessórios ocupam naturalmente as três partes.
O branco conta na regra 60 30 10?
Conta. Neutros como branco, off-white, areia ou grafite costumam formar os 60% dominantes, deixando os 30% e os 10% para as cores de verdade.
Que cor deve ter o destaque de 10%?
Em geral a sua cor mais saturada, usada na única coisa que você quer que seja notada primeiro, como um botão, um preço ou uma data.
Como uso a regra 60-30-10 num gradiente?
Mova as paradas de cor para que a cor dominante cubra a maior parte do campo, a secundária se misture ao longo de cerca de um terço e o destaque apareça só numa área pequena ou numa borda.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
