Couleurs de dégradé CSS : pourquoi un dégradé vire au gris au milieu et 3 façons de le corriger
Fondez du bleu dans du jaune et le milieu devient gris, car les couleurs hex se mélangent en RGB. Ajoutez un stop au milieu, mélangez en OKLCH ou choisissez des voisines sur le cercle chromatique. Cinq dégradés prêts à l'emploi.
Un dégradé vire au gris au milieu parce que le navigateur mélange les couleurs hex en RGB, et deux couleurs opposées s'annulent à mi-chemin. La solution : donner au milieu une couleur choisie exprès, ou changer la façon dont le mélange est calculé. Voici trois solutions et cinq dégradés à copier-coller.
Pourquoi le milieu vire au gris
Regardez un dégradé qui paraît boueux et ignorez les extrémités. Les extrémités vont bien. Vous les avez choisies. Le milieu, lui, personne ne l'a choisi.
Un dégradé est un mélange, et un mélange demande des maths. Les couleurs hex sont des valeurs RGB, donc par défaut le navigateur les mélange canal par canal.
À mi-chemin entre le bleu et le jaune, le rouge est entre 0 et 255, le vert est entre 0 et 255, et le bleu est entre 255 et 0. Chaque canal atterrit près de 128. Rouge, vert et bleu égaux, c'est la définition du gris.
#0000FF vers #FFFF00
Avec un stop central #0EBAAE
Ce n'est ni votre écran ni un problème de compression. C'est de l'arithmétique, et elle apparaît dès que les deux couleurs sont éloignées sur le cercle chromatique. Le bleu et le jaune sont presque exactement opposés, le pire des cas.
Solution 1 : ajouter un stop central
La solution la plus directe consiste à ne plus laisser le milieu au hasard. Ajoutez un troisième stop à 50 % avec une couleur que vous avez choisie.
background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00);
#0EBAAE est un turquoise situé entre le bleu et le jaune en couleur perçue. Le mélange va maintenant du bleu au turquoise, puis du turquoise au jaune, et aucune des deux moitiés ne croise le gris.
Ça marche dans tous les navigateurs et n'exige aucune nouvelle syntaxe, c'est donc le choix sûr pour un design qui doit rendre pareil partout. Choisissez la couleur du milieu à l'œil, puis vérifiez-la à côté des deux extrémités. Le prix à payer : vous gérez désormais trois couleurs au lieu de deux.
Solution 2 : mélanger en OKLCH
L'autre solution change le calcul au lieu d'ajouter une couleur. CSS permet de choisir l'espace colorimétrique dans lequel se fait le mélange, et OKLCH décrit la couleur en luminosité, chroma et teinte. Le chroma indique à quel point une couleur est colorée, donc un mélange qui garde le chroma reste coloré.
background: linear-gradient(in oklch, #0000FF, #FFFF00);
Avec in oklch, le navigateur fait le tour du cercle chromatique, en passant par des verts et des turquoises, au lieu de traverser tout droit le centre gris. Vous gardez deux couleurs et le code reste court. MDN documente cela comme la méthode d'interpolation des couleurs dans la fonction de dégradé, et les couleurs hex héritées n'utilisent RGB que si vous n'en choisissez pas une autre, pour rester compatibles avec les anciennes pages.
Deux choses à savoir. Certaines couleurs de ce trajet peuvent sortir de ce qu'un écran sait afficher, donc les navigateurs les ramènent à la valeur affichable la plus proche. Et le chemin emprunté est le plus court autour du cercle, alors vérifiez qu'il vous plaît. Notre guide sur la couleur OKLCH dans le CSS moderne détaille cet espace.
Solution 3 : choisir des voisines
La troisième solution ne touche pas au code. Elle choisit des couleurs qui ne peuvent pas s'annuler.
#0066FF vers #FF8800
#6440E0 vers #E040A0
Les couleurs opposées se mélangent en gris. Les voisines donnent quelque chose entre elles qui reste une couleur. Si une marque associe deux opposées, vous pouvez quand même les utiliser dans un dégradé : placez un stop central entre elles, ou mélangez en OKLCH.
Bleu vers orange, mélange par défaut
Bleu vers orange, en oklch
Comment vérifier votre propre dégradé
- Regardez le milieu, pas les extrémités.
- Nommez la couleur que vous y voyez. Si le nom est gris, marron ou boue, comme avec #808080 ou #807780, c'est le problème.
- Choisissez l'une des solutions ci-dessus et comparez les deux versions côte à côte.
Un dégradé vaut ce que vaut son pire point, et son pire point est presque toujours le milieu.
Cinq dégradés à piquer
Chacun a été vérifié pour que son milieu reste coloré. Le premier a un stop central intégré. Les quatre autres utilisent des teintes voisines. Touchez un code pour le copier.
| Dégradé | Début | Milieu | Fin | Pourquoi ça marche |
|---|---|---|---|---|
| Bleu, turquoise, jaune | #0000FF | #0EBAAE | #FFFF00 | Extrémités opposées, sauvées par un vrai stop central |
| Violet vers rose | #6440E0 | aucun | #E040A0 | Voisines sur le cercle |
| Bleu vers turquoise | #2F5BEA | aucun | #14B8A6 | Voisines sur le cercle |
| Orange vers rose vif | #FF7A00 | aucun | #FF2E93 | Voisines sur le cercle |
| Vert vers vert citron | #00A86B | aucun | #C6F432 | Voisines sur le cercle |
À transmettre à votre développeur
.gradient-sunrise { background: linear-gradient(90deg, #0000FF, #0EBAAE, #FFFF00); }
.gradient-violet { background: linear-gradient(90deg, #6440E0, #E040A0); }
.gradient-ocean { background: linear-gradient(90deg, #2F5BEA, #14B8A6); }
.gradient-sunset { background: linear-gradient(90deg, #FF7A00, #FF2E93); }
.gradient-meadow { background: linear-gradient(90deg, #00A86B, #C6F432); }
/* Two opposite colors, no middle stop: choose the blend space instead. */
.gradient-opposites { background: linear-gradient(in oklch, #0066FF, #FF8800); }
Si un navigateur ne comprend pas in oklch, il ignore toute la déclaration. Écrivez d'abord une ligne linear-gradient(...) classique en repli, puis la ligne OKLCH après elle.
FAQ
Pourquoi mon dégradé devient-il gris au milieu ?
Les couleurs hex se mélangent en RGB, et deux couleurs éloignées sur le cercle chromatique donnent une moyenne grise. Le bleu #0000FF et le jaune #FFFF00 se rencontrent sur #808080.
Comment éviter qu'un dégradé CSS paraisse boueux ?
Ajoutez un stop central avec une vraie couleur, mélangez en OKLCH avec linear-gradient(in oklch, ...), ou choisissez deux couleurs voisines sur le cercle.
Que fait "in oklch" dans un dégradé CSS ?
Ça indique au navigateur de mélanger les couleurs dans l'espace colorimétrique OKLCH au lieu de RGB, si bien que le milieu garde sa couleur au lieu de tomber dans le gris.
Quelles couleurs de dégradé vont bien ensemble ?
Des voisines sur le cercle chromatique, comme le violet #6440E0 vers le rose #E040A0 ou le vert #00A86B vers le vert citron #C6F432. Leur mélange reste éclatant sur toute la longueur.
Tous les navigateurs gèrent-ils les dégradés en OKLCH ?
Les navigateurs modernes oui, mais un navigateur qui ne les gère pas abandonnera la déclaration. Ajoutez avant elle une ligne de dégradé classique en repli.
Pourquoi le bleu vers le jaune donne-t-il du gris et pas du vert ?
Parce que le mélange prend le chemin direct à travers RGB, où la moyenne des deux est grise. Un milieu vert n'apparaît que si vous l'ajoutez comme stop ou si vous mélangez en OKLCH.
Sources
- CSS Color Module Level 4, interpolation : les couleurs sRGB héritées comme l'hex s'interpolent en sRGB par défaut, et d'autres espaces se choisissent avec la méthode d'interpolation des couleurs.
- MDN, linear-gradient() : la syntaxe
<color-interpolation-method>,in oklch. - MDN, OKLCH color : luminosité, chroma et teinte.
- Le point médian de (0, 0, 255) et (255, 255, 0) est (127.5, 127.5, 127.5), soit #808080 avec un chroma OKLCH de 0. Les points médians de #0066FF vers #FF8800 (#807780) et de #6440E0 vers #E040A0 (#A240C0) ont été calculés en sRGB par nos soins. Les barres de cette page ont été générées à partir de ces calculs, et la barre OKLCH ramène les couleurs hors de la gamme de l'écran, comme le font les navigateurs.
- Première publication sous forme de carrousel sur UX Brainy.
Want gradients, color and every other detail designed as one system? Our team designs and builds product UI that holds up on every screen.
Get Started
