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

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

A maioria das paletas falha na proporção, não na escolha. Três números dizem-te quanto usar de cada cor e funcionam tão bem num ecrã de telemóvel como 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, 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.

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.

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 é precisamente por isso que é a primeira coisa que se vê.

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

O destaque funciona porque é raro. Se o duplicares, deixa de ser destaque.

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

Uma paleta escrita com as suas proporções. Registar a parcela ao lado de cada cor evita que uma equipa use o coral em todo o lado.

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

Uma publicação vertical de evento para uma feira de impressão, com fundo calmo, título forte e um pequeno destaque no horário

Fundo dominante, texto secundário e o destaque guardado para a linha da data.

O mesmo design da feira de impressão disposto num diapositivo panorâmico 16 por 9, com o mesmo equilíbrio de cores

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

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

Dar nomes às cores pelo papel e não pelo tom torna as proporções difíceis de quebrar. O texto escuro sobre o botão coral mede cerca de 6:1.

> **O teste de semicerrar os olhos** Semicerra os olhos diante do design acabado até os pormenores se esbaterem. Deves ver uma cor grande, uma segunda cor clara e um pequeno ponto brilhante. Se vires três blocos iguais, ou o destaque espalhado por todo o layout, aproxima as parcelas de 60, 30 e 10.

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

- Terços iguais: sem cor dominante: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: o azul lidera, o coral cintila: `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: salva, 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 parece confusa. A segunda mantém a mesma ideia em proporção. As duas últimas são esquemas 60-30-10 prontos a usar.

## Quando dobrar ou quebrar a regra

### Quebra-a quando

- Trabalhas com um só tom: um [esquema monocromático](https://gradiently.design/pt-pt/guide/monochromatic-color-scheme) 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](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors) e [noções básicas de teoria da cor](https://gradiently.design/pt-pt/guide/color-theory-basics).

## FAQ

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