Interpolation des dégradés : sRGB, OKLab et pourquoi c’est important

L’interpolation des dégradés est la façon dont sont calculées les couleurs entre vos arrêts. Vous choisissez du bleu à une extrémité et du jaune à l’autre ; le logiciel doit inventer chaque couleur intermédiaire, et il le fait en traçant une ligne entre les deux couleurs dans un certain espace colorimétrique. L’espace utilisé change ce que vous voyez. Mélangez en sRGB, et le passage du bleu au jaune traverse un gris terne. Mélangez en OKLCH, et il traverse un sarcelle éclatant. Mêmes arrêts, dégradé très différent.

Ce que signifie l’interpolation d’un dégradé

Chaque couleur peut être décrite comme un point dans un espace. En sRGB, les trois axes sont le rouge, le vert et le bleu. En OKLab, ce sont la luminosité et deux axes opposés, vert vers rouge et bleu vers jaune. En OKLCH, ce sont la luminosité, la chroma (l’intensité de la couleur) et la teinte (l’angle sur le cercle). Interpoler, c’est marcher d’un point à l’autre. Une marche en ligne droite dans un espace peut devenir une courbe, ou un détour par le gris, dans un autre.

sRGB, OKLab et OKLCH côte à côte

Pourquoi les dégradés sRGB deviennent gris ou boueux

Le sRGB a été conçu pour les écrans, pas pour l’œil. Ses valeurs sont encodées en gamma, et ses axes ne correspondent pas à notre perception de la teinte ou de la luminosité. Quand deux couleurs sont de part et d’autre du cercle, la ligne droite qui les relie passe près du centre neutre, donc le milieu perd sa couleur. La moyenne du bleu et du jaune donne #808080. C’est la principale cause des dégradés boueux, et c’est pourquoi l’instinct du designer d’ajouter une couleur de transition fonctionne : l’arrêt supplémentaire fait contourner le gris au chemin.

OKLab : des pas égaux pour l’œil

OKLab, publié par Björn Ottosson en 2020, a été construit pour que des distances égales paraissent des différences égales. Le résultat pratique est un dégradé dont la luminosité change régulièrement d’un bout à l’autre, sans creux sombre ni bosse claire au milieu. Il suit toujours un chemin droit, donc deux vrais opposés perdent un peu de couleur au centre, mais bien moins qu’en sRGB. Le CSS moderne utilise OKLab par défaut dès qu’une couleur d’un dégradé est écrite dans une syntaxe récente comme oklch().

OKLCH : garder la couleur vivante

OKLCH est le même espace qu’OKLab, décrit sous forme polaire : luminosité, chroma et angle de teinte. Interpoler dans cet espace fait le tour du cercle, donc les couleurs intermédiaires gardent leur saturation. C’est idéal pour des dégradés vifs qui affirment la marque et pour les dégradés arc-en-ciel. Vous pouvez aussi choisir le sens du tour avec shorter hue (par défaut), longer hue, increasing hue ou decreasing hue. Le guide OKLCH explique cet espace plus en détail.

Comment définir l’interpolation d’un dégradé en CSS

Ajoutez in <space> avant les arrêts, après l’angle ou la forme éventuels. Les navigateurs qui ne le comprennent pas ignorent toute la déclaration, donc écrivez d’abord une version sRGB en solution de repli. Chaque espace et chaque mot-clé de teinte sont listés dans la référence MDN sur l’interpolation des couleurs, et les dégradés CSS en OKLCH propose d’autres recettes.

.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}

Quel espace colorimétrique choisir

1. 1

   OKLab par défaut

   Pour la plupart des mélanges de deux ou trois couleurs, il donne le résultat le plus doux, sans surprise.

2. 2

   OKLCH pour les couleurs éloignées ou vives

   Quand les couleurs sont loin l’une de l’autre sur le cercle et que vous voulez un milieu qui reste lumineux.

3. 3

   Le sRGB pour coller à d’anciens travaux

   Si un dégradé doit être identique à une ressource ou une image existante, mélangez dans l’espace où il a été créé.

4. 4

   Vérifiez le milieu

   Quel que soit l’espace, regardez la couleur à mi-chemin. Si elle est grise ou d’une teinte inattendue, changez d’espace ou ajoutez un arrêt.

L’interpolation n’est qu’une partie d’un bon mélange ; la position des arrêts compte tout autant, comme l’explique les arrêts de couleur d’un dégradé. Si vous préférez éviter les maths, les Marks de Gradiently sont des fonds en dégradé aboutis qui s’affichent dans toutes les tailles où vous créez, et la documentation développeurs montre comment ChatGPT ou Claude peuvent chercher des Marks et créer des designs qui s’ouvrent dans le Studio.