A regra 60-30-10
É a regra mais útil para distribuir as cores. Vem do design de interiores, mas serve para qualquer projeto.
- 60%: cor dominante. Costuma ser um neutro ou um tom suave. Ocupa fundos e áreas grandes.
- 30%: cor secundária. Traz personalidade. Aparece em blocos, menus ou móveis.
- 10%: cor de destaque. É a mais chamativa. Aparece em botões, ícones ou detalhes.
Por exemplo: off-white em 60%, azul-marinho em 30% e laranja em 10%.
Não precisa medir com exatidão. A ideia é que uma cor mande, outra acompanhe e outra se destaque.
O papel dos neutros
Os neutros são branco, preto, cinza, bege, creme e marrons claros. Combinam com quase tudo.
Eles dão descanso à vista e ajudam as cores fortes a se destacarem. Uma paleta sem neutros costuma cansar.
- Branco e off-white: limpeza e espaço.
- Cinza: moderno e sóbrio. Escolha cinzas quentes ou frios de acordo com o resto da paleta.
- Bege e areia: aconchego e naturalidade.
- Preto ou quase preto: elegância e contraste. Para texto, um cinza bem escuro costuma ser mais confortável que o preto puro.
Combinar pela temperatura
As cores se dividem em quentes (vermelhos, laranjas, amarelos) e frias (azuis, verdes, violetas). Há três jeitos simples de combiná-las:
- Tudo quente: fica acolhedor e cheio de energia. Ideal para restaurantes ou marcas próximas do público.
- Tudo frio: fica tranquilo e profissional. Ideal para saúde, tecnologia ou finanças.
- Base fria com destaque quente: a opção mais versátil. O destaque quente atrai o olhar sobre um fundo calmo.
O que costuma dar errado é misturar muitas cores quentes e frias intensas ao mesmo tempo, sem uma cor dominante.
Contraste para textos
Uma cor bonita não adianta se o texto não dá para ler. O contraste entre texto e fundo é essencial para a leitura e a acessibilidade.
- Use texto escuro sobre fundo claro, ou texto claro sobre fundo escuro.
- Evite texto amarelo, verde-claro ou cinza-claro sobre branco.
- Evite colocar cores complementares saturadas uma sobre a outra, como vermelho sobre verde. Elas vibram e cansam.
- As diretrizes WCAG pedem uma razão mínima de 4,5:1 para texto normal e 3:1 para texto grande.
Você pode testar qualquer par de cores com o nosso verificador de contraste.
15 combinações de cores que sempre funcionam
Estes pares são seguros para começar. Use-os como base e adicione um neutro ou um destaque conforme a necessidade.
- Azul-marinho e creme: clássica, séria e fácil de ler.
- Preto e dourado: luxo e elegância.
- Azul e laranja: complementares com muita energia.
- Verde-floresta e bege: natural e tranquila.
- Rosa e cinza-chumbo: moderna e equilibrada.
- Amarelo e preto: contraste máximo, ideal para avisos.
- Bordô e areia: quente e sofisticada.
- Turquesa e coral: fresca e com clima de verão.
- Roxo e lilás-claro: monocromática e criativa.
- Marrom e verde-sálvia: terrosa, ideal para marcas naturais.
- Cinza e pêssego: suave e simpática.
- Azul-petróleo e amarelo-claro: serena, com um toque de luz.
- Terracota e off-white: quente e mediterrânea.
- Verde-petróleo e mostarda: retrô e cheia de personalidade.
- Branco e vermelho: direta, enérgica e muito visível.
Você encontra muitas outras ideias, com os códigos HEX, na nossa página de combinações de cores.
O que combina com cada cor
Se você já tem uma cor principal, esta lista dá um ponto de partida rápido:
- Vermelho: branco, preto, cinza, azul-marinho e bege. Para algo ousado, rosa ou laranja.
- Laranja: azul-marinho, turquesa, branco, creme e marrom.
- Amarelo: cinza, preto, azul-marinho e branco. O amarelo-mostarda combina bem com verde-escuro.
- Verde: bege, branco, marrom, dourado e rosa suave.
- Azul: branco, laranja, cinza, amarelo e coral. O azul-marinho funciona quase como um neutro.
- Roxo: cinza, lilás, dourado, verde-sálvia e branco.
- Rosa: cinza, azul-marinho, verde-oliva, branco e dourado.
- Marrom: creme, verde, azul-petróleo, laranja e off-white.
Repare que os neutros aparecem em quase todas as listas. Eles são o jeito mais seguro de acompanhar uma cor forte.
Como criar a sua própria combinação
- Escolha uma cor principal de acordo com o que você quer transmitir.
- Procure uma cor secundária no círculo cromático: uma vizinha para algo tranquilo, uma oposta para algo chamativo.
- Adicione um ou dois neutros.
- Escolha uma única cor de destaque para o que é mais importante.
- Teste a paleta em um exemplo real: uma página, um slide ou uma foto do cômodo.
Na dúvida, fique com menos cores. De três a cinco cores bastam para quase qualquer projeto.
Erros comuns ao combinar cores
- Usar cores demais. O resultado parece bagunçado e nada se destaca.
- Dar o mesmo peso a todas. Sem uma cor dominante, o olhar não sabe para onde ir.
- Esquecer o contraste. Textos ilegíveis ou botões que ninguém vê.
- Saturar tudo. Cores muito vivas cansam. Combine-as com tons suaves.
- Ignorar o contexto. Uma cor muda com a luz natural, na tela ou impressa.
- Copiar sem adaptar. Uma paleta que funciona para uma marca pode não combinar com o seu público.
- Misturar neutros de temperaturas diferentes. Um cinza frio ao lado de um bege quente pode parecer sujo. Escolha neutros da mesma família.
- Não testar em várias telas. Uma cor pode ficar ótima no seu computador e apagada no celular. Confira sempre em mais de um dispositivo.