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

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

As cores de uma marca são escolhidas, não encontradas. Um método claro leva você da página em branco a uma paleta marcante, legível e que ainda faça sentido daqui a dois anos.

## The short version

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

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

Um mapa de setor ilustrativo. As cores lotadas ficam óbvias quando estão escritas num só lugar.

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.

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

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

### Evite

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

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

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

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

- **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](https://gradiently.design/pt-br/guide/print-gradients).
- **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](https://gradiently.design/pt-br/guide/brand-style-guide) e no seu kit de marca para que seja usado do mesmo jeito em todo lugar.

> **Além da cor chapada** Uma cor principal pode virar um gradiente ou um material principal, que é mais difícil de alguém copiar. O guia de [branding com gradiente](https://gradiently.design/pt-br/guide/gradient-branding) explica como torná-lo só seu.

## FAQ

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