A regra 60-30-10

A maioria das paletas falha na proporção, não na escolha das cores. A regra 60-30-10 resolve isso com aritmética em vez de gosto.

  • #f4f1ec

  • #c9d6df

  • #2f4858

  • #e08e45

O que os números querem dizer

Sessenta por cento da área visível ficam com a cor dominante, quase sempre a mais quieta: uma parede, o fundo de uma página, o corpo de um cartaz. Trinta por cento ficam com uma cor secundária que cria a estrutura: móveis, cartões, blocos de seção. Dez por cento são o acento, a cor que aparece naquilo que você quer que seja notado. A proporção é um guia, não uma medição; ninguém está contando pixels.

Por que funciona

Duas cores em quantidades iguais competem, e o olho lê competição como ruído. Uma hierarquia clara de área diz a quem olha onde olhar primeiro, depois e por último, e essa ordem é o que separa uma página projetada de uma página decorada. Também é generosa: mesmo cores que não são obviamente harmônicas parecem intencionais quando as proporções estão assim tão claras.

Adaptando às telas

Interfaces costumam precisar de mais de três cores, então trate a regra como três papéis e não como três valores. Os sessenta são o fundo e as superfícies, os trinta são o texto e a estrutura, e os dez cobrem links, botões e estados. Cores com significado — o vermelho de um erro, o verde de um sucesso — ficam fora da proporção e devem continuar raras para manter o sentido.

O que guardar

Dê à sua cor mais quieta quase todo o espaço e à mais barulhenta quase nenhum. A proporção faz mais por uma paleta do que um matiz a mais.

Gere uma paleta para testar a proporção

Mais da biblioteca