# Dégradé bleu violet : 20 codes qui se fondent bien

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

Le bleu et le violet sont voisins : ils se fondent plus facilement que presque n’importe quel autre duo. C’est aussi pourquoi tant de dégradés bleu violet se ressemblent. En voici vingt qui diffèrent.

## The short version

- Un dégradé bleu violet fond des teintes voisines comme le bleu #3b82f6, l’indigo #4f46e5 et le violet #7c3aed : la transition reste nette, sans couleur de liaison.
- Le problème le plus courant des dégradés bleu vers violet n’est pas la boue mais la banalité, car la diagonale indigo vers violet par défaut est partout.
- Un dégradé entre cyan et rose, ou entre des bleus ternes et des violets ternes, peut virer au gris au milieu ; interpoler en OKLCH le garde éclatant.
- Le texte blanc se lit bien sur l’indigo et le violet, mais échoue souvent sur les bleus moyens et les lavandes, où une encre indigo profond fonctionne mieux.
- Un fond sombre, une troisième couleur dosée avec parcimonie et un peu de grain donnent à un dégradé bleu violet l’air d’un vrai choix plutôt que d’un réglage par défaut.

Un **dégradé bleu violet** court entre des teintes voisines du cercle chromatique : le bleu `#3b82f6`, l’indigo `#4f46e5`, le violet `#7c3aed` et les pervenches et lavandes douces qui les entourent. Comme les teintes sont côte à côte, le dégradé reste net presque automatiquement. Le plus difficile est d’en faire un qui ne ressemble pas aux milliers d’icônes d’application et de diapositives de conférence qui en utilisent déjà un. Voici vingt codes en quatre ambiances, les cas où le dégradé devient terne, et les couleurs de texte lisibles sur chacun.

## Pourquoi le bleu et le violet se fondent si bien

Le violet, c’est du bleu avec un peu de rouge. Passez de l’un à l’autre : chaque étape intermédiaire est une vraie couleur saturée, bleu, indigo, violet. Comparez avec un dégradé du bleu vers l’orange, où le point médian est un gris plat. Les [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors) expliquent le principe, et le [cercle chromatique](https://gradiently.design/fr/guide/color-wheel) montre où se place chaque teinte.

- Minuit: #0f0a2e
- Indigo profond: #1e1b4b
- Bleu roi: #1d4ed8
- Bleu: #3b82f6
- Indigo: #4f46e5
- Violet: #7c3aed
- Lavande: #a78bfa
- Brume de pervenche: #c7d2fe

La famille du bleu vers le violet. Choisissez trois ou quatre nuances voisines et le dégradé restera vif d’un bout à l’autre.

## Dégradés bleu violet sombres : nuit et profondeur

Partez du sombre et le dégradé paraît aussitôt moins banal. Un fond de minuit avec une lumière indigo et violette évoque un ciel nocturne, une salle de concert ou une application haut de gamme. Ces cinq portent à merveille un texte clair.

- Indigo de minuit: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Lever de lune violet: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Marine à prune: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Lueur d’horizon: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Courant profond: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Dégradés bleu violet sombres. Le banding se voit surtout dans ce genre de dégradé : ajoutez du grain avant d’exporter.

## Dégradés bleu violet doux : pervenche et lavande

Éclaircissez la famille et elle devient calme, rêveuse et un peu nostalgique. Ces dégradés conviennent au bien-être, au sommeil, à la papeterie et à tout ce qui vise une ambiance douce. Gardez une encre foncée : le blanc disparaît sur presque tous. Il y en a d’autres dans les [dégradés pastel](https://gradiently.design/fr/guide/pastel-gradients).

- Voile de pervenche: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Lavande du matin: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Nuage de lilas: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Champ de bleuets: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Du papier au violet: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Dégradés doux de pervenche et de lavande. Un texte indigo profond se lit sur chacun d’eux.

## Dégradés bleu violet électriques

Poussez la saturation et le duo devient fort, synthétique, très numérique. Ces dégradés conviennent au jeu vidéo, à la musique, aux lancements tech et à tout ce qui est nocturne. Utilisez-les en bandes ou en halos plutôt que sur une affiche entière, et associez-les à un quasi noir pour qu’ils aient un fond contre lequel briller. Les [dégradés néon](https://gradiently.design/fr/guide/neon-gradients) détaillent la technique.

- Violet électrique: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Du ciel à l’orchidée: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Pulsation indigo: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Spirale ultraviolette: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Du noir à l’ultraviolet: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Dégradés bleu violet saturés. Le premier est le classique ; les autres en sont des versions moins attendues.

## Dégradés bleu violet avec une troisième couleur

Le moyen le plus rapide de s’approprier un dégradé bleu violet : une couleur de plus, utilisée avec parcimonie. Le rose l’emmène vers le crépuscule, le turquoise vers l’aurore, l’or vers le luxe et la pêche vers un lever de soleil doux.

- Crépuscule rosé: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Turquoise d’aurore: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo et or: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Aube de lavande: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Bleu, violet, cramoisi: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Vingt codes au total. Le rose, le turquoise et le cramoisi sont voisins du bleu ou du violet sur le cercle ; l’or reste une petite lumière et la pêche reste pâle, donc aucun dégradé ne passe par le gris.

## Quand un dégradé bleu violet devient boueux

Du bleu au violet, tout va bien. Deux dégradés voisins sont plus risqués. Le cyan vers le rose traverse une grande partie du cercle, et des bleus grisâtres vers des violets ternes donnent un milieu sans vie. Dans les deux cas, la solution est la même : interpoler en OKLCH, qui garde luminosité et saturation régulières tout au long du dégradé. Les [dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) et l’[interpolation des dégradés](https://gradiently.design/fr/guide/gradient-interpolation) vont plus loin.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

Ajouter `in oklch` change la façon dont le navigateur mélange les arrêts. Les anciens navigateurs ignorent toute la déclaration : gardez donc une couleur de fond en secours.

## Comment rendre un dégradé bleu violet moins banal

La diagonale violet vers bleu est si familière qu’on la lit comme un réglage par défaut avant même de lire votre texte. Nul besoin de couleurs exotiques pour y échapper. De petites décisions délibérées suffisent, et elles s’additionnent.

- **Choisissez d’abord un fond.** Un fond de minuit ou de papier donne l’ambiance plus que le bleu ou le violet, et vous distingue aussitôt du réglage vif par défaut.
- **Sortez la lumière de la diagonale.** Placez le violet le plus clair dans un coin avec un dégradé radial, au lieu de le faire courir d’un bord à l’autre à 135 degrés.
- **Utilisez des arrêts inégaux.** Laissez l’indigo tenir 60 % de la surface et le violet seulement le dernier tronçon. Trois parts égales font fabriqué par une machine.
- **Ajoutez un accent à un seul endroit.** Un filet de rose, de turquoise ou d’or, comme dans la série ci-dessus, se retient bien mieux que les couleurs de base.
- **Finissez par du grain.** Une fine couche de bruit masque le banding et transforme un dégradé d’écran en surface ; les [dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) donnent le code.
- **Rendez chaque format séparément.** La lumière doit tomber au bon endroit sur une story comme sur une bannière, pas là où un recadrage la laisse.

Les noms d’ambiance aident aussi. « Indigo de minuit avec un bord doré » est une décision que vous pouvez répéter toute une année de publications ; « dégradé bleu violet » non.

## Le texte sur un dégradé bleu violet

| Fond | Texte | Contraste | Verdict |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | Blanc | 6,3:1 | Bon |
| Violet `#7c3aed` | Blanc | 5,7:1 | Bon |
| Bleu `#3b82f6` | Blanc | 3,7:1 | Grands titres seulement |
| Lavande `#a78bfa` | Blanc | 2,7:1 | Insuffisant |
| Lavande `#a78bfa` | Indigo profond `#1e1b4b` | 5,9:1 | Bon |
| Brume de pervenche `#c7d2fe` | Indigo profond `#1e1b4b` | 10,7:1 | Excellent |

Rapports de contraste WCAG. Le bleu moyen est plus clair qu’il n’en a l’air, ce qui piège de nombreux designs bleu vers violet côté bleu.

Une publication LinkedIn carrée annonçant la version 3, lettrage blanc sur un dégradé indigo sombre et violet

Une publication LinkedIn sur fond indigo sombre. Texte clair, halo violet gardé d’un seul côté.

Une story verticale avec un lettrage indigo foncé sur un dégradé pervenche et lavande pâles

Une story sur pervenche douce avec une encre indigo profond.

Quand les mots passent de l’extrémité sombre à l’extrémité claire d’un même dégradé, aucune encre ne convient partout. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) présente les options. Dans Gradiently, l’encre Auto s’en charge ligne par ligne, en choisissant une typographie claire ou foncée dans la palette du Mark, si bien qu’un fond bleu violet n’avale jamais un titre.

## FAQ

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

Un code fiable est `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. Pour quelque chose de moins attendu, partez d’un fond sombre : `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Le bleu et le violet vont-ils ensemble dans un dégradé ?

Oui. Ils sont voisins sur le cercle chromatique : chaque étape entre les deux est une couleur nette et saturée, comme l’indigo.

### Pourquoi mon dégradé bleu vers rose est-il gris au milieu ?

Le navigateur mélange en sRGB par défaut, ce qui peut ternir les dégradés qui traversent une grande partie du cercle. Ajoutez `in oklch` après l’angle pour garder un milieu éclatant.

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

Le blanc se lit bien sur l’indigo et le violet. Sur le bleu moyen, la lavande et la pervenche, un indigo profond comme `#1e1b4b` est plus sûr.

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

L’indigo. Un indigo typique en design est `#4f46e5`, et les indigos plus sombres tournent autour de `#312e81`.