# Dégradés coucher de soleil : palettes orange, corail et crépuscule

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

La plupart des dégradés coucher de soleil ratent au même endroit : au milieu, là où le bleu rencontre l’orange et vire au gris. Un vrai ciel ne fait jamais ça. Voici l’ordre qu’utilise la nature, et dix palettes construites dessus.

## The short version

- Un dégradé coucher de soleil fond des couleurs chaudes comme l’or, l’orange et le corail dans du rose, du violet et un bleu du soir profond.
- Dans un vrai coucher de soleil, le ciel va du jaune et de l’orange à l’horizon, en passant par le rouge et le rose, jusqu’au violet et au bleu au-dessus de nos têtes.
- Fondre le bleu directement dans l’orange saute les roses et les violets intermédiaires, et le milieu vire au gris.
- Fondre l’orange directement dans le noir donne du brun : les dégradés de crépuscule sont plus beaux en s’assombrissant par la prune ou l’indigo.
- Placez le texte sur la partie haute, plus sombre, d’un dégradé coucher de soleil, là où le contraste avec un texte blanc est le plus fort.

Un **dégradé coucher de soleil** fond des couleurs chaudes, or, orange et corail, dans du rose, du violet et un bleu du soir profond. C’est l’un des dégradés les plus aimés en design, parce que tout le monde le reconnaît et que presque tout le monde l’apprécie. C’est aussi l’un des plus faciles à rater. Le secret : suivre l’ordre qu’utilise vraiment le ciel, chaud et lumineux à l’horizon, puis de plus en plus froid à travers le rose et le violet quand on lève les yeux. Sautez ces couleurs intermédiaires et le dégradé vire au gris.

## L’ordre naturel des couleurs du coucher de soleil

Quand le soleil est bas, sa lumière traverse beaucoup plus d’atmosphère pour vous parvenir. En chemin, l’air disperse la lumière bleue hors du faisceau direct : la lumière proche du soleil arrive donc jaune, orange et rouge. Plus haut dans le ciel, loin du soleil, il reste davantage de bleu. Le résultat est une série de bandes de couleur empilées depuis l’horizon.

L’ordre complet du coucher de soleil: `linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)`

Du bleu profond au zénith, en passant par le violet, le rose et l’orange, jusqu’à l’or à l’horizon. Chaque étape est voisine de la suivante, si bien que rien ne vire au gris.

| Hauteur dans le ciel | Couleur | Exemple de code |
| --- | --- | --- |
| Zénith | Bleu profond à indigo | `#1e3a8a` |
| Haut du ciel | Violet à mauve | `#6d28d9` |
| Milieu du ciel | Rose à magenta | `#db2777` |
| Bas du ciel | Orange à corail | `#f97316` |
| Horizon | Or à jaune pâle | `#fcd34d` |

Les bandes d’un coucher de soleil dégagé. Les vrais ciels varient selon les nuages, la brume et la saison, mais l’ordre reste le même.

## Palettes de dégradé coucher de soleil, avec leurs codes

Ces dix palettes suivent toutes l’ordre du ciel, de haut en bas. Certaines utilisent toute la gamme ; d’autres ne prennent que l’extrémité chaude ou que le crépuscule.

- Crépuscule corail: `linear-gradient(180deg, #2e2a5a 0%, #8e4a7e 40%, #f07167 75%, #fed9b7 100%)`
- Soir dans le désert: `linear-gradient(180deg, #5b3a6e 0%, #c0587e 35%, #f28c5b 70%, #f9d29d 100%)`
- Heure bleue: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 45%, #6b5b95 75%, #f4a28c 100%)`
- Dernières lueurs: `linear-gradient(180deg, #111827 0%, #3b1f4a 40%, #b1455f 75%, #f29e6d 100%)`
- Tropical, chaud uniquement: `linear-gradient(180deg, #ff6f61 0%, #ff9966 55%, #ffd194 100%)`
- Brume pêche: `linear-gradient(180deg, #fbc2c2 0%, #fcd5b5 55%, #fef3c7 100%)`
- Méditerranée: `linear-gradient(180deg, #4a6fa5 0%, #c38fb8 45%, #f6a57f 75%, #ffe0a3 100%)`
- Synthwave: `linear-gradient(180deg, #2b1055 0%, #d53a9d 55%, #ffb86c 100%)`
- Soleil à l’horizon: `radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%)`
- Braise: `linear-gradient(180deg, #7c2d12 0%, #c2410c 40%, #f59e0b 80%, #fde68a 100%)`

Dix dégradés coucher de soleil. Le radial place le soleil lui-même sur le bord inférieur du cadre.

Le synthwave est le cousin stylisé et néon du vrai coucher de soleil ; [les couleurs vaporwave](https://gradiently.design/fr/guide/vaporwave-colors) et [les dégradés rétro](https://gradiently.design/fr/guide/retro-gradients) poussent plus loin dans cette direction.

## Pourquoi les dégradés coucher de soleil deviennent boueux, et comment les corriger

Il y a deux erreurs classiques. La première consiste à relier directement le bleu et l’orange. Ils sont presque opposés sur le cercle chromatique, et un fondu direct entre eux donne du gris au milieu. Le ciel ne fait jamais ça, car il passe par le violet et le rose. La seconde consiste à fondre l’orange dans le noir pour une ambiance plus sombre. Un orange foncé, c’est du brun : le dégradé évoque la rouille ou la boue plutôt que le soir.

- Bleu direct vers orange : milieu gris: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- Par le violet et le rose : net: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- Noir vers orange : brun: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Indigo par la prune : crépuscule: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Deux couchers de soleil boueux et leurs corrections. Les deux corrections ajoutent les couleurs par lesquelles passe le ciel lui-même.

Si vous voulez moins d’arrêts, fondre en OKLCH aide : les couleurs restent saturées au milieu du fondu. Voyez [les dégradés OKLCH en CSS](https://gradiently.design/fr/guide/css-gradient-oklch) et, pour la théorie, [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients).

## Où les dégradés coucher de soleil fonctionnent

Les couchers de soleil portent une émotion claire : la fin de la journée, la chaleur, un peu de nostalgie. Cela les rend naturels pour certains usages et étranges pour d’autres. Un coucher de soleil lumineux et complet convient aux événements d’été, au voyage, à la musique et à l’hôtellerie. Une version crépusculaire, surtout violette, convient aux lancements en soirée, aux podcasts et à tout ce qui invite à la réflexion. Une version uniquement chaude, de l’or au corail, convient à l’alimentation, aux boissons et aux temps forts des soldes.

- **Affiches et invitations d’événements :** les couleurs disent « soirée » avant même la date.
- **Voyage et hôtellerie :** l’heure dorée est la lumière la plus photographiée qui soit, et tout le monde la reconnaît.
- **Pochettes de musique et playlists :** les palettes de crépuscule paraissent cinématographiques et un peu mélancoliques.
- **Campagnes saisonnières :** un coucher de soleil qui se refroidit au fil de l’automne marque la saison sans nouveau visuel.

Là où ils conviennent moins : la finance sérieuse, la santé et tout ce qui doit paraître neutre. Leur chaleur évoque les loisirs. Les couleurs du coucher de soleil se situent aussi nettement du côté chaud du cercle ; [les couleurs chaudes et froides](https://gradiently.design/fr/guide/warm-and-cool-colors) explique comment la température change l’ambiance d’une création.

## Comment construire votre propre dégradé coucher de soleil

1. **Choisissez la part de ciel que vous voulez** Toute la gamme pour le spectacle, seulement l’extrémité chaude pour l’énergie, ou seulement le crépuscule pour le calme.
2. **Mettez le chaud en bas** L’or et l’orange ont leur place près de l’horizon. Un coucher de soleil à l’envers peut fonctionner, mais il paraît stylisé.
3. **Ne sautez jamais un voisin** Entre le bleu et l’orange, intégrez le violet et le rose. Entre l’orange et le sombre, intégrez la prune ou l’indigo.
4. **Donnez moins de place à la bande chaude** Dans les vrais ciels, les couleurs les plus lumineuses épousent l’horizon. Les limiter au quart inférieur rend le dégradé naturel.
5. **Ajoutez du grain** Les longs ciels lisses font facilement du banding. Un calque de bruit fin garde le fondu régulier après compression.

## Du texte sur un dégradé coucher de soleil

Le haut d’un dégradé coucher de soleil est sombre et froid, parfait pour un texte blanc. Le bas est lumineux et chaud, parfait pour un texte sombre ou pour rien du tout. Le milieu, où le rose rencontre l’orange, est l’endroit le plus difficile pour l’un comme pour l’autre. Placez les titres en haut et les détails en bas, ou gardez les mots dans une seule bande calme.

Une affiche d’événement en portrait avec un titre près du haut d’un dégradé chaud du soir

Le titre en haut dans le ciel plus sombre, les détails plus bas.

Une story verticale de soldes avec un titre au-dessus d’une lueur chaude en bas

Une story où la lueur chaude se trouve sous les mots.

```css
.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}
```

La palette Soleil à l’horizon en en-tête de page, avec le titre placé dans le ciel sombre au-dessus de la lueur.

Pour d’autres palettes de ciel et de paysage, voyez [les palettes de couleurs inspirées de la nature](https://gradiently.design/fr/guide/nature-color-palettes), et pour des versions dominées par le rose, [les dégradés roses](https://gradiently.design/fr/guide/pink-gradient).

## FAQ

### Quelles couleurs dans un dégradé coucher de soleil ?

En général l’or et l’orange à l’horizon, puis le corail, le rose et le magenta, puis le violet et un bleu profond au zénith.

### Pourquoi mon dégradé coucher de soleil paraît-il boueux ?

Le plus souvent parce qu’il fond le bleu directement dans l’orange, ou l’orange directement dans le noir. Ajoutez du violet et du rose entre le bleu et l’orange, et assombrissez par la prune ou l’indigo plutôt que par le noir.

### Quel est le code CSS d’un dégradé coucher de soleil ?

Pour un coucher de soleil complet, essayez linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Chaque palette de cette page peut être copiée en CSS.

### Où placer le texte sur un dégradé coucher de soleil ?

Dans la partie haute, plus sombre et plus froide, pour un texte blanc, ou dans la bande chaude et pâle pour un texte sombre. Évitez le milieu, où le rose rencontre l’orange.