# Dégradés vifs : des codes saturés qui ne vibrent pas

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

La couleur saturée est le moyen le plus rapide de se faire remarquer, et le plus rapide de fatiguer les yeux. Ces codes sont vifs à dessein et construits pour que leurs bords ne scintillent jamais, avec les raisons, pour que vous puissiez créer les vôtres.

## The short version

- Un dégradé vif utilise des couleurs très saturées, mais il ne reste agréable à regarder que si les couleurs voisines sont proches en teinte et nettement différentes en clarté.
- Des couleurs de teintes opposées et de clarté semblable placées bord à bord semblent scintiller, un effet souvent appelé vibration chromatique.
- Des opposées saturées mélangées directement en sRGB passent par un milieu grisâtre, ce que l’interpolation en oklch évite en grande partie.
- Un fond sombre ou neutre offre à l’œil un endroit où se reposer et rend la couleur vive plus lumineuse que sur du blanc.
- Le texte sur un dégradé vif se lit mieux en quasi noir ou en blanc, jamais dans une autre couleur saturée de clarté semblable.

Un **dégradé vif** est lumineux et saturé sans scintiller quand deux règles sont respectées : chaque couleur est proche de sa voisine sur le cercle chromatique, et chaque étape change nettement de clarté. Enfreignez la première et le milieu devient boueux ; enfreignez la seconde, en plaçant côte à côte des teintes opposées de même luminosité, et le bord semble scintiller. Les douze codes ci-dessous suivent les deux règles : ils sont forts comme une affiche, pas comme une migraine.

## Douze codes de dégradés vifs

- Mangue: `linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%)`
- Violet électrique: `linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%)`
- Lagon: `linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #10b981 100%)`
- Flamant: `linear-gradient(135deg, #db2777 0%, #f43f5e 50%, #fb923c 100%)`
- Soda citron vert: `linear-gradient(135deg, #16a34a 0%, #84cc16 55%, #facc15 100%)`
- Ultra: `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)`
- Cerise pop: `linear-gradient(160deg, #be123c 0%, #e11d48 45%, #f472b6 100%)`
- Glacier: `linear-gradient(135deg, #0d9488 0%, #22d3ee 50%, #818cf8 100%)`
- Rose sur nuit: `radial-gradient(circle at 30% 30%, #f472b6 0%, #9333ea 35%, #1e1033 75%)`
- Braise: `radial-gradient(circle at 70% 75%, #facc15 0%, #f97316 30%, #7c2d12 70%)`
- Montée de cobalt: `linear-gradient(180deg, #0f172a 0%, #2563eb 50%, #38bdf8 100%)`
- Corail vers or, oklch: `linear-gradient(90deg in oklch, oklch(65% 0.24 20) 0%, oklch(78% 0.17 75) 100%)`

Chaque mélange passe par des teintes voisines en devenant plus clair ou plus sombre, et c’est ce qui le garde net. Le dernier est écrit en oklch et demande un navigateur récent.

## Pourquoi certains dégradés vifs vibrent

Placez un rouge saturé directement contre un bleu saturé de luminosité semblable et la frontière semble clignoter, comme si les deux couleurs n’arrivaient pas à décider laquelle est devant. Les designers appellent cela la vibration chromatique. Elle est la plus forte sur les bords nets, les lignes fines et le texte coloré, et c’est pourquoi un texte rouge sur fond bleu est si fatigant à lire. Les couleurs elles-mêmes vont très bien ; c’est la combinaison de teintes opposées et de clartés égales, qui se touchent, qui en est la cause.

- Vibre : bord net, même luminosité: `linear-gradient(90deg, #ff2a2a 0%, #ff2a2a 50%, #1f8fff 50%, #1f8fff 100%)`
- Calme : une étape sombre entre les deux: `linear-gradient(90deg, #ff2a2a 0%, #7f1d1d 42%, #0c3a66 58%, #1f8fff 100%)`

Le même rouge et le même bleu. À gauche, ils se touchent à luminosité égale et le bord scintille ; à droite, une étape profonde les sépare et les deux couleurs paraissent plus fortes.

Il y a deux solutions. Soit séparer les couleurs par une étape plus sombre ou plus claire, comme à droite, soit choisir des voisines plutôt que des opposées. [Les couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) explique quand les opposées valent la peine.

## Règles pour créer votre propre dégradé vif

| Règle | Pourquoi | Exemple |
| --- | --- | --- |
| Rester dans un tiers du cercle | Les voisines se mélangent sans passer par le gris | Indigo, violet, magenta |
| Échelonner la clarté | Donne de la profondeur et empêche les bords de vibrer | Du profond `#1d4ed8` au lumineux `#38bdf8` |
| Une seule couleur vedette | Trois couleurs aussi fortes se battent | Le magenta culmine ; le reste le soutient |
| Ajouter un fond | Une zone sombre ou neutre repose l’œil | Rose sur nuit, braise |
| Mélanger en oklch | Garde le milieu saturé, pas terne | Corail vers or, oklch |

Cinq règles derrière chaque code ci-dessus. Enfreignez-en une délibérément, jamais par accident.

La boue est l’autre façon dont les dégradés vifs échouent. Mélangez deux opposées saturées en sRGB simple et la couleur du milieu tire vers le gris, ce que traitent [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) et, plus techniquement, [l’interpolation des dégradés](https://gradiently.design/fr/guide/gradient-interpolation). La saturation elle-même est un curseur, pas un interrupteur ; [la saturation en design](https://gradiently.design/fr/guide/color-saturation) montre comment la régler.

## Les dégradés vifs en CSS

Les navigateurs modernes savent mélanger dans un espace colorimétrique perceptuel si l’on ajoute `in oklch` au dégradé. Le milieu d’un large mélange reste alors aussi vif que ses extrémités. Donnez d’abord une version hexadécimale aux anciens navigateurs.

```css
.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}
```

Le dégradé Ultra avec une solution de repli à trois arrêts, et une version oklch à deux arrêts qui reste vive au milieu sans arrêt intermédiaire.

## Où les dégradés vifs fonctionnent le mieux

La couleur vive attire l’attention, alors dépensez-la là où l’attention est tout l’enjeu : un fil qui défile, une miniature parmi vingt autres, une affiche de l’autre côté de la rue. Elle convient moins là où l’on doit lire longtemps, comme les documents, les tableaux de bord et les longs articles, où un champ saturé fatigue l’œil en quelques paragraphes. Là, réservez le dégradé vif à un en-tête ou à un seul bouton, et laissez une surface calme porter le reste.

| Usage | À essayer | Taille |
| --- | --- | --- |
| Publication de soldes ou de lancement | Mangue, Flamant | 1080×1350 |
| Miniature YouTube | Violet électrique, Braise | 1280×720 |
| En-tête d’appli ou de produit | Lagon, Glacier | 1920×1080 |
| Couverture de story ou de Reel | Soda citron vert, Cerise pop | 1080×1920 |
| Couverture de playlist | Rose sur nuit, Ultra | 1080×1080 |
| Affiche d’événement A4 | Ultra, Montée de cobalt | 2480×3508 |

Six endroits où les dégradés vifs font vraiment leur travail, avec des codes de la grille ci-dessus et la taille de conception.

L’impression est le seul endroit où s’attendre à un choc. Les couleurs d’écran les plus lumineuses, en particulier les bleus électriques, les roses vifs et les verts acides, sortent de ce que les encres CMJN peuvent reproduire et reviennent nettement plus ternes sur papier. [RVB ou CMJN](https://gradiently.design/fr/guide/rgb-vs-cmyk) explique pourquoi ; choisissez vous-même des versions un peu plus profondes et commandez une épreuve avant un tirage.

## Des mots sur un dégradé vif

Les fonds saturés varient fortement en luminosité d’une extrémité à l’autre, donc une seule couleur de texte lisible côté sombre peut disparaître côté clair. N’utilisez que du blanc ou du quasi noir, placez le titre là où le dégradé est le plus profond ou le plus pâle, et vérifiez le contraste au pire endroit, pas en moyenne. [Contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) donne les valeurs à viser.

Une publication portrait de soldes avec un texte gras sur un fond lumineux et saturé

Un fond puissant avec une typographie simple et grasse. La couleur fait la vente ; les mots doivent seulement être lisibles.

C’est là qu’un Mark Gradiently aide avec la couleur vive : il sait où se trouvent les mots, approfondit ou éclaircit la couleur près des lettres, et l’encre automatique choisit un texte clair ou sombre pour chaque ligne à partir de sa propre palette. Un style saturé reste lisible à toutes les tailles, sans cadre ni ombre derrière le titre. Pour les styles néon en particulier, voyez [les dégradés néon](https://gradiently.design/fr/guide/neon-gradients) ; pour l’autre bout du curseur, [les dégradés subtils](https://gradiently.design/fr/guide/subtle-gradients).

## FAQ

### Qu’est-ce qui rend un dégradé vif ?

Des couleurs très saturées, proches sur le cercle chromatique, avec un net changement de clarté d’une extrémité à l’autre.

### Pourquoi certaines associations de couleurs vives font-elles mal aux yeux ?

Des teintes opposées de clarté semblable placées bord à bord semblent scintiller. Séparez-les par une étape plus sombre ou plus claire, ou choisissez des couleurs voisines.

### Comment empêcher un dégradé vif de devenir gris au milieu ?

Utilisez des teintes voisines, ajoutez un arrêt au milieu, ou mélangez en oklch avec `linear-gradient(in oklch, ...)` dans les navigateurs qui le prennent en charge.

### Quelle couleur de texte sur un dégradé vif ?

Blanc ou quasi noir. Vérifiez le contraste au point le plus lumineux et au point le plus sombre derrière les mots, pas seulement au milieu.

### Quel bon dégradé vif pour l’en-tête d’un site ?

Essayez `linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%)` avec un texte blanc.