60, 30, 10: a conta que faz uma página parecer cara
Não é a cor que você escolhe, é quanto de cada uma. Como dividir fundo, superfícies e cor da marca numa página, com o exemplo do Conversão Visual.
- Carrossel
- 22 de out de 2026
- 1 min de leitura
Uma página parece cara quando as cores têm proporção. A regra 60, 30, 10 resolve isso: 60% da tela é o fundo, 30% são as superfícies (cards, blocos, áreas de destaque) e 10% é a cor da marca. O erro mais comum é o contrário: cor da marca em tudo.
60% é o fundo
Uma cor só, a mesma em toda a página. Na página do Conversão Visual o fundo é #050505, um preto quase puro. O fundo não chama atenção: ele dá unidade.
30% são as superfícies
Cards e blocos ficam um degrau acima do fundo. No Conversão Visual são #0D0D0D nos cards e #141414 nas superfícies internas. A diferença é pequena de propósito: separa sem gritar.
Libere o resto da matéria
Você também recebe por e-mail o link desta matéria e a aula grátis do Conversão Visual.
10% é a cor da marca
A cor da marca aparece só onde precisa de clique ou atenção: o botão principal, um selo, um número. No Conversão Visual é o verde #22C55E. Como ela aparece pouco, quando aparece, chama.
O erro comum: cor da marca em tudo
Quando o fundo é roxo, o card é roxo, o botão é roxo com brilho e o título tem degradê roxo, nada se destaca. Quando tudo chama atenção, nada chama. É o visual típico de site feito com IA no automático.
Como aplicar na próxima página
- Escolha um fundo e não troque no meio da página
- Coloque os cards um degrau acima do fundo
- Use a cor da marca só onde tem clique
A proporção não depende de a página ser clara ou escura. No tema claro, o fundo é claro, os cards um degrau acima (branco) e a cor da marca continua nos mesmos 10%.
