A versão curta
- 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, mobiliário e acessórios se dividem naturalmente nesses três papéis.
- Nos ecrãs, 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 queres que as pessoas notem ou toquem.
- Num gradiente, a regra decide a área que cada cor ocupa, e é por isso que o destaque deve aparecer numa zona pequena e não numa faixa inteira.
- Os números são um ponto de partida: os neutros podem contar como os 60%, e muitos bons designs aproximam-se de 70-25-5 ou de 90-10.
Nesta página
A regra 60 30 10, normalmente escrita 60-30-10, é um guia simples para a proporção das cores: usa uma cor dominante em cerca de 60% de um design, uma cor secundária em cerca de 30% e uma cor de destaque nos últimos 10%. Vem do design de interiores, onde paredes, móveis e acessórios assumem esses papéis por si. Funciona igualmente bem em publicações para redes sociais, diapositivos, 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 faz cada parcela
As três parcelas têm funções diferentes. Os 60% definem o ambiente e costumam ser calmos: um fundo, uma base, uma parede. Os 30% dão estrutura e contraste, com painéis, formas ou texto grande. Os 10% são para onde o olhar vai primeiro, por isso pertencem à coisa mais importante: um botão, um preço, uma data, um logótipo.
| Parcela | Função | Cor típica | Onde vai |
|---|---|---|---|
| 60% | Dominante | Discreta: um neutro, um tom claro ou um escuro profundo | Fundos, grandes áreas, base da página |
| 30% | Secundária | Contrastante, mas sem gritar | Painéis, cartões, texto grande, áreas de imagem |
| 10% | Destaque | A cor mais saturada que tens | Botões, preços, palavras-chave, formas pequenas |
A regra 60-30-10 numa publicação social
Numa publicação, a cor dominante é o fundo, a secundária é o título ou uma forma atrás dele, e o destaque é um pequeno pormenor, como uma data, um preço ou uma só palavra sublinhada. O erro comum é dar o destaque ao título inteiro. Assim, 30% da publicação grita e nada se destaca, porque tudo se destaca.
Fundo dominante, texto secundário e o destaque guardado para a linha da data.
As mesmas proporções num diapositivo panorâmico. As parcelas mantêm-se mesmo quando a forma muda.
Aplicá-la a diapositivos e sites
Nos diapositivos, define os 60% uma só vez, como fundo de todos os diapositivos, e mantém-nos. Usa os 30% para títulos, gráficos e molduras de imagem. Reserva os 10% para o número ou a palavra de cada diapositivo que o público tem de fixar. Fundos para apresentações aprofunda os fundos que não lutam com o conteúdo.
Num site, o fundo da página e as secções grandes são os 60%, a navegação, os cartões, os rodapés e o texto corrente são os 30%, e os 10% vão para os apelos à ação e as ligações. Se o teu 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, escreve as parcelas no teu guia de estilo da marca, ao lado dos códigos hex. Uma paleta sem proporções convida cada designer a escolher a sua cor preferida para o fundo, e ao fim de 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 todas as cores a mesma parcela. Aplica a regra movendo as paragens: deixa a cor dominante ocupar a maior parte da área, mistura-a com a secundária ao longo de um terço e só traz o destaque num extremo ou num pequeno brilho.
Quando dobrar ou quebrar a regra
Quebra-a quando
- Trabalhas com um só tom: um esquema monocromático aproxima-se mais de 60-30-10 na luminosidade do que no tom
- O design é sobretudo texto sobre um neutro, onde 90-10 fica mais limpo
- Uma fotografia traz a sua própria cor e a tua paleta apenas a enquadra
- A cor da marca tem de dominar, como num cartaz todo em vermelho da marca
Mantém-na quando
- As cores começam a competir e nada se destaca
- Uma equipa partilha uma paleta e precisa de uma regra a seguir
- Tens três ou mais cores fortes para equilibrar
- Os botões e os números importantes estão a perder-se
Os números são aproximados. O espaço em branco conta. Neutros como o branco-sujo, o carvão e a areia podem ser os teus 60%, com duas cores a sério a dividir o resto. O que importa é a ordem: um líder claro, um apoio, um destaque raro. Para escolher as próprias cores, vê como escolher as cores da marca e noções básicas de teoria da cor.
Perguntas frequentes
O que é a regra 60 30 10?
É um guia de proporção de cor: cerca de 60% de um 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, mobiliário e acessórios ficam naturalmente com as três parcelas.
O branco conta na regra 60 30 10?
Sim. Neutros como o branco, o branco-sujo, a areia ou o carvão costumam formar os 60% dominantes, deixando os 30% e os 10% para cores a sério.
Que cor deve ter o destaque de 10%?
Normalmente a tua cor mais saturada, usada na única coisa que queres que se note primeiro, como um botão, um preço ou uma data.
Como uso a regra 60-30-10 num gradiente?
Move as paragens de cor para que a cor dominante cubra a maior parte da área, a secundária se misture ao longo de cerca de um terço e o destaque apareça apenas numa zona pequena ou num extremo.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
