# Como escolher as cores da marca: um método passo a passo

[Canonical HTML page](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors)

As cores de uma marca escolhem-se, não se encontram. Um método claro leva-te de uma página em branco a uma paleta distintiva, legível e ainda certa daqui a dois anos.

## The short version

- 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.

**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](https://gradiently.design/pt-pt/guide/color-theory-basics). 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](https://gradiently.design/pt-pt/guide/color-meanings-around-the-world) 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](https://gradiently.design/pt-pt/guide/color-psychology) 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 |

Um mapa de categoria ilustrativo. As cores saturadas tornam-se óbvias quando estão escritas num só sítio.

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.

- Principal: laranja torrado: #c2410c
- Tinta: preto quente: #1c1917
- Papel: branco quente: #faf7f2
- Apoio: aveia: #e7dccb
- Destaque: verde-azulado: #0f766e

A paleta da torrefação: uma cor principal, dois neutros tingidos, um apoio discreto e um destaque frio do outro lado da roda.

### Evita

- Cinco cores com a mesma importância
- `#000000` e `#ffffff` puros 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](https://gradiently.design/pt-pt/guide/60-30-10-rule) é 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 |

Relações de contraste da paleta de exemplo, calculadas com a fórmula das WCAG.

O [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) 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

Quatro formatos em que vale a pena testar uma paleta nova, do alto ao pequeno.

- **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](https://gradiently.design/pt-pt/guide/print-gradients).
- **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](https://gradiently.design/pt-pt/guide/brand-style-guide) e no kit de marca para que seja usado da mesma forma em todo o lado.

> **Para lá da cor lisa** Uma cor principal pode tornar-se um gradiente ou material principal, muito mais difícil de copiar. O [branding com gradientes](https://gradiently.design/pt-pt/guide/gradient-branding) explica como tornar um só teu.

## FAQ

### 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.