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

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

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

## The short version

- Um degradê azul-petróleo mistura tons azul-esverdeados, em geral de um aqua claro até um azul-esverdeado profundo.
- O azul-petróleo se mistura limpo com os vizinhos: ciano, esmeralda, azul e azul-marinho.
- Destaques quentes, como coral, pêssego e cobre, ficam do lado oposto ao azul-petróleo e o fazem brilhar quando ficam fora da mistura.
- Texto branco exige um azul-petróleo pelo menos tão profundo quanto #0f766e para passar no contraste; os mais claros pedem texto escuro.
- Um azul-petróleo bem escuro dá um excelente fundo de modo escuro, porque parece mais suave que o preto e menos óbvio que o azul-marinho.

Um **degradê azul-petróleo** corre entre tons azul-esverdeados: aqua claro na ponta clara, um petróleo limpo no meio e um azul-esverdeado escuro, quase tinta, na base. Como o azul-petróleo fica a meio caminho entre o azul e o verde, ele se mistura com facilidade para qualquer lado e quase nunca fica barrento. Os códigos abaixo o acompanham por profundidade, de uma lagoa ensolarada ao mar profundo, com notas sobre destaques, CSS e texto para cada uma.

## Uma escada de azul-petróleo para montar qualquer degradê

A maioria dos bons degradês azul-petróleo usa de dois a quatro degraus desta escada. Escolha vizinhos para uma mistura suave ou pule três degraus para dar drama. Os nomes abaixo são usados no resto do artigo.

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

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

## Degradês de azul-petróleo claro: lagoa e águas rasas

O azul-petróleo claro é limpo, fresco e discretamente alegre. Combina com bem-estar, piscinas e moda praia, clínicas odontológicas e de saúde e qualquer produto que queira parecer higiênico sem a frieza do azul puro. Leve-o em direção ao branco ou a um menta claro para mantê-lo 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 ensolarada: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Azuis-petróleo claros que continuam frescos. Cada um mantém uma parada quase branca para o texto escuro ter onde ficar.

## Degradês de azul-petróleo médio: recife e jade

O meio da faixa é o azul-petróleo no seu momento mais confiante. Funcionam bem para apps, painéis de fintech, marcas de sustentabilidade e educação, porque parecem ao mesmo tempo confiáveis (azul) e vivos (verde). Inclinar-se para o esmeralda o deixa natural; inclinar-se para o azul o deixa técnico.

- Recife: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Ciano à alga: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Do 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%)`

Petróleos médios puxam para o esmeralda ou para o azul. Escolha a direção pelo que a sua marca deve transmitir.

## Degradês de azul-petróleo escuro: o mar profundo

Na ponta escura, o azul-petróleo vira quase preto, com um sopro verde frio. É o azul-petróleo mais sofisticado: escritórios de advocacia, destilados, hotéis, arquitetura, eventos noturnos. Também dá um fundo excelente para um único destaque vivo, porque nada nele compete. Misturas escuras formam faixas em exportações comprimidas, então um pouco de granulado ajuda; veja [faixas em degradês](https://gradiently.design/pt-br/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 profundo à 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 única fonte de luz. Parecem caros e calmos.

## Destaques quentes para um degradê azul-petróleo

O oposto do azul-petróleo no círculo cromático é um vermelho-alaranjado quente, então coral, pêssego, damasco e cobre o fazem cantar. Mantenha a cor quente fora da mistura em si: um degradê do azul-petróleo ao coral passa por um cinza sem graça no meio. Use o destaque num botão, num título ou numa pequena forma. [Cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) explica a atração, e [degradês de coral](https://gradiently.design/pt-br/guide/coral-gradient) traz códigos para o outro lado.

- Evite: meio cinza: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Sol de cobre sobre petróleo profundo: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Do petróleo claro ao pêssego: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

Uma mistura saturada de azul-petróleo com coral fica cinza no meio. Uma pequena luz quente sobre o azul-petróleo, ou dois tons claros, funciona bem melhor.

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

## Como escolher um degradê azul-petróleo para a sua marca

O azul-petróleo é popular entre marcas de saúde, dinheiro e sustentabilidade, então o tom sozinho não vai diferenciar você. O que diferencia é a profundidade que você escolhe, o destaque com que o combina e a superfície. Parta do trabalho que o design precisa fazer.

| Se você é | Experimente | Combine com |
| --- | --- | --- |
| Uma clínica, piscina ou marca de skincare | Águas rasas ou Lagoa | Texto grafite, espaço em branco |
| Um app ou produto de fintech | Do petróleo ao azul | Um botão em coral |
| Uma cafeteria, floricultura ou loja de jardinagem | Jade | Creme e terracota |
| Um hotel, bar ou escritório de advocacia | Luz vinda de cima | Detalhes em cobre ou latão |
| Um evento noturno | Feixe de luz | Título em lagoa clara |

Pontos de partida, não regras. Teste cada um com o seu título e o seu logo reais.

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

O azul-petróleo profundo é uma bela alternativa ao preto ou ao azul-marinho numa interface escura. Parece mais suave que o preto puro e ainda dá ao texto claro muito contraste. Aqui está um fundo para a estrutura de um 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-br/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 de azul-petróleo profundo com um brilho petróleo no topo. Links em lagoa clara continuam legíveis sobre ela.

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

O azul-petróleo médio engana. O `#14b8a6` parece forte o bastante para texto branco, mas mede cerca de 2,5 para 1, uma reprovação clara. O branco precisa de Alga (`#0f766e`, cerca de 5,5 para 1) ou mais escuro. Em qualquer coisa do Aqua para cima, use a cor Abismo `#042f2e` como tinta: ela mantém o texto na família do azul-petróleo e se lê com facilidade.

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

O azul-petróleo passa de texto escuro para texto branco entre Recife e Alga.

Post vertical de um spa com texto branco sobre um degradê de azul-petróleo profundo

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 combinar com o formato

O mesmo design como story, renderizado de novo em vez de recortado.

Esse último ponto importa mais do que parece. Um degradê recortado de um post para um story leva a luz para o lugar errado. No Gradiently, um Mark é renderizado em todos os tamanhos, e o Designer pode criar os outros tamanhos para você, então um visual azul-petróleo continua equilibrado no feed, no story e na [imagem principal do site](https://gradiently.design/pt-br/guide/website-hero-background).

## FAQ

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

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

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

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

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

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

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

Só sobre azul-petróleo profundo, de uns `#0f766e` para baixo. Azuis-petróleo vivos e claros pedem texto escuro para passar no contraste.

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

Sim. Um azul-petróleo bem escuro, como `#042f2e`, é mais suave que o preto e mais distintivo que o azul-marinho, e destaques em azul-petróleo claro se leem bem sobre ele.