# Gradiente azul-petróleo: códigos da lagoa ao mar profundo

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

O azul-petróleo fica exatamente entre o azul e o verde, o que o torna calmo, esperto e invulgarmente fácil de misturar. Desce da lagoa ao mar profundo com códigos para cada profundidade.

## The short version

- Um gradiente azul-petróleo mistura tons de verde-azulado, geralmente de um azul-água pálido a um verde-azulado profundo.
- O azul-petróleo mistura-se bem com os seus vizinhos: ciano, esmeralda, azul e azul-marinho.
- Acentos quentes como coral, pêssego e cobre ficam do lado oposto e fazem-no brilhar quando se mantêm fora da mistura.
- O texto branco precisa de um azul-petróleo pelo menos tão escuro como #0f766e para passar no contraste; os mais claros pedem letra escura.
- Um azul-petróleo muito escuro é um excelente fundo para modo escuro, porque parece mais suave do que o preto e menos óbvio do que o azul-marinho.

Um **gradiente azul-petróleo** corre entre tons de verde-azulado: azul-água pálido na ponta clara, um petróleo médio e límpido no meio e um verde-azulado escuro, quase tinta, em baixo. Como o azul-petróleo fica a meio caminho entre o azul e o verde, mistura-se com facilidade para qualquer dos lados e quase nunca fica sujo. Os códigos abaixo seguem-no por profundidade, de uma lagoa solarenga ao mar profundo, com notas sobre acentos, CSS e letra para cada um.

## Uma escada de azul-petróleo para construir qualquer gradiente

A maioria dos bons gradientes azul-petróleo tem dois a quatro passos desta escada. Escolhe vizinhos para uma mistura suave, ou salta três degraus para dar drama. Os nomes abaixo são usados no resto do artigo.

- Águas rasas: #ccfbf1
- Lagoa: #5eead4
- Água: #2dd4bf
- Petróleo: #14b8a6
- Recife: #0d9488
- Alga: #0f766e
- Petróleo escuro: #115e59
- Abismo: #042f2e

Oito azuis-petróleo do claro ao escuro. Dois ou três vizinhos dão uma mistura calma; do claro ao escuro dá profundidade.

## Gradientes azul-petróleo claros: lagoa e águas rasas

O azul-petróleo claro é limpo, fresco e discretamente alegre. Serve bem-estar, piscinas e fatos de banho, clínicas dentárias e de saúde e qualquer produto que queira parecer higiénico sem a frieza do azul puro. Leva-o para o branco ou para um menta pálido para o manter suave.

- Águas rasas: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Lagoa: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Do céu à lagoa: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Piscina ao sol: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Azuis-petróleo pálidos que se mantêm frescos. Cada um guarda uma paragem quase branca para o texto escuro ter onde assentar.

## Gradientes azul-petróleo médios: recife e jade

O meio da gama é o azul-petróleo no seu ponto mais confiante. Funcionam bem para apps, dashboards de fintech, marcas de sustentabilidade e educação, porque parecem ao mesmo tempo de confiança (azul) e vivos (verde). Inclinar para o esmeralda torna-o natural; inclinar para o azul torna-o técnico.

- Recife: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Do ciano à alga: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Petróleo ao azul: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Petróleo em três passos: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

Os azuis-petróleo médios puxam para o esmeralda ou para o azul. Escolhe a direção pelo que a tua marca deve transmitir.

## Gradientes azul-petróleo escuros: o mar profundo

Na ponta escura, o azul-petróleo fica quase preto com um sopro de verde frio. É o azul-petróleo mais sofisticado: escritórios de advogados, bebidas espirituosas, hotéis, arquitetura, eventos noturnos. Também é uma base soberba para um acento vivo, porque nada nele compete. As misturas escuras fazem banding nas exportações comprimidas, por isso um pouco de grão ajuda; vê [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

- Descida: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Luz vinda de cima: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Petróleo escuro à meia-noite: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Feixe de luz: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Azuis-petróleo escuros com uma só fonte de luz. Parecem caros e calmos.

## Acentos quentes para um gradiente azul-petróleo

O oposto do azul-petróleo no círculo cromático é um vermelho-alaranjado quente, por isso coral, pêssego, alperce e cobre fazem-no cantar. Mantém a cor quente fora da própria mistura: um gradiente do azul-petróleo ao coral passa por um cinzento baço no meio. Usa antes o acento num botão, num título ou numa pequena forma. [Cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) explica a atração, e [gradientes coral](https://gradiently.design/pt-pt/guide/coral-gradient) tem códigos para o outro lado.

- A evitar: meio cinzento: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Sol de cobre sobre petróleo escuro: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Petróleo pálido ao pêssego: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

Uma mistura saturada de azul-petróleo com coral fica cinzenta no meio. Uma pequena luz quente sobre o azul-petróleo, ou dois tons pálidos, funciona muito melhor.

Repara na terceira amostra: tons muito pálidos de opostos misturam-se bem, porque há pouca saturação a perder. É um truque útil para embalagens suaves e papelaria de casamento.

## Escolher um gradiente azul-petróleo para a tua marca

O azul-petróleo é popular em marcas de saúde, dinheiro e sustentabilidade, por isso o tom sozinho não te distingue. O que distingue é a profundidade que escolhes, o acento com que o combinas e a superfície. Parte do trabalho que o design tem de fazer.

| Se és | Experimenta | Combina com |
| --- | --- | --- |
| Uma clínica, piscina ou marca de cuidados da pele | Águas rasas ou Lagoa | Letra cor de carvão, espaço em branco |
| Uma app ou produto de fintech | Petróleo ao azul | Uma cor de botão coral |
| Um café, florista ou centro de jardinagem | Jade | Creme e terracota |
| Um hotel, bar ou escritório de advogados | Luz vinda de cima | Detalhes em cobre ou latão |
| Um evento noturno | Feixe de luz | Título em lagoa pálida |

Pontos de partida, não regras. Testa cada um com o teu título e logótipo reais.

## CSS de gradiente azul-petróleo para uma interface em modo escuro

O azul-petróleo escuro é uma bela alternativa ao preto ou ao azul-marinho numa interface escura. Parece mais suave do que o preto puro e continua a dar muito contraste ao texto pálido. Eis um fundo para a estrutura de uma app, com um brilho suave atrás do topo da página. Mais sobre a abordagem em [design de modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design).

```css
:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }
```

Uma estrutura em azul-petróleo escuro com um brilho petróleo no topo. As ligações em lagoa pálida continuam legíveis sobre ela.

## Texto legível sobre azul-petróleo

O azul-petróleo médio engana. `#14b8a6` parece forte o suficiente para letra branca mas mede cerca de 2,5 para 1, uma falha clara. O branco precisa de Alga (`#0f766e`, cerca de 5,5 para 1) ou mais escuro. Em tudo de Água para cima, usa a cor Abismo `#042f2e` como tinta: mantém o texto na família do azul-petróleo e lê-se com facilidade.

| Fundo | Texto branco | Texto Abismo #042f2e |
| --- | --- | --- |
| Lagoa `#5eead4` | Falha | Cerca de 9,8:1 |
| Petróleo `#14b8a6` | Cerca de 2,5:1, falha | Cerca de 5,8:1 |
| Recife `#0d9488` | Cerca de 3,7:1, só texto grande | Fraco |
| Alga `#0f766e` | Cerca de 5,5:1, passa | Falha |
| Petróleo escuro `#115e59` | Cerca de 7,6:1, passa | Falha |

O azul-petróleo passa da letra escura para a branca entre Recife e Alga.

Um post vertical de spa com texto branco sobre um gradiente azul-petróleo escuro

Como post vertical, o título fica no azul-petróleo mais calmo.

O mesmo design de spa como um story alto, com a luz azul-petróleo movida para se ajustar ao formato

O mesmo design como story, desenhado de novo e não cortado.

Este último ponto importa mais do que parece. Um gradiente cortado de um post para um story move a luz para o sítio errado. No Gradiently, um Mark é desenhado em cada tamanho, e o Designer pode fazer os outros tamanhos por ti, para um visual azul-petróleo continuar equilibrado no feed, no story e no [hero do site](https://gradiently.design/pt-pt/guide/website-hero-background).

## FAQ

### Que cores combinam com um gradiente azul-petróleo?

Ciano, esmeralda, azul e azul-marinho misturam-se com ele. Coral, pêssego, cobre e dourado são fortes acentos quentes quando usados fora da mistura.

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

O `teal` com nome da web é `#008080`. A maioria das paletas modernas usa versões mais vivas, como `#14b8a6` para um petróleo médio e `#0f766e` para um mais escuro.

### Qual é a diferença entre azul-petróleo e turquesa?

O azul-petróleo é mais escuro e mais discreto; o turquesa é mais claro, mais vivo e inclina-se um pouco mais para o verde. Ambos ficam entre o azul e o verde.

### Posso usar texto branco sobre azul-petróleo?

Só sobre azul-petróleo escuro, de cerca de `#0f766e` para baixo. Os azuis-petróleo vivos e claros precisam de texto escuro para passar no contraste.

### O azul-petróleo é uma boa cor para o modo escuro?

Sim. Um azul-petróleo muito escuro como `#042f2e` é mais suave do que o preto e mais distintivo do que o azul-marinho, e os acentos em azul-petróleo pálido leem-se bem sobre ele.