# Gradiente turquesa: códigos tropicais com profundidade

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

O turquesa vivo, sozinho, parece o ícone de uma piscina. Dá-lhe um fundo escuro, uma margem quente e um pouco de luz, e passa a ser o mar de uma ilha. Aqui fica como, com códigos.

## The short version

- Um gradiente turquesa mistura azuis esverdeados vivos, e parece mais natural quando inclui também um azul mais profundo e um realce claro, quase branco.
- O turquesa é mais claro e mais vivo do que o verde-azulado escuro (teal) e mais verde do que o ciano; a cor CSS com nome turquoise é #40e0d0.
- Os gradientes turquesa planos parecem sintéticos, por isso acrescenta profundidade com um fundo azul-marinho, um realce pálido ou uma cor de areia quente.
- O texto branco falha sobre turquesa vivo; usa antes um azul-marinho escuro como #083344 para a letra.
- A areia, o coral e o 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 verdadeiramente tropicais têm três coisas: um realce pálido onde bate a luz, um corpo turquesa claro e um azul mais profundo por baixo. Sem esse alcance, o turquesa parece plano e sintético. Abaixo ficam códigos para lagoas vivas, turquesa com profundidade a sério e turquesa junto a areia quente, seguidos do CSS e das cores de letra que mantêm tudo legível.

## Turquesa, teal, ciano e água-marinha comparados

Estas quatro cores usam-se muitas vezes como sinónimos, mas são diferentes, e escolher a certa muda o ambiente. O turquesa é a mais viva e a mais de férias do grupo.

| Cor | Hex típico | Como se lê |
| --- | --- | --- |
| Turquesa | `#40e0d0` | Viva, esverdeada, tropical, de pedra preciosa |
| Água-marinha | `#7fffd4` (aquamarine) | Pálida, de menta, leve, aquática |
| Ciano | `#00ffff` (cyan do CSS) | Elétrico, mais frio, digital |
| Teal | `#008080` (teal do CSS) | Mais profundo, suave, calmo, adulto |

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

Se a tua marca quer calma e seriedade, provavelmente queres antes [gradientes teal](https://gradiently.design/pt-pt/guide/teal-gradient). Se quer férias, energia e calor, fica por aqui.

## Gradientes turquesa tropicais e vivos

São as misturas de postal: água pouco funda sobre areia branca. Cada uma inclui um tom pálido para que o turquesa tenha algo contra o qual brilhar, e nenhuma resvala para o cinzento.

- Água rasa: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagoa: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Enseada ao sol: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Do turquesa ao céu: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Beira 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 pálido ou branco que faz cada uma parecer iluminada.

## Como dar profundidade a um gradiente turquesa

A água tropical verdadeira nunca tem uma só cor. É pálida sobre a areia, turquesa sobre o recife pouco fundo e azul profundo onde o fundo desaparece. Copia essa estrutura e o teu gradiente deixa de parecer um preenchimento plano.

1. **Escolhe um fundo** Escolhe um azul profundo para a parte mais escura, como `#0c4a6e` ou `#083344`. Ancora o turquesa e dá-lhe algo contra o qual brilhar.
2. **Define o corpo** Usa o teu turquesa, entre `#2dd4bf` e `#40e0d0`, na maior área, normalmente o meio ou o topo.
3. **Acrescenta um realce** Põe um tom pequeno, quase branco, como `#ecfeff`, onde a luz bateria. Um gradiente radial num canto funciona bem.
4. **Aquece uma margem** Se quiseres, passa uma cor de areia ao longo da base ou de um canto, para que a mistura fria tenha uma margem quente.
5. **Acaba a superfície** Junta um grão leve para que as cores vivas não façam bandas quando a plataforma comprimir a imagem. Os [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) têm o método.

- Queda no fundo: `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%)`
- Fundo luminoso: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turquesa com um fundo azul profundo. Servem para viagens, mergulho, bebidas e eventos de praia ao anoitecer.

## Gradientes turquesa e areia

O parceiro mais natural do turquesa é a própria praia: areia quente, coral e branco. Estas cores ficam do lado oposto do círculo cromático, por isso mistura-as apenas onde a saturação é baixa, através de tons pálidos, ou mantém-nas como áreas separadas. Assim tens uma linha de costa e não uma mancha cinzenta. As [paletas de cores de verão](https://gradiently.design/pt-pt/guide/summer-color-palettes) têm mais combinações de férias.

- Linha de 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 pálido, para que os lados quente e frio nunca se tornem cinzentos.

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

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

## Onde um gradiente turquesa funciona melhor

O turquesa é forte, por isso merece o seu lugar onde as pessoas já esperam férias, água ou diversão. Alguns usos em que supera qualquer outra cor:

- **Viagens e hotéis:** um story de 1080×1920 com «Queda no fundo» atrás de uma só linha como «Três noites em Lisboa».
- **Escolas de natação e piscinas:** um fundo pálido «Água rasa» para horários, com letra azul-marinho escura.
- **Bares de batidos e marcas de sumos:** «Lagoa» com um autocolante de preço coral, que se destaca por estar do lado oposto ao turquesa.
- **Ementas de verão e cartazes de festival:** «Linha de costa» num cartaz A4, o mar no topo e a areia onde vão os detalhes.
- **Joalharia:** o turquesa é também uma pedra, por isso um «Luz através da água» profundo atrás de fotografias de produto em prata ou ouro parece certo.

Evita-o em tudo o que precise de parecer calmo ou formal. Um escritório de advogados ou uma agência funerária ficam mais bem servidos com 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 de renderizar e não precisa de imagem. A sintaxe está explicada nos [gradientes radiais em CSS](https://gradiently.design/pt-pt/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 em cima à esquerda, turquesa no meio e água profunda em baixo. Põe os títulos na metade superior, na tinta de água profunda.

## Texto sobre um gradiente turquesa

O turquesa é muito mais claro do que parece. O branco sobre `#40e0d0` mede cerca de 1,6 para 1, o que ninguém consegue ler com conforto ao sol num telemóvel. A água profunda `#083344` sobre o mesmo turquesa mede cerca de 8 para 1. Usa letra azul-marinho escura nas áreas vivas e só passa ao branco onde o gradiente já desceu a um azul profundo. Para as regras completas, vê [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

Um post de evento de desportos náuticos com texto pálido a desaparecer sobre um gradiente turquesa vivo

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

O mesmo post de evento com texto escuro e nítido numa zona mais calma do gradiente turquesa

O mesmo post com a cor da letra e a zona calma escolhidas para as palavras.

É exatamente o que um Mark do Gradiently faz sozinho: a sua região mais calma move-se para trás das palavras e a tinta automática escolhe letra clara ou escura por linha a partir das cores do próprio Mark. As equipas de viagens e hotelaria que publicam todos os dias encontram mais ideias nas [redes sociais para agências de viagens](https://gradiently.design/pt-pt/guide/travel-agency-social-media).

## FAQ

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

A cor CSS com nome `turquoise` é `#40e0d0`. Versões ligeiramente mais profundas, como `#2dd4bf`, também são muito usadas.

### Que cores combinam com um gradiente turquesa?

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

### O turquesa é o mesmo que teal?

Não. O turquesa é mais claro, mais vivo e mais tropical; o teal é mais profundo e mais suave. Ambos 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. Usa letra azul-marinho escura ou passa o texto branco para a parte mais azul e escura do gradiente.

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

Acrescenta um fundo azul profundo, um realce quase branco e um grão leve. Esses três passos fazem-no parecer água e não um preenchimento plano.