# Dégradés vert et bleu : codes frais à l’allure naturelle

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

Le vert qui rencontre le bleu, c’est l’eau peu profonde sur le sable, un lac sous les pins, les aurores boréales. Voilà pourquoi ce duo paraît si naturel. Voici comment le garder ainsi.

## The short version

- Un dégradé vert et bleu fond des teintes froides voisines comme l’émeraude #10b981, le sarcelle #0d9488 et le bleu ciel #0284c7, avec du sarcelle ou de l’aqua au milieu.
- Comme le vert et le bleu sont adjacents sur le cercle chromatique, le dégradé reste net, et il paraît naturel parce qu’il reflète l’eau, la glace et le ciel.
- Les verts vifs et les aquas sont trop clairs pour un texte blanc : utilisez une encre sarcelle profond sur les versions claires, et du blanc ou de la menthe sur les sombres.
- Les dégradés vert et bleu sombres paraissent calmes et dignes de confiance, tandis que les versions claires paraissent fraîches et nettes.
- Ce duo convient au voyage, au bien-être, à la finance, aux marques de plein air et à la technologie, et un accent chaud comme le sable ou le corail l’empêche de paraître froid.

Un **dégradé vert et bleu** fond deux voisins froids : des verts comme l’émeraude `#10b981` ou la menthe `#a7f3d0` et des bleus comme `#0284c7` ou le ciel `#bae6fd`, avec le sarcelle et l’aqua en pont entre eux. Le dégradé reste net car il n’y a aucun point gris entre les deux teintes. Il paraît naturel parce que vous l’avez vu toute votre vie dans l’eau, la glace et le ciel. Les codes ici suivent quatre paysages, avec les couleurs de texte lisibles sur chacun et le CSS pour le mode clair et sombre.

## Pourquoi le vert et le bleu vont si naturellement ensemble

Le vert et le bleu sont des [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors) : ils se côtoient sur le cercle, si bien que chaque étape entre eux est une vraie couleur, surtout du sarcelle et de l’aqua. La nature montre sans cesse cet accord, des mers peu profondes où l’eau bleue court sur les algues vertes et le sable, aux lacs glaciaires et aux forêts de pins reflétées dans une eau calme. S’inspirer de ces scènes est le moyen le plus simple de rendre le dégradé calme plutôt que corporate.

- Encre sarcelle profond: #042f2e
- Pin: #065f46
- Émeraude: #10b981
- Sarcelle: #0d9488
- Aqua: #22d3ee
- Bleu de lac: #0284c7
- Menthe: #a7f3d0
- Ciel: #bae6fd

La gamme du vert au bleu, avec une encre profonde pour le texte. Le sarcelle et l’aqua sont les couleurs de liaison qui gardent le dégradé continu.

## Lagon : dégradés aqua et vert vifs

L’eau tropicale peu profonde est surtout aqua, avec du vert là où elle est la moins profonde et du bleu là où elle s’approfondit. Ces dégradés ont l’éclat des vacances. Ajoutez un arrêt sable chaud si vous voulez qu’ils évoquent une plage plutôt qu’une piscine.

- Lagon: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Récif: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Banc de sable: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Dégradés vert et bleu vifs. Le troisième ajoute du sable en bas, ce qui réchauffe tout le cadre. Les [dégradés océan](https://gradiently.design/fr/guide/ocean-gradient) en offrent davantage.

## Lac de pins : dégradés vert et bleu profonds

Un vert sombre qui se fond dans un bleu sombre paraît calme, coûteux et digne de confiance. Pensez à un lac de forêt au crépuscule, ou à la couleur d’une vieille bouteille. Ils portent bien le texte blanc et conviennent à la finance, à l’équipement de plein air, à l’architecture et à toute marque qui veut paraître stable.

- Lac de pins: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Sarcelle au clair de lune: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- De la bouteille au marine: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Vert et bleu sombres. Ils montrent facilement le banding dans les images compressées : ajoutez un grain fin avant d’exporter.

## Glacier : dégradés menthe pâle et ciel

Éclaircissez le duo à fond et vous obtenez la glace des glaciers et les matins froids : nets, aérés et très calmes. Ils conviennent à la santé, aux soins de la peau, au nettoyage et aux applications de productivité. Ils peuvent paraître cliniques : une touche de blanc chaud aide.

- Glacier: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Matin froid: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Glace au soleil: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Vert et bleu pâles. Une encre sarcelle profond se lit sur chacun. Les [dégradés menthe](https://gradiently.design/fr/guide/mint-gradient) vont plus loin du côté du vert.

## Aurore boréale : vert et bleu sur un ciel nocturne

Les aurores boréales sont de la lumière verte et bleue sur du noir : c’est pourquoi les dégradés aurore comptent parmi les fonds sombres les plus appréciés. Gardez la couleur en bandes douces et laissez le fond sombre occuper la majeure partie du cadre. Les [dégradés aurore](https://gradiently.design/fr/guide/aurora-gradients) couvrent toute la technique.

- Aurore: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Bande de lumière: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Tourbillon polaire: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Vert et bleu sur un quasi noir. La menthe et l’aqua font toutes deux des couleurs de texte saisissantes sur ces dégradés.

## Couleurs de texte sur les dégradés vert et bleu

L’émeraude et l’aqua sont étonnamment claires : le texte blanc sur les versions vives échoue donc souvent. Une encre sarcelle profond fonctionne sur les dégradés clairs et garde tout dans la même famille ; le blanc et la menthe se lisent bien sur les sombres. Les rapports ci-dessous utilisent la formule WCAG. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) montre quoi faire quand une ligne traverse les deux extrémités.

| Fond | Texte | Contraste | Verdict |
| --- | --- | --- | --- |
| Émeraude `#10b981` | Blanc | 2,5:1 | Insuffisant |
| Aqua `#22d3ee` | Blanc | 1,8:1 | Insuffisant |
| Sarcelle `#0d9488` | Blanc | 3,7:1 | Grands titres seulement |
| Menthe `#a7f3d0` | Sarcelle profond `#042f2e` | 11,3:1 | Excellent |
| Pin `#065f46` | Blanc | 7,7:1 | Excellent |
| Nuit `#04202a` | Aqua menthe `#5eead4` | 11,4:1 | Excellent, la couleur en encre |

Sur un dégradé vert et bleu, l’extrémité verte est généralement la plus claire : vérifiez donc le contraste là en premier.

Une publication de voyage verticale avec un lettrage sarcelle profond sur un dégradé aqua et vert vif

Une publication d’agence de voyages sur des tons de lagon vifs, avec une typographie sarcelle profond.

Une image de lien en paysage pour une application de finance avec un lettrage blanc sur un dégradé vert sombre vers marine

Une image de lien LinkedIn en pin vers marine pour une application de finance.

## Comment réchauffer une palette vert et bleu

Le vert et le bleu sont tous deux froids : une marque entière dans ces tons peut donc paraître distante. Un accent chaud règle le problème. Le sable, le corail et l’or doux se trouvent tous à l’opposé du sarcelle sur le cercle : utilisez-les à côté du dégradé, dans un bouton, un logo ou un filet sur un bord, plutôt que de les fondre dedans. Les [couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) expliquent pourquoi un dégradé à travers le cercle vire au gris.

### À éviter

- Du sarcelle fondu directement dans du corail
- Du texte blanc sur émeraude ou aqua
- Toutes les surfaces en couleurs froides
- Du vert saturé sur du bleu saturé à pleine force

### À faire

- Du corail ou du sable à côté du dégradé, en accent
- Une encre sarcelle profond sur les dégradés clairs
- Un blanc chaud ou une crème pour les panneaux et le texte
- Une couleur dominante, l’autre en soutien

## CSS du dégradé vert et bleu pour mode clair et sombre

```css
.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}
```

Glacier en mode clair, lac de pins en mode sombre. Mêmes teintes : la marque reste donc une seule et même chose.

Associer une version claire et une version sombre du même vert et bleu est une belle façon de donner à un changement de thème l’air d’un choix de design plutôt que d’une inversion. Les [dégradés en mode sombre](https://gradiently.design/fr/guide/dark-mode-gradients) vont plus loin. Dans Gradiently, un même Mark se rend dans chaque format que vous dessinez et choisit une encre claire ou foncée ligne par ligne dans sa propre palette : les éclats du lagon comme les profondeurs du lac de pins gardent ainsi leurs mots lisibles.

## FAQ

### Quel est un bon code de dégradé vert et bleu ?

Une option vive est `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Pour quelque chose de plus sombre et de plus calme, essayez `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Le vert et le bleu vont-ils ensemble ?

Oui. Ils sont voisins sur le cercle chromatique, avec le sarcelle et l’aqua entre les deux : le dégradé reste donc net et paraît naturel.

### Quelle couleur se trouve entre le vert et le bleu ?

Le sarcelle, autour de `#0d9488`, avec l’aqua et le turquoise comme versions plus vives.

### Quelle couleur de texte sur un dégradé vert et bleu ?

Un sarcelle profond comme `#042f2e` sur les versions claires, et du blanc ou de la menthe sur les sombres. Le blanc sur émeraude ou aqua vif échoue au contraste.

### Que signifie un dégradé vert et bleu pour une marque ?

Il évoque généralement le calme, la fraîcheur et la confiance, car il fait écho à l’eau, au ciel et aux plantes. Les versions sombres paraissent stables ; les versions claires paraissent nettes.