# Dégradés bleus : 20 palettes de la glace à minuit

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

Le bleu est la couleur la plus sûre du design, ce qui explique précisément pourquoi tant de dégradés bleus se ressemblent. En voici vingt qui ne se ressemblent pas, du plus clair au plus sombre, avec les codes et la réflexion derrière.

## The short version

- Un dégradé bleu fond des nuances de bleu, souvent avec un voisin turquoise, cyan ou violet, du bleu glace pâle au bleu marine profond.
- Le bleu est largement associé au calme, à la fiabilité et à la technologie, ce qui le rend populaire et facile à confondre avec celui de tout le monde.
- Le bleu se fond proprement vers le turquoise, le cyan, l’indigo et le violet, mais tend à virer au gris quand on le fond directement vers l’orange ou le jaune.
- Le texte blanc convient sur les bleus profonds et moyens comme #1e3a8a et #2563eb, mais échoue pour du texte courant sur des bleus plus clairs comme #3b82f6.
- Pencher un dégradé bleu vers le turquoise ou le violet, l’assombrir ou l’éclaircir et ajouter un accent chaud sont les moyens les plus rapides d’échapper au style corporate.

Un **dégradé bleu** fond des nuances de bleu, souvent avec un voisin turquoise, cyan ou violet. Il peut évoquer un ciel dégagé, un océan profond, un écran la nuit ou le rapport annuel d’une banque, selon les bleus que vous choisissez et la façon dont vous les employez. Voici vingt palettes de dégradés bleus avec CSS à copier, du plus pâle au plus sombre, suivies des couleurs de texte qui marchent dessus et de la manière d’éviter que le bleu paraisse fade.

## Dégradés bleu clair : glace et ciel

Les dégradés bleu pâle paraissent ouverts, propres et discrets. Ils conviennent à la santé, au voyage, au bien-être et aux pages produit qui ont besoin d’espace. Utilisez dessus une encre foncée, et ajoutez une pointe de chaleur ou de lilas pour qu’ils ne paraissent pas froids et cliniques.

- 1. Glace: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Ciel du matin: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Brume pervenche: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Glacier: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Nuage rosé: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Cinq dégradés bleu clair. Les extrémités chaudes ou lilas de 2, 3 et 5 les empêchent de paraître stériles.

## Dégradés bleu océan et turquoise

Pencher le bleu vers le vert lui donne de la vie. Les dégradés océan paraissent frais et naturels, et ils évitent les associations corporate du bleu pur. Ils conviennent aux marques de voyage, de cuisine, de durabilité et de plein air.

- 6. Eau libre: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Plongée profonde: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Lagon: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Port: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Hauts-fonds: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Du bleu vers le turquoise et l’aqua. Des teintes voisines gardent chaque fondu net.

## Dégradés bleu vif et électrique

Les bleus saturés sont énergiques et techniques. Ils conviennent aux lancements, aux applications, au sport et aux événements. Ce sont aussi les bleus les plus courants sur le web : ils gagnent donc le plus à une forme inattendue ou à un accent chaud.

- 11. Cobalt vers cyan: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Outremer vers violet: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Lueur bleue: `radial-gradient(circle at 30% 20%, #60a5fa 0%, #1d4ed8 45%, #0b1437 100%)`
- 14. Cobalt avec un bord doré: `linear-gradient(135deg, #0047ab 0%, #2563eb 86%, #fbbf24 86%, #f59e0b 100%)`
- 15. Signal qui monte: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Des bleus éclatants. Le numéro 14 garde son accent chaud en bord franc : le bleu et l’or ne se mélangent donc jamais en gris.

## Dégradés bleu foncé et minuit

Les dégradés bleu marine profond et minuit paraissent sérieux, haut de gamme et calmes. Ce sont d’excellents fonds pour du texte blanc et des accents vifs. Attention au banding, qui apparaît facilement dans les bleus sombres et lents ; un grain fin le corrige. Voyez le [banding des dégradés](https://gradiently.design/fr/guide/gradient-banding).

- 16. Minuit: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Nuit d’ardoise: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Lueur d’horizon: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. Du marine à l’indigo: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Crépuscule sur l’eau: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Cinq bleus sombres. Le dernier finit sur un corail chaud, comme les dernières lueurs sur la mer.

## Quel dégradé bleu pour quel usage

Vingt palettes, cela fait beaucoup à choisir. Partez de la tâche que le design doit accomplir et des mots qu’il doit porter, puis choisissez dans le groupe correspondant.

| Usage | À essayer | Pourquoi |
| --- | --- | --- |
| Page produit ou santé calme | 1, 3, 4 | Pâles, ouverts, confortables sous un texte foncé |
| Voyage, cuisine, plein air | 6, 8, 10 | Un bleu tirant sur le vert paraît naturel |
| Lancement d’appli ou événement tech | 11, 13, 15 | Saturé et éclairé, se lit comme de l’énergie |
| Premium ou finance | 16, 17, 19 | Les fonds profonds paraissent sérieux et portent le texte blanc |
| Quelque chose de mémorable | 2, 14, 20 | Une note chaude rend le bleu spécifique |

Un point de départ pour chaque type de design. Les numéros renvoient aux palettes ci-dessus.

## Ce que signale le bleu, et le problème de la fadeur

Dans une grande partie du monde, le bleu est associé au calme, à la fiabilité et à la profondeur, en partie à cause du ciel et de l’eau. C’est pourquoi il est si courant dans la banque, l’assurance, la santé et la technologie. C’est aussi pourquoi un dégradé de bleu moyen aide rarement à vous reconnaître : il ressemble à la catégorie plutôt qu’à l’entreprise. La [psychologie des couleurs](https://gradiently.design/fr/guide/color-psychology) explique pourquoi la convention joue dans les deux sens.

### Bleu corporate

- Un bleu moyen vers un bleu plus clair à 135 degrés
- Un bleu primaire pur, totalement saturé
- Lisse et plat, sans texture
- Du bleu partout, rien de chaud

### Bleu distinctif

- Penchant vers le turquoise, l’indigo ou le violet
- Très profond ou très pâle, pas au milieu
- Grain, éclat ou lueur douce
- Un accent chaud : corail, or ou abricot

Le bleu se fond bien vers ses voisins : turquoise, cyan, indigo et violet. Il se fond mal vers ses opposés. Le bleu directement vers l’orange ou le jaune passe par un milieu grisâtre : gardez donc les accents chauds courts ou faites-les passer par le violet ou le rose. Les [couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) expliquent pourquoi.

## Le texte sur les dégradés bleus

| Texte sur fond | Contraste | Verdict |
| --- | --- | --- |
| Blanc sur `#0b1437` | 18,0:1 | Excellent |
| Blanc sur `#1e3a8a` | 10,4:1 | Excellent |
| Blanc sur `#2563eb` | 5,2:1 | Correct pour du texte courant |
| Blanc sur `#3b82f6` | 3,7:1 | Grand texte seulement |
| `#0b1a33` sur `#60a5fa` | 6,8:1 | L’encre foncée fonctionne ici |
| `#0b1a33` sur `#bae6fd` | 13,1:1 | Excellent |

Rapports de contraste WCAG, calculés. Le texte courant demande 4,5:1, le grand texte 3:1.

Le piège est le milieu de la gamme des bleus : un bleuet vif comme `#3b82f6` paraît assez fort pour du texte blanc, mais tombe sous 4,5:1. Sur un dégradé, vérifiez le contraste là où le bleu est le plus clair derrière vos mots. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) donne la méthode complète.

Un post de statistique en portrait montrant 98 % en grands caractères sur un dégradé profond

Un fond profond laisse un seul chiffre parler pour tout le monde.

Une story verticale avec les mots « Respirez » sur un dégradé calme

Une story plus calme avec beaucoup d’espace libre.

```css
.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}
```

La palette 20, Crépuscule sur l’eau, en arrière-plan de bandeau. Gardez les titres dans la partie haute, plus sombre.

Exporter un dégradé bleu en image pour les réseaux sociaux demande une étape de plus. Les plateformes recompressent les envois, et les bleus sombres et lents sont parmi les premières couleurs à se casser en bandes visibles. Exportez à la taille recommandée par la plateforme, ajoutez un grain fin avant d’enregistrer et utilisez le PNG quand la plateforme l’accepte. Les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) montrent quelle quantité de grain suffit.

Pour les violets voisins du bleu, voyez les [dégradés violets](https://gradiently.design/fr/guide/purple-gradient) ; pour des options plus vertes, voyez les [dégradés verts](https://gradiently.design/fr/guide/green-gradient).

## FAQ

### Quelles couleurs vont bien avec le bleu dans un dégradé ?

Le turquoise, le cyan, l’indigo et le violet se fondent proprement avec le bleu. Les couleurs chaudes comme le corail et l’or font de bons accents si on les garde courtes, car fondre le bleu directement vers l’orange ou le jaune vire au gris.

### Quel bon code CSS pour un dégradé bleu ?

Pour un bleu profond et calme, essayez linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Chaque palette de cette page peut être copiée en CSS.

### Le texte blanc est-il lisible sur un dégradé bleu ?

Sur des bleus profonds et moyennement sombres, oui. Sur des bleus plus clairs comme #3b82f6, le texte blanc tombe sous le rapport de 4,5:1 recommandé pour le texte courant.

### Comment rendre un dégradé bleu moins corporate ?

Penchez-le vers le turquoise ou le violet, choisissez des bleus très profonds ou très pâles plutôt que le bleu moyen, ajoutez du grain et un petit accent chaud.