# Combinações de cores para logótipos que funcionam, com códigos hex

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

Um logótipo tem de sobreviver a um favicon, a uma fotocópia a cinzento e a um cabeçalho em modo escuro. Estes pares e trios foram escolhidos para isso, com códigos e contraste que podes verificar tu próprio.

## The short version

- A maioria dos logótipos fortes usa uma ou duas cores, porque cada cor a mais torna o símbolo mais difícil de reproduzir pequeno, em impressão e sobre fundos variados.
- Um bom logótipo a duas cores junta uma cor escura a uma clara ou viva, para as formas continuarem distintas mesmo quando as cores são difíceis de distinguir.
- 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 cinzento.
- Todos os logótipos devem funcionar também a uma só cor, em preto e em branco, antes de se acrescentar qualquer cor.
- As cores de um logótipo não têm de ser toda a paleta da marca: o símbolo pode manter-se simples enquanto os fundos à volta levam a cor mais rica.

As **combinações de cores para logótipos** que melhor funcionam juntam uma cor escura a uma cor clara ou viva, como azul-marinho e dourado, verde-floresta e creme, ou carvão e lima. A diferença de luminosidade mantém as formas legíveis ao tamanho de um favicon e em escala de cinzentos, enquanto a diferença de tom dá personalidade ao símbolo. Abaixo ficam dez pares testados e três trios com códigos hex e rácios de contraste, e depois uma forma rápida de verificares qualquer combinação.

## Porque é que os logótipos usam tão poucas cores

Um logótipo é a coisa mais reproduzida que um negócio tem. Aparece como um ícone de navegador de 16 píxeis, bordado numa camisola, carimbado num copo de café e impresso a uma só cor num talão. Cada cor que acrescentas é mais uma coisa que pode correr mal num desses sítios. É por isso que tantos símbolos conhecidos têm uma cor e a maioria dos restantes tem duas.

Começa em preto. Se a forma funciona a preto sobre branco e a branco sobre preto, a cor só pode ajudar. Se não funciona, nenhuma combinação a salva. [Noções básicas de design de logótipos](https://gradiently.design/pt-pt/guide/logo-design-basics) trata da forma; este artigo assume que a forma já está resolvida.

## Dez combinações de logótipo a duas cores

- Azul-marinho e dourado: `linear-gradient(90deg, #14213d 0%, #14213d 55%, #fca311 55%, #fca311 100%)`
- Verde-floresta e creme: `linear-gradient(90deg, #1b4332 0%, #1b4332 55%, #f1e9da 55%, #f1e9da 100%)`
- Carvão 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%)`
- Bordeaux 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%)`
- Azul-cobalto e branco: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 55%, #ffffff 55%, #ffffff 100%)`
- Preto e vermelho de sinal: `linear-gradient(90deg, #111111 0%, #111111 55%, #e63946 55%, #e63946 100%)`
- Verde-azulado e coral: `linear-gradient(90deg, #0f766e 0%, #0f766e 55%, #ff7f6e 55%, #ff7f6e 100%)`

Dez pares mostrados como cortes secos, tal como se encontram dentro de um símbolo. Clica numa 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 |
| Verde-floresta e creme | `#1b4332` `#f1e9da` | 9,2:1 | Natural, artesanal, calmo |
| Carvão e lima | `#2d2d2d` `#c6f432` | 10,7:1 | Enérgico, desportivo, técnico |
| Ameixa e rosa-claro | `#4a1942` `#f7c8d0` | 9,4:1 | Caloroso, beleza, boutique |
| Bordeaux e areia | `#6b0f1a` `#e9d8a6` | 8,7:1 | Tradição, vinho, hotelaria |
| 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 |
| Azul-cobalto e branco | `#1d4ed8` `#ffffff` | 6,7:1 | Claro, de confiança, digital |
| Preto e vermelho de sinal | `#111111` `#e63946` | 4,5:1 | Ousado, urgente, editorial |
| Verde-azulado e coral | `#0f766e` `#ff7f6e` | 2,2:1 | Vivo, mas só como formas lado a lado, nunca texto sobre texto |

Rácios de contraste WCAG entre cada par. Acima de 4,5:1 uma cor pode assentar na outra como letra; os pares mais baixos devem ficar lado a lado como formas.

Repara que verde-azulado e coral é a exceção. Ambas as cores têm luminosidade parecida, por isso letras coral num selo verde-azulado seriam difíceis de ler e virariam uma só mancha cinzenta numa impressão a preto e branco. O par continua a funcionar quando as cores são formas separadas, como um símbolo verde-azulado ao lado de um logótipo tipográfico coral, cada um sobre fundo branco ou escuro. Os números vêm da fórmula WCAG explicada em [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

## Combinações de logótipo a três cores

Três cores servem símbolos feitos de peças separadas: um símbolo feito de mosaicos, um logótipo tipográfico com um ponto colorido, um conjunto de formas para uma marca infantil. Ancora o trio com uma cor escura e escolhe duas que sejam claramente diferentes no tom. Espaçá-las à volta do círculo cromático, como em [cores triádicas](https://gradiently.design/pt-pt/guide/triadic-colors), evita que compitam.

- Mar profundo: #003049
- Papoila: #d62828
- Mostarda: #fcbf49

Primárias, em versão adulta. Um azul escuro ancora um vermelho e um amarelo que de outra forma gritariam. Bom para escolas, desporto e brinquedos dirigidos aos pais.

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

Calor de costa. O verde-azulado ardósia leva o logótipo tipográfico; o açafrão e o coral queimado preenchem as formas do símbolo.

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

Digital e vistoso. Magenta e ciano brilham contra uma âncora quase preta, para símbolos de música, jogos e vida noturna.

## Combinações de cores de logótipo a evitar

### Evita

- Vermelho médio e azul médio em contacto: parecem vibrar
- Vermelho puro e verde puro juntos: difícil para muitos daltónicos
- Amarelo ou pastéis claros sobre branco: o símbolo desaparece
- Quatro ou mais cores com o mesmo peso
- Um gradiente como única versão do logótipo

### Em vez disso

- Faz uma das duas muito mais escura
- Separa-as pela luminosidade, e não só pelo tom
- Põe cores claras sobre fundo escuro, ou contorna-as
- Uma cor principal, uma ou duas de apoio
- Primeiro uma versão lisa, o gradiente como variação

Os logótipos com gradiente são um caso especial. Podem ficar magníficos em grande, mas formam bandas na impressão e esbatem-se em tamanhos pequenos. Mantém uma versão lisa a uma ou duas cores e trata o gradiente como variação; [logótipos com gradiente](https://gradiently.design/pt-pt/guide/gradient-logo) explica como construir ambas.

## Como testar uma combinação de cores de logótipo

1. **Imprime-o em escala de cinzentos** Converte o logótipo para cinzento. Se as duas cores ficarem o mesmo cinzento, o par tem pouca diferença de luminosidade.
2. **Reduz-o a 16 píxeis** Olha para ele como um ícone de separador do navegador. As partes finas numa cor clara desaparecem primeiro.
3. **Inverte-o** Põe o logótipo sobre a cor mais escura da marca e sobre branco. Repara que cor precisa de ser trocada em cada caso e escreve-o.
4. **Verifica o daltonismo** Passa-o por um simulador de daltonismo. Os pares de vermelho e verde costumam fundir-se para quem tem os tipos mais comuns de daltonismo.
5. **Põe-no num fundo real** Um logótipo raramente fica sobre branco liso no mundo real. Testa-o sobre uma fotografia, um gradiente e um feed carregado.

Um design quadrado com a palavra Harbour sobre um gradiente, com partes das letras a esbaterem-se nele

Um logótipo tipográfico posto direto sobre um fundo vivo pode perder partes das letras.

O mesmo design quadrado em que o fundo está mais calmo atrás da palavra Harbour, para cada letra se ler

O mesmo logótipo tipográfico com o fundo a acalmar e a aprofundar-se atrás dele.

Este último teste é onde muitos logótipos têm dificuldades. [Pôr um logótipo sobre um fundo de gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background) trata das técnicas. No Gradiently, um Mark sabe onde ficam as palavras e o logótipo: a sua zona mais calma desloca-se para trás deles e a Tinta automática escolhe letra clara ou escura por linha a partir da paleta do próprio Mark, por isso um logótipo simples a duas cores pode assentar num fundo rico sem uma caixa por trás.

## Mantém o logótipo simples e deixa a marca ser rica

O logótipo não tem de levar todas as cores que a marca usa. Muitas marcas mantêm o símbolo a uma ou duas cores e põem a profundidade nos fundos, na fotografia e no tipo de letra. Se a seguir vais escolher a paleta mais ampla, [ideias de cores de marca](https://gradiently.design/pt-pt/guide/brand-color-ideas) tem 30 para começar, e [logótipos famosos com gradiente](https://gradiently.design/pt-pt/guide/famous-gradient-logos) mostra como marcas estabelecidas equilibram um símbolo simples com cor expressiva.

## FAQ

### Qual é a melhor combinação de cores para um logótipo?

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

### Quantas cores deve ter um logótipo?

Uma ou duas na maioria dos logótipos. Três podem funcionar em símbolos feitos de peças separadas, mas cada cor a mais dificulta a impressão e os tamanhos pequenos.

### Que cores não devem ser usadas juntas num logótipo?

Evita cores com a mesma luminosidade em contacto, como vermelho médio e azul médio, e evita depender do vermelho contra o verde, que muitos daltónicos não conseguem separar.

### Um logótipo deve funcionar a preto e branco?

Sim. Um logótipo deve funcionar a uma cor, em preto e em branco, antes de se acrescentar cor, porque será impresso e carimbado a cores únicas.

### Um logótipo pode ser um gradiente?

Pode, mas mantém uma versão lisa para tamanhos pequenos, bordados e impressão a uma cor, e usa o gradiente onde houver espaço.