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

[Canonical HTML page](https://gradiently.design/pt-pt/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 significado, e o facto de não ser um azul simples, é porque tantas marcas de saúde, finanças e tecnologia o escolhem.

## The short version

- O significado da cor azul-petróleo junta a calma, a clareza e a confiança do azul à renovação, saúde e equilíbrio do verde.
- Em inglês, a cor chama-se teal por causa da marrequinha (common teal), um pato pequeno cujos machos têm uma mancha verde iridescente à volta do olho.
- A cor CSS com nome teal é #008080, um verde-azulado médio feito de partes iguais de verde e azul, sem vermelho.
- As marcas escolhem o azul-petróleo porque inspira confiança como o azul, mas destaca-se das muitas marcas que já usam azul.
- O laranja e o coral são os complementares 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 pulsação: junta a confiança, a clareza e a serenidade do azul à renovação, saúde e equilíbrio do verde. O azul-petróleo parece fresco mas sério, ponderado mas não frio. Também foge à multidão. Uma marca que quer a segurança do azul sem parecer igual a todos os bancos e empresas de software encontra no azul-petróleo uma resposta pronta, o que explica em boa parte porque 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 deve o nome à marrequinha (common teal), um pequeno pato de superfície cujos machos têm uma larga faixa de verde iridescente do olho para trás. A palavra passou a ser usada como nome de cor em inglês no início do século XX. Nos ecrãs, o azul-petróleo significa quantidades iguais de luz verde e azul e nenhum vermelho; a palavra-chave CSS `teal` é 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 podes colar numa folha de estilos. O passo 700 leva texto branco com conforto.

## 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 pouco fundo, as lagoas, as piscinas minerais e a pátina do cobre antigo. Essas imagens fazem-no parecer limpo, fresco, reconfortante e um pouco precioso. Como todos os significados das cores, são associações aprendidas e não regras, e a [psicologia das cores](https://gradiently.design/pt-pt/guide/color-psychology) explica porque o contexto as altera.

| Do azul | Do verde | Do próprio 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 termos de género |

O azul-petróleo toma emprestado aos dois progenitores e acaba com um carácter 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 CSS: #008080
- Petróleo profundo: #0f766e
- Petróleo escuro: #134e4a
- Abismo: #042f2e
- Petróleo empoeirado: #5f8f8a

Os azuis-petróleo claros parecem leves e clínicos, os escuros parecem ricos e silenciosos, e o empoeirado lembra interiores e artesanato.

- **Espuma do mar e petróleo água:** frescura, spa, verão, simpatia.
- **Petróleo vivo:** energia e otimismo com um toque técnico; bom para apps e dashboards.
- **Petróleo profundo e escuro:** confiança, profundidade e luxo; uma forte alternativa ao azul-marinho.
- **Petróleo empoeirado:** calma, vintage e feito à mão; funciona para artigos de casa, cerâmica e cafés.

## Porque as marcas adoram o azul-petróleo

O azul-petróleo resolve um problema comum de branding. O azul é a escolha segura para tudo o que envolve dinheiro, saúde ou dados, por isso muitos concorrentes já o usam. O azul-petróleo mantém grande parte da credibilidade do azul e acrescenta uma sensação de cuidado e frescura, que é exatamente o tom que uma clínica, uma app de reformas ou um serviço de bem-estar querem. Também está livre da forte codificação de género que o rosa e alguns azuis trazem.

Há sítios onde o azul-petróleo é menos adequado. Se toda a tua categoria já pende para o azul-petróleo, como acontece em alguns mercados de bem-estar e dentários, deixa de ser distintivo e precisas de um segundo elemento de assinatura. Um azul-petróleo muito vivo também pode parecer jovem e tecnológico, o que pode destoar num escritório de advogados tradicional ou numa agência funerária. Nesses casos, um tom empoeirado ou muito escuro mantém a calma sem o ar de startup. [Como escolher as cores da marca](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors) tem um método mais completo.

Um post quadrado de uma clínica sobre um gradiente azul-petróleo calmo a anunciar consultas no próprio dia

Azul-petróleo para uma clínica: calmo, limpo e de confiança, sem o frio do azul de hospital.

Um post quadrado de uma app de finanças sobre um fundo azul-petróleo escuro com a frase As tuas poupanças, de relance

Um azul-petróleo escuro para uma app de dinheiro: credível como um banco, mas mais quente e moderno.

## Como construir uma marca à volta do azul-petróleo

1. **Decide quão claro ou escuro** Os azuis-petróleo claros parecem abertos e simpáticos; os escuros parecem estabelecidos. Escolhe um azul-petróleo principal e anota o hex, para todos os ficheiros usarem exatamente a mesma cor.
2. **Dá-lhe uma cor de texto** Verifica que tinta se lê no teu azul-petróleo principal. Os azuis-petróleo vivos pedem letra quase preta; os escuros aceitam branco.
3. **Junta um acento quente** Um coral, laranja ou dourado em pequenas doses evita que a paleta pareça clínica. Guarda-o para botões, preços ou uma só forma.
4. **Testa-o cedo em impressão** Os azuis-petróleo muito vivos no ecrã podem imprimir-se visivelmente mais baços. Pede uma prova antes de encomendares embalagens ou sinalética; [RGB vs CMYK](https://gradiently.design/pt-pt/guide/rgb-vs-cmyk) explica porquê.
5. **Leva-o para os fundos** Os posts e slides são onde as pessoas mais veem uma marca. Um fundo azul-petróleo coerente nesses suportes faz mais pelo reconhecimento do que o logótipo sozinho.

## Cores que combinam com azul-petróleo

O complementar do azul-petróleo está na gama do laranja e do coral, por isso os acentos quentes fazem-no brilhar. Essa oposição está também por trás da conhecida gradação de cor de azul-petróleo e laranja no cinema, onde sombras frias realçam a pele quente. Para paletas mais calmas, mantém o azul-petróleo com os seus vizinhos, azul-marinho e verde-salva, como em [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors).

- Petróleo ao laranja: `linear-gradient(135deg, #134e4a 0%, #0f766e 50%, #f97316 100%)`
- De espuma do mar a 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%)`
- Petróleo e coral: `linear-gradient(135deg, #0f766e 0%, #fb7185 100%)`

O azul-petróleo com os seus complementares quentes e com os seus próprios tons mais escuros. Mais em [gradientes azul-petróleo](https://gradiently.design/pt-pt/guide/teal-gradient).

### Evitar

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

### Fazer

- Texto quase preto em azul-petróleo vivo, cerca de 8:1
- Texto branco em azul-petróleo escuro `#0f766e`, cerca de 5,5:1
- Misturar o azul-petróleo através de azul-marinho ou verde, não atravessando o círculo

Verifica os teus pares com o método de [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) e vê [gradientes turquesa](https://gradiently.design/pt-pt/guide/turquoise-gradient) se quiseres uma versão mais viva e solar da mesma família. Quando quiseres um visual azul-petróleo só teu, procura no Mercado do Gradiently por “deep teal”: cada Mark tem um dono de cada vez e mantém o teu 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, juntamente com a renovação, a saúde e o equilíbrio do verde. Parece fresco e moderno, mas continua sério.

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

A cor CSS com nome teal é #008080. As marcas usam muitas vezes versões mais claras ou mais escuras, como #14b8a6 ou #0f766e.

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

Os dois. É um verde-azulado, feito no ecrã com partes iguais de luz verde e azul e sem vermelho.

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

O laranja e o coral são os seus complementares e fazem-no brilhar. Azul-marinho, verde-salva, 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 usam-no como alternativa mais quente e distintiva ao azul-marinho.