# Gradiente turquesa: códigos tropicais com profundidade

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

O turquesa vivo sozinho parece o ícone de uma piscina. Dê a ele um fundo profundo, uma praia quente e um pouco de luz, e ele vira o mar de uma ilha. Veja como, com os códigos.

## The short version

- Um gradiente turquesa mistura azuis esverdeados vivos, e fica mais natural quando inclui também um azul mais profundo e um realce claro, quase branco.
- O turquesa é mais claro e vivo que o verde-azulado escuro (teal) e mais verde que o ciano; a cor nomeada turquoise do CSS é #40e0d0.
- Gradientes turquesa chapados parecem sintéticos, então some profundidade com um fundo azul-marinho, um realce claro ou um tom de areia quente.
- Texto branco falha sobre turquesa vivo; use um azul-marinho profundo como #083344 para a tipografia.
- Areia, coral e branco são os parceiros mais naturais do turquesa porque lembram uma praia.

Um **gradiente turquesa** mistura azuis vivos e esverdeados, e os que parecem de fato tropicais têm três coisas: um realce claro onde a luz bate, um corpo turquesa nítido e um azul mais profundo por baixo. Sem essa amplitude, o turquesa fica chapado e sintético. Abaixo estão códigos para lagoas vivas, turquesa com profundidade de verdade e turquesa ao lado de areia quente, seguidos do CSS e das cores de texto que mantêm tudo legível.

## Turquesa, teal, ciano e aqua comparados

Esses quatro costumam ser usados como sinônimos, mas são cores diferentes, e escolher a certa muda o clima. O turquesa é o mais vivo e o mais de férias do grupo.

| Cor | Hex típico | Como se lê |
| --- | --- | --- |
| Turquesa | `#40e0d0` | Vivo, esverdeado, tropical, de pedra preciosa |
| Aqua | `#7fffd4` (água-marinha) | Pálido, de menta, leve, aquoso |
| Ciano | `#00ffff` (cyan do CSS) | Elétrico, mais frio, digital |
| Teal | `#008080` (teal do CSS) | Mais profundo, discreto, calmo, adulto |

O turquesa é mais claro que o teal e mais verde que o ciano. Para a versão mais profunda, veja o artigo sobre teal.

Se a sua marca quer calma e seriedade, provavelmente você quer [gradientes teal](https://gradiently.design/pt-br/guide/teal-gradient). Se quer férias, energia e calor, fique por aqui.

## Gradientes turquesa tropicais e vivos

São as misturas de cartão-postal: água rasa sobre areia branca. Cada uma inclui um tom claro para o turquesa ter contra o que brilhar, e nenhuma escorrega para o cinza.

- Água rasa: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagoa: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Enseada ensolarada: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Do turquesa ao céu: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Borda do recife: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Água-marinha: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Seis misturas turquesa vivas. Um tom claro ou branco é o que faz cada uma parecer iluminada.

## Como dar profundidade a um gradiente turquesa

A água tropical de verdade nunca tem uma cor só. Ela é pálida sobre a areia, turquesa sobre o recife raso e azul profundo onde o fundo despenca. Copie essa estrutura e seu gradiente deixa de parecer um preenchimento chapado.

1. **Escolha um fundo** Escolha um azul profundo para a parte mais escura, como `#0c4a6e` ou `#083344`. Ele ancora o turquesa e dá a ele algo contra o que brilhar.
2. **Defina o corpo** Use seu turquesa, entre `#2dd4bf` e `#40e0d0`, na maior área, em geral no meio ou no topo.
3. **Adicione um realce** Coloque um tom pequeno, quase branco, como `#ecfeff`, onde a luz bateria. Um gradiente radial em um canto funciona bem.
4. **Aqueça uma borda** Se quiser, passe um tom de areia pela base ou por um canto, para que a mistura fria tenha uma praia quente.
5. **Finalize a superfície** Some um grão leve para que as cores vivas não formem faixas quando a plataforma comprimir a imagem. [Gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients) traz o método.

- Queda do recife: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Luz através da água: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Do turquesa ao cobalto: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Profundeza brilhante: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turquesa com fundo azul profundo. Combinam com viagem, mergulho, bebidas e eventos de praia à noite.

## Gradientes turquesa e areia

O parceiro mais natural do turquesa é a própria praia: areia quente, coral e branco. Essas cores ficam do lado oposto do turquesa no círculo cromático, então misture-as só onde a saturação é baixa, por tons claros, ou mantenha-as em áreas separadas. Assim você ganha uma linha de costa e não uma mancha cinza. [Paletas de cores de verão](https://gradiently.design/pt-br/guide/summer-color-palettes) traz mais combinações de férias.

- Linha da costa: `linear-gradient(180deg, #40e0d0 0%, #a5f3fc 55%, #fef3c7 75%, #f5deb3 100%)`
- Da areia ao mar: `linear-gradient(135deg, #f5e6cc 0%, #e6fffb 50%, #40e0d0 100%)`
- Coral sobre turquesa: `radial-gradient(circle at 85% 85%, #fda4af 0%, transparent 30%), linear-gradient(160deg, #5eead4 0%, #0891b2 100%)`

O turquesa encontra a areia por um meio claro, então os lados quente e frio nunca viram cinza.

- Espuma: #ecfeff
- Turquesa: #40e0d0
- Azul do recife: #0891b2
- Água profunda: #083344
- Areia: #f5deb3
- Coral: #fb7185

Uma paleta tropical completa: espuma, dois azuis, uma tinta profunda, areia e um destaque coral.

## Onde um gradiente turquesa funciona melhor

O turquesa é chamativo, então ganha seu lugar onde as pessoas já esperam férias, água ou diversão. Alguns usos em que ele vence qualquer outra cor:

- **Viagens e hotéis:** um story de 1080×1920 com “Queda do recife” atrás de uma única linha como “Três noites em Lisboa”.
- **Escolas de natação e piscinas:** um fundo claro “Água rasa” para grades de horários, com texto azul-marinho profundo.
- **Smoothies e marcas de suco:** “Lagoa” com um adesivo de preço coral, que se destaca porque fica oposto ao turquesa.
- **Cardápios de verão e pôsteres de festival:** “Linha da costa” em um pôster A4, o mar no topo e a areia onde vão os detalhes.
- **Joias:** o turquesa também é uma pedra, então um “Luz através da água” profundo atrás de fotos de produto em prata ou ouro cai bem.

Evite-o para o que precisa parecer silencioso ou formal. Um escritório de advocacia ou uma funerária será mais bem servido por teal ou azul-marinho.

## CSS de gradiente turquesa com luz

Sobrepor dois realces radiais a uma base linear dá a impressão de luz do sol através da água. É leve para renderizar e não precisa de imagem. A sintaxe está explicada em [gradientes radiais em CSS](https://gradiently.design/pt-br/guide/css-radial-gradient).

```css
.section-tropical {
  background-color: #0891b2; /* fallback */
  background-image:
    radial-gradient(circle at 20% 15%, rgb(236 254 255 / 0.9) 0%, transparent 30%),
    radial-gradient(circle at 80% 40%, rgb(64 224 208 / 0.8) 0%, transparent 45%),
    linear-gradient(180deg, #5eead4 0%, #0891b2 60%, #083344 100%);
  color: #083344;
}
```

Luz de espuma no alto à esquerda, turquesa no meio e água profunda embaixo. Coloque os títulos na metade de cima, na tinta de água profunda.

## Texto sobre um gradiente turquesa

O turquesa é bem mais claro do que parece. Branco sobre `#40e0d0` mede cerca de 1,6 para 1, o que ninguém lê com conforto ao sol no celular. A água profunda `#083344` sobre o mesmo turquesa mede cerca de 8 para 1. Use texto azul-marinho escuro nas áreas vivas e só passe para o branco onde o gradiente já caiu para um azul profundo. Para as regras completas, veja [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

Um post de evento de esportes aquáticos com texto claro desbotando sobre um gradiente turquesa vivo

Palavras claras sobre turquesa vivo desbotam assim que alguém olha para elas ao ar livre.

O mesmo post de evento com texto escuro e nítido sobre uma área mais calma do gradiente turquesa

O mesmo post com a cor do texto e a zona calma escolhidas para as palavras.

É exatamente o que um Mark do Gradiently faz sozinho: sua região mais calma se move para trás das palavras e a tinta automática escolhe texto claro ou escuro por linha a partir das cores do próprio Mark. Equipes de viagem e hospitalidade que publicam todo dia encontram mais ideias em [redes sociais para agências de viagem](https://gradiently.design/pt-br/guide/travel-agency-social-media).

## FAQ

### Qual é o código hex do turquesa?

A cor nomeada `turquoise` do CSS é `#40e0d0`. Versões um pouco mais profundas, como `#2dd4bf`, também são muito usadas.

### Que cores combinam com um gradiente turquesa?

Azul-marinho profundo, branco, areia e coral. O azul-marinho dá profundidade, o branco dá luz, e areia ou coral trazem calor quando ficam fora da mistura principal.

### Turquesa é o mesmo que teal?

Não. O turquesa é mais claro, vivo e tropical; o teal é mais profundo e discreto. Os dois ficam entre o azul e o verde.

### Posso usar texto branco sobre turquesa?

Não sobre turquesa vivo, onde o branco falha muito no contraste. Use texto azul-marinho profundo ou leve o texto branco para a parte mais azul e escura do gradiente.

### Como faço um gradiente turquesa parecer menos chapado?

Some um fundo azul profundo, um realce quase branco e um grão leve. Esses três passos fazem o resultado parecer água e não um preenchimento chapado.