Resumindo
- Para escolher as cores da marca, comece pelo caráter e pelo público da marca e depois veja quais cores o seu setor já usa.
- Uma paleta de marca forte é construída em torno de uma cor principal que as pessoas possam associar a você, não de várias cores com o mesmo peso.
- A maior parte de uma paleta de marca são neutros: um escuro tingido para o texto, um claro tingido para os fundos e uma ou duas cores de apoio discretas.
- Uma cor de destaque, usada com moderação, dá aos botões de ação e aos realces um lugar para se sobressair.
- Toda paleta de marca deve ser testada quanto ao contraste do texto e em formatos reais, em tamanhos pequenos e na impressão, antes de ser registrada.
Nesta página
Como escolher as cores da marca, resumindo: decida como a marca deve parecer, veja quais cores os seus concorrentes já dominam, escolha uma cor principal que diferencie você, cerque-a de neutros e de um pequeno destaque e depois teste tudo quanto ao contraste e em designs reais. Os passos abaixo transformam isso num método que você termina numa tarde. O resultado é uma paleta em que cada cor tem uma função, em vez de cinco cores de que você por acaso gosta.
Se matiz, saturação e luminosidade são novidade para você, leia antes o básico da teoria das cores. Vai deixar cada passo mais fácil.
O método num relance
- 1
Descreva o caráter da marca em três palavras
Calma, precisa, acolhedora. Ousada, divertida, local. Essas palavras decidem temperatura, saturação e contraste antes de você olhar uma única amostra.
- 2
Saiba quem está olhando
Pense no seu público, em onde ele vai ver você e, se você atua em vários países, no que as cores significam lá. Os significados das cores pelo mundo ajudam.
- 3
Mapeie o seu setor
Reúna os logos, sites e embalagens de dez concorrentes e anote as cores principais. Você está procurando o que está lotado e o que está livre.
- 4
Escolha uma cor principal
Uma cor que as pessoas vão associar a você. Ela deve combinar com as suas três palavras e se destacar no mapa do setor.
- 5
Acrescente neutros
Um quase preto tingido para o texto e um quase branco tingido para os fundos, mais um tom de apoio discreto.
- 6
Acrescente um destaque
Uma cor contrastante para botões, preços e realces, usada com moderação.
- 7
Teste o contraste
Confira cada par de texto e fundo com as razões da WCAG.
- 8
Teste no contexto e registre
Aplique a paleta em formatos reais e depois anote cada código e a função de cada cor.
Passos 1 a 3: caráter, público e setor
A maioria das paletas de marca fracassa antes de qualquer cor ser escolhida, porque ninguém decidiu como a marca deveria parecer. Três palavras bastam. Acolhedora, artesanal, sem pressa aponta para cores terrosas e suaves com contraste leve. Afiada, rápida, técnica aponta para cores frias e saturadas com contraste forte. A psicologia das cores mostra o que as cores costumam transmitir e por que o contexto importa mais que as regras.
Depois, olhe a concorrência. Imagine que você tem uma pequena torrefação de café e que as torrefações perto de você usam principalmente marrom, creme e preto. Mais um marrom vai se misturar. Um mapa do setor deixa isso visível.
| Concorrente | Cor principal | Transmite |
|---|---|---|
| Torrefação A | Marrom espresso | Tradicional |
| Torrefação B | Creme e preto | Minimalista, clássica |
| Torrefação C | Marrom kraft | Artesanal |
| Torrefação D | Verde-floresta | Natural |
| Espaço livre | Laranja quente, verde-azulado profundo | Ninguém por perto usa |
Ser diferente não significa ser aleatório. Os melhores espaços livres ainda combinam com as suas três palavras. Uma torrefação acolhedora e artesanal poderia adotar um laranja de torra; um azul elétrico vivo seria diferente, mas errado.
Passos 4 a 6: cor principal, neutros e destaque
A cor principal é a que as pessoas vão lembrar. Dê a ela a maioria dos momentos de cor da marca: o logo, a embalagem, o primeiro quadro de cada post. Escolher duas ou três cores principais com o mesmo peso dilui o reconhecimento; uma é mais forte.
Os neutros fazem a maior parte do trabalho. Preto e branco puros parecem genéricos; tinja-os levemente em direção à cor principal ou a um tom quente ou frio e toda a paleta parece da mesma família. Depois acrescente uma cor de apoio discreta para painéis e ilustrações e um destaque para as poucas coisas que precisam se sobressair.
Evite
- Cinco cores com a mesma importância
#000000e#ffffffpuros como neutros- Um destaque usado em todo lugar
- Escolher pela sua cor favorita
Faça
- Uma cor principal, claramente à frente
- Neutros tingidos em direção à marca
- Um destaque reservado para ações e realces
- Escolher pelo caráter e pelo espaço livre no setor
A regra 60-30-10 é um guia prático de proporção: cerca de 60% de neutro, 30% de cor principal e apoio e 10% de destaque. Os números exatos importam menos do que ter uma ordem clara.
Passo 7: teste o contraste
A WCAG pede uma razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Confira cada par que você pretende usar. Cores de marca no meio da faixa de luminosidade, como muitos laranjas e verdes, costumam funcionar com texto branco, mas não com preto, ou só em tamanhos grandes.
| Texto sobre o fundo | Razão | Use para |
|---|---|---|
| Tinta sobre papel | 16,4:1 | Todo texto |
| Papel sobre laranja de torra | 4,9:1 | Texto corrido e grande |
| Tinta sobre laranja de torra | 3,4:1 | Só texto grande |
| Verde-azulado profundo sobre papel | 5,1:1 | Links e texto corrido |
| Tinta sobre aveia | 12,9:1 | Todo texto |
O guia de contraste de cores explica as razões e como medi-las. Se a sua cor principal falha tanto com texto claro quanto com escuro, escureça-a um pouco em vez de desistir dela; alguns pontos percentuais de luminosidade raramente são notados.
Passo 8: teste no contexto e depois registre
Amostras enganam. Uma cor que parece refinada num quadradinho pode ser avassaladora num story inteiro, e um neutro sutil pode sumir na tela do celular sob o sol. Aplique a paleta nos formatos que você vai usar de verdade.
Post do Instagram
1080 × 1350
Story
1080 × 1920
Destaque do site
1920 × 1080
Cartão de visita
1050 × 600
- Tamanhos pequenos: a cor principal ainda parece a principal num favicon ou numa foto de perfil?
- Impressão: a cor principal vai se reproduzir em tinta? Cores de tela muito vivas costumam sair mais apagadas na impressão. Veja gradientes na impressão.
- Modo escuro: os neutros se invertem com elegância?
- Ao lado dos concorrentes: coloque o seu post ao lado dos deles. Dá para saber qual é o seu num relance?
Por fim, registre tudo: o nome, o HEX e o RGB de cada cor, os equivalentes CMYK ou Pantone se você imprime, a função de cada cor e os pares de texto aprovados. Coloque isso no seu guia de estilo da marca e no seu kit de marca para que seja usado do mesmo jeito em todo lugar.
Perguntas frequentes
Quantas cores de marca devo ter?
Normalmente uma cor principal, dois neutros, uma cor de apoio e um destaque. Mais do que isso fica difícil de usar de forma consistente.
Como escolher uma cor de marca que se destaque?
Mapeie as cores principais dos seus concorrentes, encontre uma cor pouco usada no seu setor e confira se ela ainda combina com o caráter da sua marca.
As cores da marca devem se basear na psicologia das cores?
Use as associações como guia, não como regra. O significado das cores depende muito da cultura, do setor e do contexto, então ser diferente e consistente costuma importar mais.
Que contraste as cores da marca precisam ter para texto?
A WCAG recomenda pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Confira cada par de texto e fundo que você pretende usar.
Posso mudar as cores da minha marca depois?
Pode, mas o reconhecimento construído com as cores antigas se perde aos poucos. Pequenos ajustes de luminosidade ou saturação são mais fáceis do que trocar de matiz.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
