# A regra 60 30 10: proporção de cores para designs e marcas

[Canonical HTML page](https://gradiently.design/pt-br/guide/60-30-10-rule)

A maioria das paletas falha na proporção, não na escolha. Três números dizem quanto usar de cada cor, e funcionam tão bem numa tela de celular quanto nas salas de estar de onde vieram.

## The short version

- 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.

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.

60 areia, 30 azul-marinho, 10 coral: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)`

A regra desenhada como uma barra. O destaque é pequeno, e é justamente por isso que é a primeira coisa que você vê.

## 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 |

O destaque funciona porque é raro. Dobre a quantidade e ele deixa de ser destaque.

- 60 Areia: #f3efe6
- 30 Azul-porto: #1f3a5f
- 10 Coral: #e76f51

Uma paleta escrita com as suas proporções. Anotar a parte ao lado de cada cor evita que a equipe use o coral em todo lugar.

## 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.

Um post de evento em formato retrato para uma feira de gravura, com fundo calmo, título forte e um pequeno destaque no horário

Campo dominante, texto secundário e o destaque reservado para a linha da data.

O mesmo design da feira de gravura organizado num slide largo 16 por 9, com o mesmo equilíbrio de cores

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](https://gradiently.design/pt-br/guide/presentation-backgrounds) 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.

```css
: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; }
```

Nomear as cores pelo papel, e não pelo tom, torna as proporções difíceis de quebrar. O texto escuro sobre o botão coral tem cerca de 6:1 de contraste.

> **O teste de apertar os olhos** Aperte os olhos diante do design pronto até os detalhes se desfocarem. Você deve ver uma cor grande, uma segunda cor clara e um pequeno ponto brilhante. Se vir três blocos iguais, ou o destaque espalhado pelo layout todo, leve as partes de volta para 60, 30 e 10.

Numa marca, escreva as partes no seu [guia de estilo da marca](https://gradiently.design/pt-br/guide/brand-style-guide), 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.

- Terços iguais: sem cor dominante: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: azul lidera, coral brilha: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Escuro: tinta, ardósia, dourado: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Suave: sálvia, creme, ameixa: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

A primeira mistura dá às três cores o mesmo peso e fica agitada. A segunda mantém a mesma ideia em proporção. As duas últimas são esquemas 60-30-10 prontos.

## Quando flexibilizar ou quebrar a regra

### Quebre quando

- Você trabalha com um só matiz: um [esquema monocromático](https://gradiently.design/pt-br/guide/monochromatic-color-scheme) 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](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) e o [básico da teoria das cores](https://gradiently.design/pt-br/guide/color-theory-basics).

## FAQ

### 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.