Les dégradés sont passés du ringard au raffiné et inversement tant de fois que les designers en sont devenus frileux. Mais un bon dégradé est l'un des moyens les moins coûteux de donner à une interface plate l'impression d'avoir de la profondeur et de la lumière. Le problème, c'est que la plupart des dégradés échouent en exactement un endroit — le milieu — et cet échec est si courant qu'il a appris à toute une génération de designers à éviter complètement l'outil. Une fois que vous comprenez pourquoi le point médian vire à la boue, vous pouvez le corriger délibérément, et les dégradés deviennent une partie fiable de la trousse au lieu d'un pari. Voici le modèle mental et les gestes que j'utilise réellement.
Un dégradé est un chemin, pas une paire
L'erreur cachée à l'intérieur de chaque dégradé boueux est de le penser comme deux couleurs. Ce n'est pas le cas. C'est un chemin entre deux couleurs, et la question qui décide s'il paraît bon est : quel itinéraire le mélange emprunte-t-il pour aller de A à B ?
Quand vous écrivez un simple dégradé CSS comme linear-gradient(#3B82F6, #F59E0B) — un bleu vers un ambre — le navigateur, par défaut, interpole en sRGB en parcourant une ligne droite à travers l'espace colorimétrique. Imaginez la roue chromatique vue de dessus. Le bleu est d'un côté, l'ambre à peu près à l'opposé. La ligne droite entre eux ne suit pas le pourtour coloré ; elle coupe directement à travers le centre gris désaturé. Le point médian de ce dégradé est donc un triste ton grisâtre délavé. C'est ça, la boue. Ce n'est pas un bug de rendu — c'est de la géométrie. Le chemin le plus court entre deux teintes opposées passe par le gris.
Cette seule prise de conscience recadre tout. Si la boue vient du chemin, alors la corriger signifie contrôler le chemin. Il y a trois leviers principaux : choisir des couleurs dont le chemin en ligne droite est déjà bon, réacheminer le chemin avec un arrêt intermédiaire, ou changer l'espace colorimétrique pour que le chemin par défaut s'incurve autour de la roue au lieu de la traverser.
Levier un : choisir des couleurs qui se traitent bien
Le dégradé net le plus facile se situe entre deux couleurs proches en teinte — une paire analogue. Mélangez #3B82F6 (bleu) vers #6366F1 (indigo) et le chemin en ligne droite quitte à peine le voisinage bleu-violet, il n'y a donc aucune zone grise dans laquelle tomber. Le résultat est fluide et riche automatiquement.
C'est pourquoi tant de dégradés à l'allure haut de gamme sont subtils : bleu vers violet, sarcelle vers vert, magenta vers rouge-orangé. Ils sont analogues, souvent à 30–60 degrés de teinte, et ils varient plus en luminosité qu'en teinte. Un dégradé qui change surtout de luminosité tout en gardant une teinte quasi constante est presque impossible à rendre boueux. Si vous voulez un point de départ sûr, construisez d'abord un ensemble monochromatique ou analogue, puis mélangez à l'intérieur.
Le corollaire : les dégradés complémentaires (couleurs à 180 degrés d'écart) sont les plus difficiles à garder nets, précisément parce que leur chemin en ligne droite traverse le centre de plein fouet. Ils peuvent se faire — mais ils ont besoin de l'un des deux leviers suivants.
Levier deux : ajouter un arrêt pour orienter le chemin
Quand vous voulez vraiment deux couleurs distantes — un bleu et un orange chaud, disons, parce que ce sont toutes deux des couleurs de marque — ne laissez pas le navigateur choisir le point médian. Choisissez-le vous-même avec un troisième arrêt.
Au lieu de linear-gradient(#3B82F6, #F59E0B), essayez d'acheminer par une teinte qui les relie : linear-gradient(#3B82F6, #C084FC, #F59E0B). Cet arrêt médian violet tire le chemin autour de la roue à travers le violet et le rose plutôt qu'à travers le gris. Maintenant la transition reste saturée sur tout le trajet. Vous avez tracé manuellement l'itinéraire coloré que la ligne droite refusait de prendre.
Choisir la couleur de transition est la partie artisanale. Demandez-vous dans quel sens autour de la roue vous voulez voyager — du bleu à l'ambre peut passer par le violet/magenta (l'itinéraire chaud) ou par le vert/sarcelle (l'itinéraire froid), et ils paraissent complètement différents. L'itinéraire chaud évoque le coucher de soleil ; l'itinéraire froid évoque les tropiques. Choisissez intentionnellement. Vous pouvez tester rapidement des couleurs de transition en générant une palette dans le générateur de palette de couleurs et en plaçant des teintes candidates entre vos extrémités.
Limitez-vous à un, peut-être deux arrêts intermédiaires. Chaque arrêt supplémentaire est un endroit de plus où le dégradé peut développer une couture ou une bande visible. Plus d'arrêts n'est pas plus de luxe — la retenue se lit comme du luxe.
Levier trois : interpoler dans un meilleur espace colorimétrique
La solution moderne, et de plus en plus mon choix par défaut, est de changer l'espace dans lequel se produit le mélange. Le CSS vous permet désormais de spécifier directement l'espace colorimétrique d'interpolation : linear-gradient(in oklch, #3B82F6, #F59E0B).
OKLCH (et son cousin LCH) est perceptuellement uniforme — des pas numériques égaux paraissent des pas visuels égaux à votre œil — et, point crucial, lorsque vous lui demandez d'interpoler la teinte, il voyage autour de la roue des teintes plutôt qu'à travers le milieu cartésien. L'effet pratique est que le même dégradé bleu-vers-ambre à deux couleurs cesse de plonger dans le gris et balaie à la place des teintes intermédiaires vives automatiquement, sans arrêt manuel requis. La documentation MDN sur l'interpolation des couleurs de dégradé couvre la syntaxe et les options shorter hue / longer hue, qui vous permettent de contrôler dans quelle direction autour de la roue va le mélange.
Quelques mises en garde honnêtes. La prise en charge de in oklch par les navigateurs est bonne dans les navigateurs actuels mais pas universelle, alors prévoyez un repli sRGB standard (background: linear-gradient(#3B82F6, #F59E0B); avant la ligne OKLCH). Et OKLCH peut parfois produire un point médian trop vif pour des arrière-plans subtils — pour un lavis de héros à peine perceptible, le sRGB simple entre couleurs proches convient encore. Misez sur OKLCH quand les extrémités sont éloignées et que vous voulez qu'elles restent saturées.
Angles, types, et où les dégradés ont leur place
Le chemin est la partie difficile ; le reste est affaire de goût, mais il y a des conventions à connaître.
- Linéaire, de haut en bas (`180deg`) imite la lumière venue d'en haut et paraît naturel sur les boutons et les cartes. Un bouton allant de
#4F8EF7vers#3B6FD4se lit comme doucement éclairé et tridimensionnel. - Diagonal (`135deg`) ajoute de la direction et de l'énergie — le choix par défaut pour les grands arrière-plans de héros car il paraît dynamique sans être tapageur.
- Les dégradés radiaux placent une lueur douce en un point ; charmants pour mettre en valeur un élément focal ou simuler une lumière ambiante derrière une carte.
- Les dégradés coniques balaient la teinte autour d'un centre et servent surtout aux graphiques, aux indicateurs de chargement et aux roues de sélecteur de couleur plutôt qu'aux arrière-plans.
Pour la profondeur, gardez les deux couleurs proches en luminosité et en teinte — un dégradé subtil (#1E293B vers #0F172A) sur une surface sombre ajoute une richesse qu'aucun aplat ne peut offrir. Pour l'impact, laissez le dégradé être la vedette et donnez-lui de l'espace.
N'oubliez pas le texte
Les dégradés et le texte entretiennent une relation tendue. Le contraste doit tenir sur toute l'étendue du dégradé, pas seulement là où vous avez par hasard déposé le titre. Un titre qui passe le contraste WCAG sur le haut clair d'un dégradé peut discrètement échouer sur le bas plus sombre. Testez le point le plus défavorable, appuyez-vous sur les ratios de contraste WCAG (4,5:1 pour le texte courant, selon les recommandations du W3C), et en cas de doute déposez une superposition opaque semi-transparente derrière le texte pour que son arrière-plan soit prévisible. Ou gardez tout simplement les dégradés dans les zones décoratives et posez le texte sur des aplats.
La version courte
Arrêtez de penser à un dégradé comme à deux couleurs et commencez à le penser comme à la ligne entre elles. Les milieux boueux viennent d'un chemin en ligne droite à travers le gris ; vous les corrigez en choisissant des couleurs plus bienveillantes, en orientant avec un arrêt intermédiaire, ou en interpolant en OKLCH pour que le chemin s'incurve autour du pourtour. Maîtrisez cela et les dégradés cessent d'être un risque pour devenir l'un des moyens les plus efficaces d'ajouter de la lumière, de la profondeur et de la personnalité à un travail plat. Tirez deux couleurs de le générateur de palette de couleurs, déposez-les dans un linear-gradient(in oklch, …), et regardez un mélange qui aurait viré au gris rester vivant d'un bout à l'autre.
Questions fréquentes
Pourquoi le milieu de mon dégradé paraît-il gris ou boueux ?
Lorsque vous mélangez deux couleurs dans l'espace sRGB par défaut, l'interpolation coupe en ligne droite à travers la roue chromatique plutôt que de la contourner. Si vos deux couleurs sont éloignées en teinte — disons un bleu et un jaune — cette ligne droite traverse le centre gris peu saturé, si bien que le point médian se désature et paraît boueux. La solution consiste soit à choisir des couleurs plus proches en teinte, soit à ajouter un arrêt de couleur intermédiaire pour acheminer le mélange autour de la roue, soit à utiliser un espace colorimétrique et une méthode d'interpolation de teinte qui parcourent le pourtour plutôt que le milieu.
Quel espace colorimétrique utiliser pour les dégradés CSS ?
Pour la plupart des travaux modernes, interpoler en OKLCH ou LCH produit des dégradés nettement plus fluides et plus réguliers que le sRGB par défaut, car ces espaces sont perceptuellement uniformes — des pas numériques égaux paraissent des pas visuels égaux. Vous l'activez avec une syntaxe comme « linear-gradient(in oklch, #3B82F6, #F59E0B) ». Le sRGB par défaut convient pour des mélanges entre couleurs proches et similaires, mais pour des dégradés vifs à deux couleurs, OKLCH évite le point médian terne et les zones mortes. Vérifiez toujours la prise en charge des navigateurs et prévoyez un repli standard pour les navigateurs plus anciens.
Combien d'arrêts de couleur un dégradé devrait-il avoir ?
Deux arrêts suffisent pour un mélange simple et subtil, et c'est là que vivent la plupart des dégradés UI nets. Ajoutez un troisième arrêt intermédiaire lorsque vos deux extrémités sont éloignées en teinte et que le point médian automatique paraît mauvais — l'arrêt du milieu vous permet d'orienter le chemin à travers une couleur flatteuse plutôt qu'à travers le gris. Au-delà de trois ou quatre arrêts, vous créez généralement du banding et du bruit visuel plutôt que de la richesse. Pour les arrière-plans, moins d'arrêts avec une transition douce paraît presque toujours plus haut de gamme qu'un arc-en-ciel chargé.
Quel angle un dégradé linéaire devrait-il avoir ?
Il n'y a pas d'angle correct unique, mais quelques conventions paraissent soignées : un dégradé de haut en bas (180deg) évoque un éclairage naturel venu d'en haut, tandis qu'une diagonale autour de 135deg ajoute une sensation de direction et d'énergie sans être chaotique. Les dégradés verticaux subtils fonctionnent bien pour les boutons et les cartes car ils imitent la façon dont la lumière tombe. Les angles raides ou inhabituels attirent l'attention sur le dégradé lui-même, ce que vous ne voulez que lorsque le dégradé est l'élément vedette plutôt qu'un arrière-plan discret.
Les dégradés posent-ils un problème d'accessibilité pour le texte ?
Ils le peuvent, car le contraste du texte doit tenir sur toute la zone que le texte couvre, et pas seulement en un point. Un titre posé sur un dégradé qui va du clair au foncé pourrait passer le contraste en haut et échouer en bas. Les approches sûres consistent à ne garder le texte que sur la région du dégradé où le contraste reste au-dessus du seuil WCAG, à ajouter une superposition opaque ou semi-transparente derrière le texte, ou à limiter les dégradés aux zones décoratives sans texte. Testez toujours le point le plus défavorable du dégradé, pas la moyenne.
Envie d'expérimenter avec les couleurs ?
Essayez notre générateur de palettes gratuit pour trouver l'harmonie parfaite — avec un vérificateur de contraste WCAG intégré.
Ouvrir le générateur