L’essentiel en bref
- Un dégradé boueux est un dégradé qui vire au gris, au brun ou au terne là où ses couleurs se rencontrent, au lieu de rester vif d’un bout à l’autre.
- La cause est le mélange dans l’espace colorimétrique sRGB, où le point médian entre deux couleurs opposées, comme le bleu et le jaune, est un gris plat.
- Mélanger en OKLCH garde l’intensité des couleurs en contournant le cercle des teintes au lieu de passer tout droit par le gris.
- Une étape intermédiaire choisie à la main, comme un turquoise entre le bleu et le jaune, corrige l’effet boueux dans n’importe quel outil et n’importe quel format.
- Les teintes voisines sur le cercle chromatique ne tournent presque jamais à la boue : c’est pourquoi les dégradés analogues sont les plus sûrs à concevoir.
Sur cette page
Un dégradé boueux est un fondu qui vire au gris, au brun ou au terne au milieu, alors que ses deux couleurs sont vives. Cela arrive parce que la plupart des outils mélangent les couleurs dans l’espace colorimétrique sRGB, en combinant les valeurs de rouge, de vert et de bleu en ligne droite. Quand les deux couleurs sont aux côtés opposés du cercle chromatique, ces lignes droites se croisent près du gris. La solution est de choisir le chemin que prend le fondu : ajouter une couleur au milieu, mélanger en OKLCH ou utiliser des teintes plus proches.
Pourquoi les couleurs opposées virent au gris
Regardez les nombres. Le bleu pur est rouge 0, vert 0, bleu 255. Le jaune pur est rouge 255, vert 255, bleu 0. À mi-chemin, chaque canal tombe autour de 128, soit #808080 : un gris moyen. La même chose arrive avec le rouge et le cyan, l’orange et l’azur, ou toute autre paire complémentaire. Mathématiquement, la ligne droite entre elles passe en plein sur l’axe des gris.
Un second problème, plus subtil, est le creux sombre. Du bleu au rouge en sRGB passe par #800080, un violet plus sombre que chaque extrémité : le milieu du fondu ressemble à un hématome. Les couleurs ne sont pas opposées, mais le fondu perd tout de même en luminosité là où elles se rencontrent.
Solution 1 : ajouter une étape intermédiaire
La solution la plus simple marche dans tous les outils et tous les formats : choisissez la couleur que vous voulez au milieu et placez-la vous-même. Prenez une couleur vive et saturée, située entre les deux extrémités sur le cercle chromatique. Entre le bleu et le jaune, c’est le turquoise ou le vert. Entre l’orange et le bleu, un rose prend le chemin chaud, celui de la plupart des dégradés de coucher de soleil.
Solution 2 : mélanger en OKLCH
OKLCH décrit la couleur en luminosité, chroma (intensité) et teinte, et il a été conçu pour que des pas égaux paraissent des changements égaux à l’œil. Mélanger en OKLCH garde le chroma élevé et tourne autour du cercle des teintes au lieu de le traverser en ligne droite : le fondu ne s’effondre donc jamais en gris. En CSS, on le demande en une seule expression. Vous pouvez aussi choisir dans quel sens faire le tour du cercle.
/* Default for hex colours: sRGB, grey in the middle */
.muddy { background: linear-gradient(90deg, #0000ff, #ffff00); }
/* OKLCH, shorter way round the wheel: through teal and green */
.clean { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }
/* OKLCH, longer way round: through magenta, red and orange */
.sunset { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }
/* OKLab: straight line, but with even lightness */
.even { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }OKLab mérite aussi d’être connu. C’est la valeur par défaut de la syntaxe de couleur CSS moderne et il donne des fondus réguliers et fluides, mais comme il voyage encore en ligne droite, de vrais opposés perdent en intensité au milieu. Utilisez OKLab pour des couleurs déjà proches ; utilisez OKLCH ou une étape intermédiaire pour des couleurs éloignées. Pour la syntaxe complète, voyez les dégradés OKLCH en CSS, ou explorez l’espace sur oklch.com.
Solution 3 : choisir des teintes plus proches
Le moyen le plus fiable d’éviter la boue est de ne pas la demander. Des couleurs voisines sur le cercle, comme le bleu et le violet ou l’orange et le rose, se mélangent proprement dans n’importe quel espace colorimétrique, car leur ligne droite ne passe jamais près du gris. C’est pourquoi les couleurs analogues donnent les dégradés les plus sûrs, et pourquoi les paires complémentaires demandent du soin ; voyez les couleurs complémentaires.
| Paire | Résultat par défaut | Pont net |
|---|---|---|
| Bleu et jaune | Gris plat | Turquoise #14b8a6 ou vert #22c55e |
| Orange et bleu | Gris-brun | Rose #ec4899 ou violet #8b5cf6 |
| Violet et vert | Gris-bleu terne | Bleu #0ea5e9 |
| Rouge et cyan | Gris plat | Violet #8b5cf6 |
| Rose et vert | Beige boueux | Jaune pâle #fde68a ou lavande #c4b5fd |
| Bleu et rouge | Creux violet sombre | Magenta vif #d946ef |
Solution 4 : surveiller la luminosité
La boue n’est pas seulement grise. Un fondu peut aussi paraître terne quand sa luminosité s’affaisse au milieu, ou quand une extrémité est bien plus sombre que l’autre et que la transition se fait dans une bande étroite. Gardez la luminosité de vos étapes à peu près égale, ou faites-la évoluer régulièrement dans un seul sens, et laissez de la place à la transition. Une position d’étape à 40 % ou 60 % paraît souvent plus naturelle qu’un 50 % mécanique.
Vire à la boue
- Des couleurs opposées sans rien entre elles
- Une extrémité claire et une sombre qui se rencontrent dans une bande étroite
- Beaucoup de couleurs sans lien dans un seul fondu
- Faire confiance au fondu par défaut pour des paires complémentaires
Reste net
- Une couleur vive choisie au point médian
- Mélanger en OKLCH pour des teintes éloignées
- Des teintes voisines plus un accent
- Contrôler le point médian seul avant de publier
L’effet boueux s’aggrave dans les dégradés maillés, où plusieurs couleurs se rencontrent en même temps. Les mêmes règles valent pour chaque superposition : gardez les voisines proches, et placez un pont entre les opposées.
Si vous préférez partir d’un fondu déjà équilibré, cherchez sur le Marché avec des mots de couleur comme « bleu et jaune » ou « turquoise profond » et créez avec n’importe quel Mark trouvé.
Les questions qu’on nous pose
Pourquoi mon dégradé paraît-il gris au milieu ?
Vos couleurs sont presque opposées sur le cercle chromatique et sont mélangées en sRGB, où le point médian entre opposées est gris.
Comment corriger un dégradé boueux ?
Ajoutez une étape intermédiaire vive entre les deux couleurs, mélangez en OKLCH au lieu de sRGB, ou choisissez des couleurs plus proches sur le cercle chromatique.
Que signifie in oklch dans un dégradé CSS ?
Cela dit au navigateur de mélanger les couleurs dans l’espace colorimétrique OKLCH, qui garde l’intensité des couleurs et tourne autour du cercle des teintes au lieu de passer par le gris.
OKLab ou OKLCH pour les dégradés ?
OKLab donne des fondus réguliers et fluides pour des couleurs proches. OKLCH est meilleur pour des teintes éloignées, car il garde leur intensité.
Quelles combinaisons de couleurs ne virent jamais à la boue ?
Les teintes voisines, comme le bleu et le violet ou l’orange et le rose, se mélangent proprement dans presque tous les espaces colorimétriques.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
