# Combinações de cores para logo que funcionam, com hex

[Canonical HTML page](https://gradiently.design/pt-br/guide/color-combinations-for-logos)

Um logo precisa sobreviver a um favicon, a uma fotocópia cinza e a um cabeçalho em modo escuro. Estes pares e trios foram escolhidos para isso, com códigos e contraste que você mesmo confere.

## The short version

- A maioria dos logos fortes usa uma ou duas cores, porque cada cor extra dificulta reproduzir a marca em tamanho pequeno, na impressão e sobre fundos variados.
- Um bom logo de duas cores combina uma cor escura com uma clara ou viva, para que as formas continuem distintas mesmo quando as cores são difíceis de diferenciar.
- Duas cores de luminosidade parecida, como um vermelho médio e um azul médio, parecem vibrar onde se tocam e perdem o contorno quando impressas em cinza.
- Todo logo também deve funcionar em uma só cor, em preto e em branco, antes de qualquer cor ser acrescentada.
- As cores de um logo não precisam ser toda a paleta da marca: a marca pode ficar simples enquanto os fundos ao redor carregam a cor mais rica.

As **combinações de cores para logo** que funcionam melhor juntam uma cor escura e uma clara ou viva, como azul-marinho e dourado, verde-floresta e creme, ou grafite e lima. A diferença de luminosidade mantém as formas legíveis no tamanho de favicon e em escala de cinza, enquanto a diferença de matiz dá personalidade à marca. Abaixo estão dez pares testados e três trios com códigos hex e taxas de contraste, e depois um jeito rápido de conferir qualquer combinação por conta própria.

## Por que logos usam tão poucas cores

O logo é a coisa mais reproduzida que um negócio possui. Ele aparece como um ícone de 16 pixels no navegador, bordado numa camisa, carimbado num copo de café e impresso em uma cor num recibo. Cada cor acrescentada é mais uma coisa que pode dar errado num desses lugares. Por isso tantas marcas conhecidas têm uma cor, e a maioria das demais, duas.

Comece pelo preto. Se a forma funciona em preto sobre branco e em branco sobre preto, a cor só pode ajudar. Se não funciona, nenhuma combinação vai salvá-la. [Fundamentos de design de logo](https://gradiently.design/pt-br/guide/logo-design-basics) trata da forma; este artigo parte do princípio de que a forma já está definida.

## Dez combinações de duas cores para logo

- Azul-marinho e dourado: `linear-gradient(90deg, #14213d 0%, #14213d 55%, #fca311 55%, #fca311 100%)`
- Floresta e creme: `linear-gradient(90deg, #1b4332 0%, #1b4332 55%, #f1e9da 55%, #f1e9da 100%)`
- Grafite e lima: `linear-gradient(90deg, #2d2d2d 0%, #2d2d2d 55%, #c6f432 55%, #c6f432 100%)`
- Ameixa e rosa-claro: `linear-gradient(90deg, #4a1942 0%, #4a1942 55%, #f7c8d0 55%, #f7c8d0 100%)`
- Bordô e areia: `linear-gradient(90deg, #6b0f1a 0%, #6b0f1a 55%, #e9d8a6 55%, #e9d8a6 100%)`
- Tinta e laranja: `linear-gradient(90deg, #1c1917 0%, #1c1917 55%, #f97316 55%, #f97316 100%)`
- Roxo e menta: `linear-gradient(90deg, #5b21b6 0%, #5b21b6 55%, #a7f3d0 55%, #a7f3d0 100%)`
- Cobalto e branco: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 55%, #ffffff 55%, #ffffff 100%)`
- Preto e vermelho sinal: `linear-gradient(90deg, #111111 0%, #111111 55%, #e63946 55%, #e63946 100%)`
- Azul-petróleo e coral: `linear-gradient(90deg, #0f766e 0%, #0f766e 55%, #ff7f6e 55%, #ff7f6e 100%)`

Dez pares mostrados como divisões duras, do jeito que se encontram dentro de uma marca. Clique em qualquer amostra para copiar o código.

| Par | Códigos | Contraste | Transmite |
| --- | --- | --- | --- |
| Azul-marinho e dourado | `#14213d` `#fca311` | 7,9:1 | Estabelecido, confiante, um pouco clássico |
| Floresta e creme | `#1b4332` `#f1e9da` | 9,2:1 | Natural, artesanal, calmo |
| Grafite e lima | `#2d2d2d` `#c6f432` | 10,7:1 | Enérgico, esportivo, técnico |
| Ameixa e rosa-claro | `#4a1942` `#f7c8d0` | 9,4:1 | Acolhedor, beleza, boutique |
| Bordô e areia | `#6b0f1a` `#e9d8a6` | 8,7:1 | Tradição, vinho, hospitalidade |
| Tinta e laranja | `#1c1917` `#f97316` | 6,2:1 | Prático, simpático, ofícios e ferramentas |
| Roxo e menta | `#5b21b6` `#a7f3d0` | 7,0:1 | Moderno, divertido, software |
| Cobalto e branco | `#1d4ed8` `#ffffff` | 6,7:1 | Claro, confiável, digital |
| Preto e vermelho sinal | `#111111` `#e63946` | 4,5:1 | Ousado, urgente, editorial |
| Azul-petróleo e coral | `#0f766e` `#ff7f6e` | 2,2:1 | Vivo, mas só como formas encostadas, nunca texto sobre texto |

Taxas de contraste WCAG entre cada par. Acima de 4,5:1 uma cor pode servir de letra sobre a outra; pares mais baixos devem ficar lado a lado como formas.

Repare que azul-petróleo e coral é a exceção. As duas cores têm luminosidade parecida, então letras corais num selo azul-petróleo seriam difíceis de ler e virariam uma mancha cinza numa impressão em preto e branco. O par ainda funciona quando as cores são formas separadas, como um símbolo azul-petróleo ao lado de um logotipo coral, cada um sobre fundo branco ou escuro. Os números vêm da fórmula WCAG explicada em [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

## Combinações de três cores para logo

Três cores combinam com marcas feitas de peças separadas: um símbolo de ladrilhos, um logotipo com um ponto colorido, um conjunto de formas para uma marca infantil. Ancore o trio com uma cor escura e escolha duas claramente diferentes em matiz. Espaçá-las pelo círculo cromático, como em [cores triádicas](https://gradiently.design/pt-br/guide/triadic-colors), evita que briguem.

- Azul profundo: #003049
- Papoula: #d62828
- Mostarda: #fcbf49

Primário, adulto. Um azul escuro ancora um vermelho e um amarelo que, sozinhos, gritariam. Bom para escolas, esportes e brinquedos voltados aos pais.

- Azul-ardósia: #264653
- Açafrão: #e9c46a
- Coral queimado: #e76f51

Calor litorâneo. O azul-ardósia leva o logotipo; açafrão e coral queimado preenchem as formas do símbolo.

- Noite: #10002b
- Magenta: #f72585
- Ciano: #4cc9f0

Digital e vibrante. Magenta e ciano brilham contra uma âncora quase preta, para marcas de música, games e vida noturna.

## Combinações de cores para logo a evitar

### Evite

- Vermelho médio e azul médio se tocando: parecem vibrar
- Vermelho puro e verde puro juntos: difícil para muitos daltônicos
- Amarelo ou pastéis claros sobre branco: a marca desaparece
- Quatro ou mais cores de peso igual
- Um gradiente como única versão do logo

### Em vez disso

- Deixe uma das duas muito mais escura
- Separe-as por luminosidade, não só por matiz
- Ponha cores claras sobre fundo escuro, ou contorne-as
- Uma cor principal, uma ou duas de apoio
- Uma versão chapada primeiro, o gradiente como variação

Logos em gradiente são um caso especial. Podem ficar ótimos em tamanho grande, mas formam faixas na impressão e borram em tamanhos pequenos. Mantenha uma versão chapada de uma ou duas cores e trate o gradiente como variação; [logos em gradiente](https://gradiently.design/pt-br/guide/gradient-logo) explica como construir os dois.

## Como testar uma combinação de cores de logo

1. **Imprima em escala de cinza** Converta o logo para cinza. Se as duas cores viram o mesmo cinza, o par tem pouca diferença de luminosidade.
2. **Reduza para 16 pixels** Olhe como ícone de aba do navegador. As partes finas em cor clara somem primeiro.
3. **Inverta** Coloque o logo sobre a cor mais escura da marca e sobre branco. Veja qual cor precisa ser trocada em cada caso e anote.
4. **Confira o daltonismo** Passe por um simulador de daltonismo. Pares de vermelho e verde costumam se fundir para quem tem os tipos mais comuns de daltonismo.
5. **Coloque sobre um fundo real** Um logo raramente fica sobre branco liso na vida real. Teste sobre uma foto, um gradiente e um feed cheio.

Design quadrado com a palavra Porto sobre um gradiente, com partes das letras se perdendo nele

Um logotipo colocado direto sobre um fundo agitado pode perder partes das letras.

O mesmo design quadrado em que o fundo fica mais calmo atrás da palavra Porto, e cada letra se lê

O mesmo logotipo com o fundo se acalmando e se aprofundando atrás dele.

Esse último teste é onde muitos logos sofrem. [Como colocar um logo sobre fundo em gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background) trata das técnicas. No Gradiently, um Mark sabe onde ficam as palavras e o logo: sua região mais calma vai para trás deles e a Tinta automática escolhe tinta clara ou escura em cada linha a partir da paleta do próprio Mark, então um logo simples de duas cores pode ficar sobre um fundo rico sem caixa atrás.

## Mantenha o logo simples e deixe a marca ser rica

O logo não precisa carregar todas as cores que a marca usa. Muitas marcas deixam o símbolo em uma ou duas cores e põem a profundidade nos fundos, na fotografia e na tipografia. Se o próximo passo é escolher a paleta mais ampla, [ideias de cores para marcas](https://gradiently.design/pt-br/guide/brand-color-ideas) tem 30 para começar, e [logos famosos em gradiente](https://gradiently.design/pt-br/guide/famous-gradient-logos) mostra como marcas consolidadas equilibram um símbolo simples e cor expressiva.

## FAQ

### Qual a melhor combinação de cores para um logo?

Não há um único par melhor, mas uma cor escura com uma clara ou viva, como azul-marinho e dourado ou floresta e creme, funciona quase sempre porque as formas continuam distintas.

### Quantas cores um logo deve ter?

Uma ou duas na maioria dos logos. Três podem funcionar em marcas feitas de peças separadas, mas cada cor extra complica a impressão e os tamanhos pequenos.

### Quais cores não devem ser usadas juntas em um logo?

Evite cores de mesma luminosidade se tocando, como vermelho médio e azul médio, e evite depender de vermelho contra verde, que muitos daltônicos não separam.

### Um logo deve funcionar em preto e branco?

Sim. Um logo deve funcionar em uma cor, em preto e em branco, antes de a cor ser acrescentada, porque será impresso e carimbado em cores únicas.

### Um logo pode ser um gradiente?

Pode, mas mantenha uma versão chapada para tamanhos pequenos, bordado e impressão em uma cor, e use o gradiente onde houver espaço.