# Dégradé turquoise : codes tropicaux tout en profondeur

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

Un turquoise vif seul ressemble à une icône de piscine. Donnez-lui un fond profond, une rive chaude et un peu de lumière : c’est la mer d’une île. Voici comment, avec les codes.

## The short version

- Un dégradé turquoise fond des bleus vifs tirant sur le vert ; il paraît plus naturel avec un bleu plus profond et une lumière claire, presque blanche.
- Le turquoise est plus clair et plus vif que la sarcelle, et plus vert que le cyan ; la couleur CSS nommée turquoise vaut #40e0d0.
- Les dégradés turquoise plats font artificiels : ajoutez de la profondeur avec un fond bleu marine, une lumière pâle ou un sable chaud.
- Le texte blanc échoue sur un turquoise vif ; prenez plutôt un bleu marine profond comme #083344.
- Le sable, le corail et le blanc sont les partenaires les plus naturels du turquoise, car ils évoquent la plage.

Un **dégradé turquoise** fond des bleus vifs aux reflets verts, et ceux qui font vraiment tropical ont trois choses : une lumière pâle là où le soleil frappe, un corps turquoise net et un bleu plus profond dessous. Sans cette amplitude, le turquoise paraît plat et artificiel. Voici des codes pour des lagons vifs, un turquoise doté de vraie profondeur et un turquoise près du sable chaud, puis le CSS et les couleurs de texte qui gardent tout lisible.

## Turquoise, sarcelle, cyan et aqua comparés

On les emploie l’un pour l’autre, mais ce sont des couleurs différentes, et bien choisir change l’ambiance. Le turquoise est le plus vif et le plus vacances du groupe.

| Couleur | Hex typique | Impression |
| --- | --- | --- |
| Turquoise | `#40e0d0` | Vif, verdâtre, tropical, pierre précieuse |
| Aqua | `#7fffd4` (aquamarine) | Pâle, mentholé, léger, aquatique |
| Cyan | `#00ffff` (cyan CSS) | Électrique, plus froid, numérique |
| Sarcelle | `#008080` (teal CSS) | Plus profonde, sourde, calme, adulte |

Le turquoise est plus clair que la sarcelle et plus vert que le cyan. Pour la version plus profonde, voyez l’article sur la sarcelle.

Si votre marque veut du calme et du sérieux, il vous faut sans doute plutôt [des dégradés sarcelle](https://gradiently.design/fr/guide/teal-gradient). Si elle veut des vacances, de l’énergie et de la chaleur, restez ici.

## Dégradés turquoise tropicaux vifs

Ce sont les fondus carte postale : eau peu profonde sur sable blanc. Chacun contient un arrêt pâle pour que le turquoise ait de quoi rayonner, et aucun ne vire au gris.

- Eau peu profonde: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagon: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Crique ensoleillée: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Turquoise vers ciel: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Bord du récif: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Aigue-marine: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Six fondus turquoise vifs. Un arrêt pâle ou blanc donne à chacun son éclairage.

## Comment donner de la profondeur à un dégradé turquoise

L’eau tropicale n’a jamais une seule couleur. Elle est pâle sur le sable, turquoise sur le récif peu profond et d’un bleu profond là où le fond s’effondre. Copiez cette structure et votre dégradé cesse de ressembler à un aplat.

1. **Choisissez un fond** Prenez un bleu profond pour la partie la plus sombre, comme `#0c4a6e` ou `#083344`. Il ancre le turquoise et lui donne de quoi briller.
2. **Posez le corps** Employez votre turquoise, entre `#2dd4bf` et `#40e0d0`, sur la plus grande zone, en général le milieu ou le haut.
3. **Ajoutez une lumière** Placez un petit arrêt presque blanc comme `#ecfeff` là où la lumière frapperait. Un dégradé radial dans un coin fonctionne bien.
4. **Réchauffez un bord** Si vous voulez, faites courir une teinte de sable le long du bas ou dans un coin, pour que le fondu froid ait une rive chaude.
5. **Soignez la surface** Ajoutez un grain léger pour que les couleurs vives ne forment pas de bandes quand la plateforme compresse votre image. [Les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) donnent la méthode.

- Dénivelé: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Lumière dans l’eau: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Turquoise vers cobalt: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Profondeur lumineuse: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Du turquoise avec un fond bleu profond. Parfait pour le voyage, la plongée, les boissons et les soirées plage.

## Dégradés turquoise et sable

Le partenaire le plus naturel du turquoise, c’est la plage elle-même : sable chaud, corail et blanc. Ces couleurs sont de l’autre côté du cercle par rapport au turquoise ; fondez-les donc seulement là où la saturation est faible, par des arrêts pâles, ou gardez-les en zones séparées. Vous obtenez ainsi un rivage plutôt qu’une bavure grise. [Les palettes de couleurs d’été](https://gradiently.design/fr/guide/summer-color-palettes) proposent d’autres combinaisons de vacances.

- Rivage: `linear-gradient(180deg, #40e0d0 0%, #a5f3fc 55%, #fef3c7 75%, #f5deb3 100%)`
- Du sable à la mer: `linear-gradient(135deg, #f5e6cc 0%, #e6fffb 50%, #40e0d0 100%)`
- Corail sur turquoise: `radial-gradient(circle at 85% 85%, #fda4af 0%, transparent 30%), linear-gradient(160deg, #5eead4 0%, #0891b2 100%)`

Le turquoise rencontre le sable par un milieu pâle : les côtés chaud et froid ne virent donc jamais au gris.

- Écume: #ecfeff
- Turquoise: #40e0d0
- Bleu récif: #0891b2
- Eau profonde: #083344
- Sable: #f5deb3
- Corail: #fb7185

Une palette tropicale complète : écume, deux bleus, une encre profonde, du sable et un accent corail.

## Où un dégradé turquoise fonctionne le mieux

Le turquoise est exubérant : il mérite sa place là où l’on attend déjà vacances, eau ou fête. Quelques usages où il bat toutes les autres couleurs :

- **Voyage et hôtels :** une story 1080×1920 avec « Dénivelé » derrière une seule ligne comme « Trois nuits à Lisbonne ».
- **Écoles de natation et piscines :** un fond pâle « Eau peu profonde » pour les horaires, avec un texte bleu marine profond.
- **Bars à smoothies et marques de jus :** « Lagon » avec une seule pastille de prix corail, qui ressort car elle est à l’opposé du turquoise.
- **Menus d’été et affiches de festival :** « Rivage » sur une affiche A4, la mer en haut et le sable là où vont les détails.
- **Bijouterie :** le turquoise est aussi une pierre ; un « Lumière dans l’eau » profond derrière des photos produit en argent ou en or paraît juste.

Évitez-le pour tout ce qui doit paraître discret ou formel. Un cabinet d’avocats ou des pompes funèbres seront mieux servis par la sarcelle ou le bleu marine.

## CSS de dégradé turquoise avec de la lumière

Superposer deux lumières radiales à une base linéaire donne l’impression du soleil à travers l’eau. C’est léger à afficher et ne demande aucune image. La syntaxe est expliquée dans [les dégradés radiaux CSS](https://gradiently.design/fr/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;
}
```

Une lueur d’écume en haut à gauche, du turquoise au milieu et de l’eau profonde en bas. Placez les titres dans la moitié haute, en encre eau profonde.

## Du texte sur un dégradé turquoise

Le turquoise est bien plus clair qu’il n’en a l’air. Du blanc sur `#40e0d0` mesure environ 1,6 pour 1, ce que personne ne lit confortablement en plein soleil sur un téléphone. Eau profonde `#083344` sur le même turquoise mesure environ 8 pour 1. Employez un texte bleu marine foncé sur les zones vives, et ne passez au blanc que là où le dégradé a plongé vers un bleu profond. Pour toutes les règles, voyez [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility).

Un post d’événement nautique avec un texte pâle qui s’efface sur un dégradé turquoise vif

Des mots clairs sur un turquoise vif s’effacent dès qu’on les regarde en plein air.

Le même post d’événement avec un texte profond bien net sur une zone plus calme du dégradé turquoise

Le même post, avec la couleur de texte et la zone calme choisies pour les mots.

C’est exactement ce que fait un Mark Gradiently de lui-même : sa région la plus calme se place derrière les mots et l’encre Auto choisit un texte clair ou foncé par ligne d’après les couleurs du Mark. Les équipes voyage et hôtellerie qui publient chaque jour trouveront d’autres idées dans [les réseaux sociaux d’une agence de voyage](https://gradiently.design/fr/guide/travel-agency-social-media).

## FAQ

### Quel est le code hex du turquoise ?

La couleur CSS nommée `turquoise` vaut `#40e0d0`. Des versions un peu plus profondes comme `#2dd4bf` sont aussi très répandues.

### Quelles couleurs vont avec un dégradé turquoise ?

Le bleu marine profond, le blanc, le sable et le corail. Le marine donne la profondeur, le blanc la lumière, et le sable ou le corail apportent de la chaleur quand on les garde hors du fondu principal.

### Le turquoise, c’est la même chose que la sarcelle ?

Non. Le turquoise est plus clair, plus vif et plus tropical ; la sarcelle est plus profonde et plus sourde. Les deux se situent entre le bleu et le vert.

### Puis-je mettre du texte blanc sur du turquoise ?

Pas sur un turquoise vif, où le blanc échoue nettement au contraste. Prenez un texte bleu marine profond, ou placez le texte blanc dans la partie bleu la plus sombre du dégradé.

### Comment éviter qu’un dégradé turquoise paraisse plat ?

Ajoutez un fond bleu profond, une lumière presque blanche et un grain léger. Ces trois étapes le font lire comme de l’eau plutôt que comme un aplat.