Qu’est-ce qu’un dégradé ? Un guide simple des fondus de couleur

Qu’est-ce qu’un dégradé ? En design, un dégradé est un passage doux et progressif d’une couleur à une autre sur une surface, comme un bleu profond qui se fond dans le violet sur une affiche. Là où un aplat peint chaque pixel de la même couleur, un dégradé donne à chaque point sa propre couleur, calculée à partir de quelques couleurs que vous choisissez et de l’endroit où vous les placez. Ce petit changement explique pourquoi un dégradé peut ressembler à de la lumière, de l’air ou de la profondeur, et pourquoi il est aussi facile de lui donner un air bon marché.

Cette page présente les éléments qui composent tout dégradé, les principaux types, les usages des dégradés et les raisons de leur retour. Chaque section renvoie à un guide plus approfondi si vous voulez le détail.

Les éléments d’un dégradé

Chaque dégradé, qu’il soit dessiné dans un outil de design, écrit en CSS ou rendu par un moteur de jeu, se résume aux mêmes quelques ingrédients. Une fois que vous savez les nommer, vous pouvez décrire n’importe quel dégradé avec assez de précision pour que quelqu’un d’autre le reconstruise.

La position des arrêts compte autant que les couleurs. Déplacez l’arrêt du milieu de 50 % à 65 % et les trois mêmes couleurs racontent une autre histoire : plus d’ombre, un lever de soleil plus tardif. Pour comprendre la direction en détail, lisez dans quel sens orienter un dégradé.

Dégradés fondus et dégradés à paliers

Un dégradé fondu passe en continu d’un arrêt à l’autre. Un dégradé à paliers, ou à arrêts nets, place deux arrêts à la même position : la couleur saute au lieu de se fondre. Les arrêts nets créent des rayures, des drapeaux, des barres de progression et des couchers de soleil rétro ; ce sont toujours des dégradés, avec simplement le fondu coupé à ces endroits.

Les dégradés fondus ont une faiblesse : les écrans affichent un nombre limité de nuances, et un fondu très doux peut se casser en bandes visibles. Ce problème a son propre guide, les bandes dans les dégradés.

Les principaux types de dégradés

Le type, c’est la forme que suit la couleur. Quatre types couvrent presque tout ce que vous croiserez, et les types de dégradés les montre chacun avec du code en direct.

• Linéaire : la couleur change le long d’une ligne droite selon un angle. Le cheval de bataille des arrière-plans, boutons et bannières. Voir les dégradés linéaires en CSS.
• Radial : la couleur se diffuse depuis un point en cercle ou en ellipse, comme un projecteur ou une lueur. Voir les dégradés radiaux.
• Conique : la couleur tourne autour d’un point central, comme l’aiguille d’une horloge. Idéal pour les cercles chromatiques, les camemberts et les reflets. Voir les dégradés coniques.
• Maillé : plusieurs points de couleur se fondent en deux dimensions à la fois, pour un résultat organique et pictural. Voir les dégradés maillés.

Comment les couleurs se fondent : la partie qu’on saute

Entre deux arrêts, le logiciel doit inventer toutes les couleurs intermédiaires. Sa façon de le faire dépend de l’espace colorimétrique. La plupart des outils et l’ancien CSS font le fondu en sRGB, qui mélange les valeurs de rouge, de vert et de bleu en ligne droite. C’est rapide, mais cela peut passer par des gris ternes, surtout entre des couleurs opposées comme le bleu et le jaune.

Des espaces colorimétriques plus récents comme OKLab et OKLCH sont construits autour de la façon dont nous percevons la luminosité et la teinte : les fondus restent plus lumineux et plus réguliers. En CSS, vous pouvez les demander directement, et la différence saute aux yeux. L’histoire complète, et les solutions, sont dans les dégradés boueux.

.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}

Où l’on utilise les dégradés

Les dégradés trouvent leur place partout où une surface doit paraître éclairée ou vivante sans ajouter de photo. Leurs usages les plus courants : arrière-plans de publications et de sites web, icônes d’applications, boutons et mises en avant dans les interfaces, emballages, affiches, et identités de marque qui utilisent un fondu comme d’autres marques utilisent une couleur. Pour l’aspect identité, voir l’identité de marque en dégradé.

Pourquoi les dégradés sont revenus

Les dégradés étaient partout dans les interfaces brillantes des années 2000, puis sont passés de mode quand le flat design a envahi les écrans au début des années 2010. Ils sont revenus sous une forme plus discrète : moins de biseaux et de faux reflets, davantage de fondus doux à deux ou trois couleurs. Les écrans haute résolution y ont contribué, car une couleur fondue est plus belle sur un écran dense, et les marques en quête de quelque chose de plus distinctif qu’une teinte unie ont trouvé de l’espace dans les fondus. La vue d’ensemble est dans l’histoire des dégradés.

Aujourd’hui, les dégradés les plus intéressants vont au-delà de la couleur. Le grain, la texture et un mouvement lent donnent à un fondu l’air d’une matière plutôt que d’un préréglage : c’est le sujet des dégradés granuleux et de la texture des dégradés.

Si vous préférez partir d’un fondu terminé plutôt que d’en construire un de zéro, le Marché propose des milliers de Marks : des recettes de dégradé complètes, avec couleur, matière, grain et lumière, avec lesquelles vous pouvez créer gratuitement.