A versão curta
- Para escolher as cores da marca, parte do carácter e do público da marca e depois vê que cores a tua categoria já usa.
- Uma paleta de marca forte constrói-se à volta de uma cor principal que as pessoas possam associar a ti, e 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 parcimónia, dá aos apelos à ação e aos realces um sítio para sobressair.
- Cada paleta de marca deve ser testada quanto ao contraste do texto e em formatos reais, em tamanhos pequenos e em impressão, antes de ser registada.
Nesta página
Como escolher as cores da marca, em resumo: decide o que a marca deve transmitir, vê que cores os teus concorrentes já ocupam, escolhe uma cor principal que te distinga, rodeia-a de neutros e de um pequeno destaque, e testa o conjunto quanto ao contraste e em designs reais. Os passos abaixo transformam isto num método que acabas numa tarde. O resultado é uma paleta com uma função para cada cor, em vez de cinco cores de que por acaso gostas.
Se tom, saturação e luminosidade são conceitos novos para ti, lê primeiro as bases da teoria da cor. Vão tornar cada passo mais fácil.
O método num relance
- 1
Escreve o carácter da marca em três palavras
Calma, precisa, calorosa. Arrojada, divertida, local. Estas palavras decidem a temperatura, a saturação e o contraste antes de olhares para uma única amostra.
- 2
Sabe quem está a olhar
Pensa no teu público, onde te vai ver e, se trabalhas em vários países, o que as cores significam lá. Os significados das cores pelo mundo ajudam.
- 3
Mapeia a tua categoria
Junta os logótipos, sites e embalagens de dez concorrentes e anota as cores principais. Procuras o que está saturado e o que está livre.
- 4
Escolhe uma cor principal
Uma cor que as pessoas vão associar a ti. Deve encaixar nas tuas três palavras e destacar-se no mapa da categoria.
- 5
Junta neutros
Um quase preto tingido para o texto e um quase branco tingido para os fundos, mais um tom de apoio discreto.
- 6
Junta um destaque
Uma cor contrastante para botões, preços e realces, usada com parcimónia.
- 7
Testa o contraste
Verifica cada par de texto e fundo segundo as relações das WCAG.
- 8
Testa em contexto e regista
Aplica a paleta em formatos reais e depois regista cada código e a função de cada cor.
Passos 1 a 3: carácter, público e categoria
A maioria das paletas de marca falha antes de se escolher uma cor, porque ninguém decidiu o que a marca deve transmitir. Três palavras chegam. Calorosa, artesanal, sem pressa aponta para cores terrosas e suaves, com contraste brando. Afiada, rápida, técnica aponta para cores frias e saturadas, com contraste forte. A psicologia da cor trata do que as cores tendem a sinalizar e de porque é que o contexto importa mais do que as regras.
Depois, olha para a concorrência. Imagina que és uma pequena torrefação de café e que as torrefações perto de ti usam sobretudo castanho, creme e preto. Mais um castanho vai confundir-se. Um mapa da categoria torna isso visível.
| Concorrente | Cor principal | Sensação |
|---|---|---|
| Torrefação A | Castanho café expresso | Tradicional |
| Torrefação B | Creme e preto | Minimalista, clássica |
| Torrefação C | Castanho kraft | Artesanal |
| Torrefação D | Verde floresta | Natural |
| Espaço livre | Laranja quente, verde-azulado profundo | Ninguém por perto as usa |
Ser diferente não significa ser aleatório. Os melhores espaços livres continuam a encaixar nas tuas três palavras. Uma torrefação calorosa e artesanal podia ficar com um laranja torrado; um azul elétrico vivo seria diferente, mas errado.
Passos 4 a 6: cor principal, neutros e destaque
A cor principal é aquela de que as pessoas se vão lembrar. Dá-lhe a maioria dos momentos de cor da marca: o logótipo, a embalagem, o primeiro fotograma de cada publicação. Escolher duas ou três cores principais com o mesmo peso dilui o reconhecimento; uma só é mais forte.
Os neutros fazem a maior parte do trabalho. O preto e o branco puros parecem genéricos; tinge-os ligeiramente na direção da cor principal ou para o quente ou o frio, e a paleta inteira parece relacionada. Depois junta uma cor de apoio discreta para painéis e ilustração, e um destaque para as poucas coisas que têm de sobressair.
Evita
- Cinco cores com a mesma importância
#000000e#ffffffpuros como neutros- Um destaque usado em todo o lado
- Escolher pela tua cor preferida
Faz
- Uma cor principal, claramente à frente
- Neutros tingidos na direção da marca
- Um destaque guardado para ações e realces
- Escolher pelo carácter e pelo espaço livre na categoria
A regra 60-30-10 é um guia prático para as proporções: cerca de 60% de neutros, 30% de cor principal e de apoio, 10% de destaque. Os números exatos importam menos do que ter uma ordem clara.
Passo 7: testa o contraste
As WCAG pedem uma relação de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Verifica cada par que tencionas usar. As cores de marca a meio da escala de luminosidade, como muitos laranjas e verdes, funcionam muitas vezes com texto branco mas não com preto, ou só em tamanhos grandes.
| Texto sobre fundo | Relação | Usar para |
|---|---|---|
| Tinta sobre papel | 16,4:1 | Todo o texto |
| Papel sobre laranja torrado | 4,9:1 | Texto corrido e grande |
| Tinta sobre laranja torrado | 3,4:1 | Só texto grande |
| Verde-azulado sobre papel | 5,1:1 | Ligações e texto corrido |
| Tinta sobre aveia | 12,9:1 | Todo o texto |
O contraste de cor explica as relações e como medi-las. Se a tua cor principal falhar tanto com texto claro como escuro, escurece-a ligeiramente em vez de desistires dela; uns pontos percentuais de luminosidade raramente se notam.
Passo 8: testa em contexto e depois regista
As amostras enganam. Uma cor que parece requintada num pequeno quadrado pode ser esmagadora numa story inteira, e um neutro subtil pode desaparecer num telemóvel ao sol. Aplica a paleta nos formatos que vais usar de facto.
Publicação no Instagram
1080 × 1350
Story
1080 × 1920
Imagem principal do site
1920 × 1080
Cartão de visita
1050 × 600
- Tamanhos pequenos: a cor principal continua a ler-se como principal num favicon ou numa foto de perfil?
- Impressão: a cor principal reproduz-se em tinta? As cores de ecrã muito vivas imprimem-se muitas vezes mais baças. Vê imprimir gradientes.
- Modo escuro: os neutros invertem-se com elegância?
- Ao lado dos concorrentes: põe a tua publicação ao lado das deles. Consegues perceber num relance qual é a tua?
Por fim, regista tudo: o nome, o HEX e o RGB de cada cor, os equivalentes CMYK ou de cor direta se imprimes, a função de cada cor e as combinações de texto aprovadas. Põe-no no teu guia de estilo da marca e no kit de marca para que seja usado da mesma forma em todo o lado.
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 torna-se difícil de usar com coerência.
Como escolho uma cor de marca que se destaque?
Mapeia as cores principais dos teus concorrentes, encontra uma cor que não esteja saturada na tua categoria e confirma que continua a encaixar no carácter da marca.
As cores da marca devem basear-se na psicologia da cor?
Usa as associações como guia, não como regra. O significado das cores depende muito da cultura, da categoria e do contexto, por isso ser distintivo e coerente costuma importar mais.
Que contraste precisam as cores da marca para o texto?
As WCAG recomendam pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Verifica cada par de texto e fundo que tencionas usar.
Posso mudar as cores da marca mais tarde?
Sim, mas o reconhecimento construído com as cores antigas perde-se aos poucos. Pequenos ajustes de luminosidade ou saturação são mais fáceis do que mudar de tom.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
