# Dégradé de ciel : codes aube, midi, crépuscule, nuit

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

Le ciel est le seul dégradé que tout le monde étudie depuis des années sans le vouloir. Voici des codes pour chaque heure, dans l’ordre du vrai ciel, et comment y poser des mots.

## The short version

- Un dégradé de ciel convaincant est le plus profond en haut et le plus pâle à l’horizon, car la lumière près de l’horizon traverse plus d’air.
- À l’aube et au crépuscule, les couleurs chaudes restent basses, près de l’horizon, et les bleus froids restent au-dessus.
- Menez un dégradé de ciel à la verticale avec `180deg` en CSS, pour que le haut du design se lise comme le haut du ciel.
- Les ciels de nuit paraissent plus naturels avec une bande un peu plus claire à l’horizon qu’avec un noir uni.
- Une encre foncée se lit bien sur les ciels de midi et bas sur un ciel d’aube, tandis qu’une encre claire convient au haut d’un ciel d’aube, au crépuscule, à l’heure bleue et à la nuit.

Un **dégradé de ciel** va d’une couleur plus profonde au zénith à une plus pâle à l’horizon, car c’est ainsi que se comporte la lumière du jour : près de l’horizon, elle traverse plus d’air, se diffuse davantage et glisse vers le blanc. Réussissez ce seul sens et presque n’importe quel bleu se lit comme du ciel. Voici des codes à copier pour six moments de la journée, de la première lueur à une nuit sans lune, avec des notes sur l’endroit où chacun fonctionne et la couleur de texte qui s’y pose.

## Comment le vrai ciel est agencé

Levez les yeux par temps clair : le bleu juste au-dessus de vous est plus riche que celui près des toits. Au lever et au coucher du soleil, sa lumière traverse tant d’atmosphère que la plus grande partie du bleu est diffusée avant de vous atteindre, laissant des rouges, des oranges et des roses bas dans le ciel tandis que le zénith reste froid. D’où deux règles pour tout dégradé de ciel : profond en haut, pâle en bas, et des couleurs chaudes seulement près de l’horizon.

- Indigo de l’aube: #2b3a67
- Rose de la première lueur: #e3a6b4
- Zénith de midi: #1f6fd1
- Horizon de midi: #a9d3f5
- Heure dorée: #f59e42
- Magenta du crépuscule: #b5507a
- Heure bleue: #23407a
- Minuit: #03050f

Une journée de ciel en huit couleurs. Chaque moment de la journée en emprunte deux ou trois, toujours avec la plus sombre au-dessus.

## Codes de dégradé d’aube et de lever de soleil

L’aube est le ciel le plus doux de la journée. Le haut est encore indigo de nuit, le milieu devient lilas, et une bande de rose et de pêche se pose à l’horizon. Il paraît calme et plein d’espoir, ce qui convient aux marques de bien-être, aux routines du matin, aux annonces de nouveauté et à tout ce qui veut paraître tendre plutôt que bruyant.

- Aube : de l’indigo à la pêche: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Première lueur pâle: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Lever de soleil : du lilas à l’abricot: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Trois aubes. Les arrêts chauds ne montent jamais au-dessus du tiers inférieur, ce qui les fait lire comme un lever de soleil plutôt qu’un coucher.

## Dégradés de ciel de plein midi et de jour

Un ciel de plein midi dégagé est le **dégradé bleu ciel** classique : un bleu saturé en haut qui s’efface en un bleu pâle, presque blanc, à l’horizon. Gardez la teinte stable et laissez la clarté faire le travail. Si l’arrêt du bas vire au gris plutôt qu’au bleu pâle, le ciel commence à paraître pollué. Un après-midi brumeux suit la même idée avec moins de saturation, et un jour couvert remplace le bleu par un gris froid.

- Plein midi: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Après-midi brumeux: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Couvert: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Des ciels de jour. Le plein midi est celui qu’on entend par bleu ciel ; le couvert sert quand on veut du calme sans couleur.

Pour d’autres bleus au-delà du ciel, du marine à la glace, voyez les codes de [dégradé bleu](https://gradiently.design/fr/guide/blue-gradient). Si vous voulez aussi l’eau sous le ciel, l’article sur [le dégradé océan](https://gradiently.design/fr/guide/ocean-gradient) fonctionne dans l’autre sens : pâle en haut, profond en bas.

## Codes de l’heure dorée, du crépuscule et de l’heure bleue

Le ciel du soir est l’endroit où les dégradés de ciel deviennent dramatiques. L’heure dorée garde un bleu de jour au-dessus et un ambre fort à l’horizon, et la douce bande grisâtre entre les deux est réelle : ne la combattez pas. Le crépuscule fait tomber le bleu vers le marine et ajoute du magenta et du corail. L’heure bleue, le court moment après le départ du soleil, est presque entièrement bleue et l’un des fonds sombres les plus flatteurs qui soient.

- Heure dorée: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Crépuscule : du marine au corail: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Heure bleue: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Des ciels du soir. Le crépuscule est le plus chargé de tous les codes ici : donnez-lui moins de mots et plus d’espace.

Si votre design penche entièrement vers les oranges et les roses sans aucun bleu, vous êtes passé du ciel au coucher de soleil, et les codes de [dégradé coucher de soleil](https://gradiently.design/fr/guide/sunset-gradient) vous serviront mieux.

## Codes de dégradé de ciel nocturne

Un ciel de nuit est rarement noir pur. Les villes, la lune et la faible lueur de l’atmosphère gardent l’horizon un peu plus clair que le zénith. Construisez un dégradé de nuit avec un haut presque noir et un horizon marine profond : il se lit comme du ciel ; inversez-le et il se lit comme un trou. Pour les étoiles, le clair de lune et bien d’autres bleus sombres, lisez le guide du [dégradé de ciel nocturne](https://gradiently.design/fr/guide/night-sky-gradient).

Nuit sans lune: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Presque noir au zénith, marine profond à l’horizon. Ajoutez un grain fin par-dessus, car un dégradé si sombre forme facilement des bandes à l’écran.

> **Les ciels sombres forment des bandes** Les codes d’heure bleue et de nuit passent par très peu de valeurs de couleur distinctes : les écrans et les exports compressés montrent donc des paliers visibles. Une légère couche de bruit règle cela, comme l’explique [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding).

## Quel ciel pour quel design

| Ciel | Impression | Bon pour | Couleur de texte |
| --- | --- | --- | --- |
| Aube | Tendre, plein d’espoir | Bien-être, lancements, événements du matin | Blanc en haut, indigo foncé près de l’horizon |
| Plein midi | Ouvert, optimiste | Voyage, applis, offres d’été | Bleu marine foncé |
| Couvert | Calme, sérieux | Rapports, annonces discrètes | Anthracite |
| Heure dorée | Chaud, nostalgique | Hôtellerie, photographie, mariages | Brun foncé, ou blanc près du haut |
| Crépuscule | Dramatique, social | Événements, musique, vie nocturne | Blanc |
| Heure bleue et nuit | Haut de gamme, concentré | Tech, cinéma, ouvertures tardives | Blanc ou bleu pâle |

Un point de départ. Testez vos vrais mots sur votre vrai fond, car un seul dégradé peut demander un texte foncé à un bout et clair à l’autre.

Ce dernier point compte davantage sur les ciels que sur la plupart des dégradés, car un ciel passe du sombre au clair par nature. Placez les mots là où le ciel est le plus calme et choisissez l’encre pour cette zone, pas pour tout le dégradé. [Le texte sur dégradé](https://gradiently.design/fr/guide/text-on-gradient) va plus loin. Dans Gradiently, c’est géré pour vous : un Mark garde sa région la plus calme derrière les mots, et l’encre Auto choisit un texte clair ou foncé ligne par ligne d’après la palette du Mark.

Une story verticale au fond couleur d’aube, avec le titre « Debout avant le soleil » dans la moitié haute

Une story pour un cours matinal. Le titre se pose en texte clair dans le haut calme du ciel, et les détails plus bas, là où la lumière est la plus douce.

## Des dégradés de ciel pour chaque format

Les formats hauts conviennent parfaitement aux ciels : une story ou une épingle peut montrer toute la montée de l’horizon au zénith. Les formats larges l’écrasent : gardez donc les couleurs d’horizon dans le tiers inférieur et laissez le haut du ciel remplir le reste. C’est un agencement différent pour chaque taille, et c’est pourquoi recadrer une image sur plusieurs formats fait en général perdre l’horizon.

- Story 1080×1920: 1080 × 1920
- Épingle Pinterest 1000×1500: 1000 × 1500
- Hero de site 1920×1080: 1920 × 1080
- En-tête X 1500×500: 1500 × 500

Sur la story, le ciel a de la place pour respirer. Sur l’en-tête, la bande d’horizon chaude doit être plus fine, sinon elle avale le cadre.

## Un dégradé de ciel en CSS pour chaque heure du jour

Sur un site web, trois propriétés personnalisées suffisent à décrire n’importe quel ciel. Changez une classe et toute la section change d’heure, ce qui est pratique pour un hero qui suit l’heure locale du visiteur ou une page qui s’assombrit au fil d’un récit.

```css
.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }
```

Un dégradé, quatre heures. Choisissez la classe avec une ligne de JavaScript lisant l’horloge du visiteur, ou réglez-la à la main page par page.

Pour les angles, les positions d’arrêt et les replis, voir [le dégradé linéaire CSS](https://gradiently.design/fr/guide/css-linear-gradient).

## FAQ

### Quelles couleurs composent un dégradé de ciel ?

Un ciel de jour va d’un bleu saturé comme #1f6fd1 en haut à un bleu pâle comme #dceefb à l’horizon. L’aube et le crépuscule ajoutent du rose, de la pêche, du magenta ou du corail près du bas seulement.

### Dans quel sens un dégradé de ciel doit-il aller ?

De haut en bas, avec la couleur la plus sombre en haut. En CSS : `linear-gradient(180deg, haut, bas)`.

### Comment distinguer un dégradé de lever de soleil d’un coucher de soleil ?

En design, un lever de soleil paraît en général plus doux et plus frais, avec du lilas et de la pêche et la bande chaude basse et fine. Les couchers de soleil se dessinent plus saturés, avec un orange et un magenta plus forts qui montent plus haut.

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

Un bleu marine foncé ou un anthracite se lit bien sur les ciels de midi et près d’un horizon d’aube. Employez du blanc sur les ciels de crépuscule, d’heure bleue et de nuit, et en haut d’un ciel d’aube, et vérifiez le contraste là où se posent les mots.

### Pourquoi mon dégradé de ciel nocturne paraît-il rayé ?

Les dégradés très sombres ont peu de paliers de couleur : les écrans montrent donc des bandes. Ajoutez une légère couche de grain et exportez en PNG plutôt qu’en JPEG très compressé.