# Dégradé bleu marine : codes sombres et fiables

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

Le marine, c’est la couleur des uniformes, des banques et des beaux costumes, et c’est justement pourquoi il peut ressembler à toutes les banques. Ces codes gardent sa confiance et perdent son ennui.

## The short version

- Un dégradé bleu marine fond des bleus très sombres, en général d’un marine presque noir à un bleu roi ou indigo plus vif.
- Le marine inspire le sérieux, la fiabilité et l’ancienneté, d’où son usage fréquent en finance, en droit et dans l’éducation.
- Pour que le marine ne fasse pas générique, ajoutez une source de lumière, penchez-le légèrement vers le violet ou la sarcelle, ou associez-le à un accent métallique chaud comme l’or ou le cuivre.
- Un texte blanc ou gris pâle se lit facilement sur le marine ; un texte or marche aussi s’il est assez clair.
- Les dégradés marine sombres forment facilement des bandes dans les images compressées : ajoutez un grain léger et exportez à pleine taille.

Un **dégradé bleu marine** fond des bleus profonds, typiquement d’un marine presque noir comme `#0b1630` jusqu’à un bleu roi ou indigo plus vif. Il paraît calme, sérieux et fiable, et rend le texte blanc net. Le souci, c’est que le marine est partout en finance, en droit et dans le design d’entreprise : un simple fondu marine plat ressemble souvent à un réglage par défaut. Les codes ci-dessous lui donnent de la lumière, une température et un accent, pour qu’il garde la confiance et gagne une personnalité.

## Codes de dégradé bleu marine classique

Ce sont les valeurs sûres, proches du marine pur, avec juste assez de mouvement pour ne pas ressembler à un aplat. Idéaux pour les diapositives, les rapports annuels, les en-têtes d’e-mail et les pieds de page de site.

- Marine classique: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Marine encre: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniforme: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Rayure tennis: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Bande éclairée: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Cinq fondus proches du marine. Discrets exprès : ils portent textes, logos et graphiques sans faire concurrence.

| Nom | Hex | À utiliser comme |
| --- | --- | --- |
| Marine (nom CSS) | `#000080` | Référence seulement ; dur à l’écran |
| Minuit | `#0b1630` | L’arrêt le plus sombre, presque noir |
| Marine profond | `#172554` | Un fond pour du texte blanc |
| Marine royal | `#1e3a8a` | L’extrémité claire d’un fondu classique |
| Bleu roi | `#1e40af` | Un éclat ou une lumière |

Des codes hex de marine qui se fondent bien. Le marine CSS nommé est très saturé ; des versions plus douces paraissent plus raffinées.

## Des dégradés marine avec une touche de couleur

Penchez le marine de quelques degrés vers le violet et il devient soirée et luxe ; penchez-le vers la sarcelle et il devient mer et technologie. L’un ou l’autre décalage donne l’impression d’un choix. L’extrémité la plus claire doit rester assez profonde pour du texte blanc sur presque toute la surface.

- Marine vers indigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Violet royal: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marine et sarcelle: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Électrique vers marine: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Du marine avec une inclinaison. L’indigo et le violet font haut de gamme, la sarcelle fait frais, un coin bleu vif fait technique.

## Marine et or, cuivre ou argent

Peu de fonds accueillent mieux un accent métallique que le marine. L’or sur marine est traditionnel et festif ; le cuivre est plus chaud et plus moderne ; l’argent est froid et discret. Gardez le métal petit, comme une lumière dans un coin ou un filet fin, pour que le marine fasse l’essentiel. [Les dégradés or](https://gradiently.design/fr/guide/gold-gradient-design) et [les dégradés argent](https://gradiently.design/fr/guide/silver-gradient) détaillent le côté métallique.

- Lumière d’or sur marine: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Coin cuivré: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Bord argenté: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Le métal reste petit et à un seul endroit. L’œil va d’abord là, puis à vos mots.

- Minuit: #0b1630
- Marine profond: #172554
- Marine royal: #1e3a8a
- Vieil or: #d4a64a
- Ivoire: #f8f6f1
- Ardoise: #94a3b8

Un système marine et or : trois marines, un accent or, de l’ivoire pour le texte et de l’ardoise pour le détail secondaire.

## Dégradés marine minuit pour la nuit et le luxe

Les fondus radiaux évoquent un ciel après le coucher du soleil ou une pièce faiblement éclairée. Ils conviennent aux invitations de gala, aux bars d’hôtel, à la bijouterie, à l’horlogerie et aux radios de fin de nuit. Pour la version étoilée, voir [les dégradés de ciel nocturne](https://gradiently.design/fr/guide/night-sky-gradient).

- Après le coucher du soleil: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Salon de velours: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Lueur de la ville: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Du marine avec une seule lumière douce. L’arrêt le plus sombre est proche du noir, mais le bleu l’empêche de paraître vide.

## Où les dégradés marine gagnent leur place

Le marine est à son meilleur là où les mots comptent plus que l’image, car il offre au texte un fond calme et très contrasté. Quelques usages à reprendre :

- **Diapositives en 1920×1080 :** « Marine classique » pour les séparateurs de section, avec un filet or sous chaque titre.
- **Bannière de profil LinkedIn en 1584×396 :** « Marine et sarcelle » de gauche à droite, le plus sombre derrière votre photo.
- **En-tête d’e-mail en 1200×600 :** « Marine encre » avec un titre ivoire, pour que l’en-tête soit déjà à l’aise dans les boîtes en mode sombre.
- **Invitations de remise de diplômes et de prix :** « Lumière d’or sur marine » imprimé en flyer A5.
- **Graphiques et tableaux de bord :** un fond marine profond distingue facilement les couleurs vives des données.

## Comment faire paraître le marine moins corporate

### Ressemble à toutes les banques

- Un `#000080` plat avec un logo blanc
- Un fondu droit de haut en bas
- Des boutons bleu moyen vif
- Une photo de stock de poignée de main

### Paraît réfléchi

- Un marine adouci, penchant vers le violet ou la sarcelle
- Une lumière venant d’un seul endroit
- Un seul accent chaud : or, cuivre ou corail
- Un grain fin qui donne un air imprimé

Aucun de ces changements ne coûte en confiance. Ils rendent simplement la marque reconnaissable d’un coup d’œil, ce qui compte quand tous les concurrents emploient le même bleu. [Des éléments de marque distinctifs](https://gradiently.design/fr/guide/distinctive-brand-assets) explique que la reconnaissance vient de posséder quelque chose que personne d’autre n’utilise. Un test utile : masquez votre logo et demandez-vous si l’on reconnaîtrait quand même votre design. Avec un fondu marine plat, la réponse est presque toujours non.

Une image de lien LinkedIn pour un cabinet de planification financière, avec du texte blanc sur un dégradé marine éclairé depuis un coin

Une image de lien LinkedIn sur un marine profond avec une lumière chaude. Sérieux, pas anonyme.

Le même design de planification financière en post portrait sur le dégradé marine

Le même design en post portrait, avec la lumière déplacée pour s’adapter au cadre plus haut.

## CSS de dégradé marine sans banding

Les fondus sombres et subtils sont ceux où le banding se voit le plus : on distingue des paliers au lieu d’un fondu lisse, surtout après la recompression de votre image par une plateforme. Sur le web, quelques arrêts de plus et une couche de grain le masquent. [Le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) en explique la cause.

```css
.hero-navy {
  position: relative;
  background-color: #0b1630; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, rgb(212 166 74 / 0.35) 0%, transparent 35%),
    linear-gradient(160deg, #1e3a8a 0%, #172554 45%, #0f1d3a 75%, #0b1630 100%);
  color: #f8f6f1;
}

/* fine grain on top to break up banding */
.hero-navy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("/grain.png"); /* a small tiling noise image */
}
```

Des arrêts intermédiaires en plus lissent le fondu, une faible lumière or ajoute de la chaleur et une couche de grain masque les paliers restants.

Le texte est la partie facile avec le marine. Le blanc et l’ivoire passent le contraste sans effort sur tous les marines ci-dessus, et le vieil or `#d4a64a` se lit à environ 8 pour 1 sur minuit : il convient donc aux titres. Il faut surveiller le bleu vif : un bleu moyen comme `#3b82f6` derrière du texte blanc tombe à environ 3,7 pour 1. Dans Gradiently, l’encre Auto règle cela ligne par ligne en choisissant le texte dans la palette du Mark, et le [Designer](https://gradiently.design/fr/guide/what-is-gradiently) peut composer toute une campagne marine dans la voix de votre kit de marque.

## FAQ

### Quel est le code hex du bleu marine ?

La couleur CSS nommée `navy` vaut `#000080`. Des versions plus douces comme `#172554` ou `#0b1630` rendent généralement mieux à l’écran.

### Quelles couleurs vont avec un dégradé bleu marine ?

L’or, le cuivre, l’ivoire, l’ardoise et le corail. Un seul accent chaud évite au marine de paraître froid ou corporate.

### Le bleu marine convient-il à une marque d’entreprise ?

Il inspire le sérieux et la fiabilité, et convient donc à la finance, au droit et à l’éducation. Comme beaucoup de concurrents l’emploient, ajoutez de la lumière ou un accent pour rester reconnaissable.

### Pourquoi mon dégradé marine montre-t-il des rayures ?

C’est du banding, fréquent dans les fondus sombres et subtils. Ajoutez des arrêts, une couche de grain léger et évitez une forte compression JPEG.

### Puis-je mettre du texte or sur du marine ?

Oui, si l’or est assez clair. `#d4a64a` sur `#0b1630` mesure environ 8 pour 1, ce qui passe pour les titres comme pour le corps de texte.