# Significado da cor azul-petróleo e por que as marcas a adoram

[Canonical HTML page](https://gradiently.design/pt-br/guide/teal-color-meaning)

O azul-petróleo faz duas coisas ao mesmo tempo: acalma como o azul e refresca como o verde. Esse duplo sentido, e o fato de não ser simplesmente azul, é o motivo de tantas marcas de saúde, finanças e tecnologia o escolherem.

## The short version

- O significado do azul-petróleo combina a calma, a clareza e a confiança do azul com a renovação, a saúde e o equilíbrio do verde.
- Em inglês, a cor teal leva o nome do marreco-comum, um patinho cujos machos têm uma mancha ocular de verde iridescente.
- A cor nomeada teal do CSS é #008080, um azul-esverdeado médio feito de partes iguais de verde e azul, sem vermelho.
- As marcas escolhem o azul-petróleo porque ele inspira confiança como o azul, mas se destaca das muitas marcas que já usam azul.
- Laranja e coral são os complementos naturais do azul-petróleo, e por isso a combinação de azul-petróleo e laranja é tão comum no cinema e no design.

O **significado da cor azul-petróleo** é calma com pulso: une a confiança, a clareza e a serenidade do azul à renovação, à saúde e ao equilíbrio do verde. O azul-petróleo parece fresco, mas sério, reflexivo, mas não frio. Ele também foge da multidão. Uma marca que quer a segurança do azul sem parecer todos os bancos e empresas de software encontra no azul-petróleo uma resposta pronta, e isso explica em boa parte por que ele aparece na saúde, nas finanças, no bem-estar e na tecnologia.

## De onde vem o azul-petróleo

Em inglês, a cor leva o nome do teal comum, um pequeno pato de superfície cujos machos exibem uma larga faixa de verde iridescente que vai do olho para trás. A palavra passou a ser usada como nome de cor no inglês no início do século XX. Nas telas, teal significa partes iguais de luz verde e azul e nenhum vermelho; a palavra-chave `teal` do CSS é exatamente isso.

```css
:root {
  /* The CSS named colour */
  --teal: teal; /* #008080, rgb(0 128 128) */

  /* A practical brand scale */
  --teal-100: #ccfbf1;
  --teal-300: #5eead4;
  --teal-500: #14b8a6;
  --teal-700: #0f766e;
  --teal-900: #134e4a;
}
```

A palavra-chave `teal` e uma escala de cinco passos que você pode colar numa folha de estilo. O passo 700 leva bem o texto branco.

## Psicologia da cor azul-petróleo

A maior parte das associações do azul-petróleo vem da água e da natureza: o mar tropical raso, lagoas, piscinas minerais e a pátina do cobre antigo. Essas imagens o fazem parecer limpo, fresco, restaurador e um pouco precioso. Como todo significado de cor, essas são associações aprendidas e não regras, e [psicologia das cores](https://gradiently.design/pt-br/guide/color-psychology) explica por que o contexto as altera.

| Do azul | Do verde | Próprio do azul-petróleo |
| --- | --- | --- |
| Confiança | Renovação | Clareza com calor |
| Calma | Saúde | Fresco, mas adulto |
| Competência | Equilíbrio | Nem corporativo, nem rústico |
| Profundidade | Crescimento | Moderno e neutro em gênero |

O azul-petróleo toma emprestado dos dois pais e acaba com um caráter próprio.

## Tons de azul-petróleo e o que cada um diz

- Espuma do mar: #ccfbf1
- Petróleo água: #5eead4
- Petróleo vivo: #14b8a6
- Teal do CSS: #008080
- Petróleo profundo: #0f766e
- Petróleo escuro: #134e4a
- Abismo: #042f2e
- Petróleo empoeirado: #5f8f8a

Petróleos claros parecem arejados e clínicos, os escuros parecem ricos e silenciosos, e o empoeirado lembra interiores e artesanato.

- **Espuma do mar e petróleo água:** frescor, spa, verão, simpatia.
- **Petróleo vivo:** energia e otimismo com um toque técnico; bom para apps e painéis.
- **Petróleo profundo e escuro:** confiança, profundidade e luxo; uma forte alternativa ao azul-marinho.
- **Petróleo empoeirado:** calmo, vintage e artesanal; funciona para decoração, cerâmica e cafeterias.

## Por que as marcas adoram o azul-petróleo

O azul-petróleo resolve um problema comum de branding. O azul é a escolha segura para tudo que envolve dinheiro, saúde ou dados, então muitos concorrentes já o usam. O azul-petróleo mantém boa parte da credibilidade do azul e acrescenta uma sensação de cuidado e frescor, exatamente o tom que uma clínica, um app de previdência ou um serviço de bem-estar quer. Ele também está livre da forte associação de gênero que o rosa e alguns azuis carregam.

Há lugares em que o azul-petróleo combina menos. Se toda a sua categoria já pende para o azul-petróleo, como acontece em alguns mercados de bem-estar e de odontologia, ele deixa de ser distintivo e você precisa de um segundo elemento de assinatura. Um azul-petróleo muito vivo também pode parecer jovem e tecnológico, o que pode destoar para um escritório de advocacia tradicional ou uma funerária. Nesses casos, um petróleo empoeirado ou bem escuro mantém a calma sem o ar de startup. [Como escolher as cores da marca](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) traz um método mais completo.

Post quadrado de uma clínica sobre um degradê calmo de azul-petróleo, anunciando consultas no mesmo dia

Azul-petróleo para uma clínica: calmo, limpo e confiável, sem o frio do azul de hospital.

Post quadrado de um app financeiro sobre um fundo de azul-petróleo profundo com o texto Sua poupança num relance

Azul-petróleo profundo para um app de dinheiro: crível como um banco, mas mais caloroso e moderno.

## Como construir uma marca em torno do azul-petróleo

1. **Decida o quanto de claro ou profundo** Petróleos claros parecem abertos e amigáveis; os profundos parecem consolidados. Escolha um petróleo principal e anote o hex dele, para todos os arquivos usarem exatamente a mesma cor.
2. **Dê a ele uma cor de texto** Confira que tinta se lê sobre o seu petróleo principal. Petróleos vivos pedem texto quase preto; os profundos aceitam branco.
3. **Acrescente um destaque quente** Um coral, laranja ou dourado em pequenas doses evita que uma paleta de azul-petróleo pareça clínica. Reserve para botões, preços ou uma única forma.
4. **Teste na impressão cedo** Azuis-petróleo muito vivos na tela podem sair visivelmente mais opacos no papel. Peça uma prova antes de encomendar embalagens ou sinalização; [RGB vs CMYK](https://gradiently.design/pt-br/guide/rgb-vs-cmyk) explica o porquê.
5. **Leve-o para os fundos** Posts de redes sociais e slides são onde as pessoas mais veem uma marca. Um fundo azul-petróleo consistente neles faz mais pelo reconhecimento do que o logo sozinho.

## Cores que combinam com o azul-petróleo

O complemento do azul-petróleo fica na faixa do laranja e do coral, então destaques quentes o fazem brilhar. Essa oposição também está por trás da conhecida correção de cor de azul-petróleo e laranja nos filmes, em que sombras frias realçam a pele quente. Para paletas mais calmas, mantenha o azul-petróleo com seus vizinhos, azul-marinho e verde-sálvia, como em [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors).

- Azul-petróleo ao laranja: `linear-gradient(135deg, #134e4a 0%, #0f766e 50%, #f97316 100%)`
- Espuma do mar ao petróleo profundo: `linear-gradient(160deg, #ccfbf1 0%, #5eead4 50%, #0f766e 100%)`
- Lagoa à noite: `radial-gradient(circle at 70% 30%, #14b8a6 0%, #134e4a 50%, #042f2e 100%)`
- Azul-petróleo e coral: `linear-gradient(135deg, #0f766e 0%, #fb7185 100%)`

Azul-petróleo com seus complementos quentes e com os próprios tons mais profundos. Mais em [degradês de azul-petróleo](https://gradiently.design/pt-br/guide/teal-gradient).

### Evite

- Texto branco sobre azul-petróleo vivo `#14b8a6`: cerca de 2,5:1
- Texto branco sobre `#0d9488`: cerca de 3,7:1, ainda abaixo de 4,5:1
- Azul-petróleo direto para o vermelho, que fica barrento no meio

### Faça

- Texto quase preto sobre azul-petróleo vivo, cerca de 8:1
- Texto branco sobre azul-petróleo profundo `#0f766e`, cerca de 5,5:1
- Misture o azul-petróleo passando pelo azul-marinho ou pelo verde, não pelo lado oposto do círculo

Confira seus próprios pares com o método de [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) e veja [degradês de turquesa](https://gradiently.design/pt-br/guide/turquoise-gradient) se quiser uma versão mais viva e ensolarada da mesma família. Quando você quiser um visual azul-petróleo só seu, busque "azul-petróleo profundo" no Mercado do Gradiently: cada Mark tem um dono por vez e mantém o seu texto legível enquanto se move.

## FAQ

### O que significa a cor azul-petróleo?

O azul-petróleo significa calma, clareza e confiança do azul, junto com renovação, saúde e equilíbrio do verde. Parece fresco e moderno, mas continua sério.

### Qual é o código hex do azul-petróleo?

A cor nomeada teal do CSS é #008080. As marcas costumam usar versões mais claras ou mais profundas, como #14b8a6 ou #0f766e.

### O azul-petróleo é azul ou verde?

Os dois. É um azul-esverdeado, feito na tela de partes iguais de luz verde e azul, sem vermelho.

### Que cor combina melhor com o azul-petróleo?

Laranja e coral são os complementos e o fazem brilhar. Azul-marinho, verde-sálvia, creme e dourado dão combinações mais calmas e elegantes.

### O que simboliza o azul-petróleo escuro?

O azul-petróleo escuro sugere profundidade, confiança e luxo discreto. Muitas marcas o usam como uma alternativa mais calorosa e distintiva ao azul-marinho.