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

[Canonical HTML page](https://gradiently.design/fr/guide/gradient-interpolation)

Prenez du bleu et du jaune, mélangez-les, et le milieu devient gris. Ce ne sont pas vos couleurs qui échouent. Ce sont les maths de l’espace colorimétrique qui fait le mélange, et depuis CSS Color 4 vous pouvez le changer.

## The short version

- L’interpolation d’un dégradé est la méthode qui calcule chaque couleur entre deux arrêts, et l’espace colorimétrique dans lequel elle se fait change le résultat.
- Un mélange en sRGB avance en ligne droite à travers les valeurs de rouge, de vert et de bleu, donc des couleurs opposées comme le bleu et le jaune passent par le gris.
- OKLab est conçu pour que des pas égaux paraissent des changements égaux à l’œil, ce qui donne une luminosité plus douce et plus régulière le long d’un dégradé.
- OKLCH mélange séparément la luminosité, la chroma et la teinte, si bien que les couleurs restent saturées et font le tour du cercle chromatique au lieu de traverser son centre gris.
- En CSS, vous choisissez l’espace dans le dégradé lui-même, par exemple `linear-gradient(in oklch, #2563eb, #f97316)`.

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.

- Départ : bleu: #0000ff
- Milieu en sRGB: #808080
- Milieu, sRGB linéaire: #bcbcbc
- Milieu en OKLab: #6cabc7
- Milieu en OKLCH: #00cfbd
- Arrivée : jaune: #ffff00

La couleur à mi-chemin entre un bleu pur et un jaune pur dans quatre espaces. Le sRGB tombe sur un gris mort ; l’OKLCH tombe sur un sarcelle vif.

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

- Bleu vers orange, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)`
- Bleu vers orange, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)`
- Bleu vers orange, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)`
- Rouge vers bleu, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)`
- Rouge vers bleu, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)`
- Rouge vers bleu, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)`

Deux paires de couleurs, trois espaces chacune. Les lignes en sRGB deviennent ternes et sombres au milieu ; OKLab régularise la luminosité ; OKLCH garde la couleur.

| Espace | Comment il mélange | Idéal pour | Points de vigilance |
| --- | --- | --- | --- |
| sRGB | Ligne droite à travers les valeurs de rouge, vert, bleu | Reproduire exactement d’anciennes créations | Milieux gris et sombres entre des teintes éloignées |
| sRGB linéaire | Pareil, sans encodage gamma | Mélanges de lumière, halos | Milieux trop clairs |
| OKLab | Luminosité et couleur perceptuellement régulières | Mélanges doux et naturels ; le défaut pour les couleurs CSS modernes | Les opposés perdent encore un peu de couleur |
| OKLCH | Luminosité, chroma et teinte séparément | Mélanges vifs, arcs-en-ciel, couleurs de marque éloignées | Peut traverser des teintes inattendues |

Les quatre espaces que vous croiserez le plus souvent. Le CSS en propose d’autres, comme `lab`, `lch`, `hsl` et `display-p3`.

## 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](https://gradiently.design/fr/guide/muddy-gradients), 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](https://gradiently.design/fr/guide/rainbow-gradient). Vous pouvez aussi choisir le sens du tour avec `shorter hue` (par défaut), `longer hue`, `increasing hue` ou `decreasing hue`. Le [guide OKLCH](https://gradiently.design/fr/guide/oklch-explained) explique cet espace plus en détail.

- Rouge vers bleu, teinte la plus courte: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Rouge vers bleu, teinte la plus longue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

Les deux mêmes couleurs. Le chemin court passe par le magenta ; le chemin long traverse l’orange, le jaune et le vert.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), et [les dégradés CSS en OKLCH](https://gradiently.design/fr/guide/css-gradient-oklch) propose d’autres recettes.

```css
.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);
}
```

Le mot-clé d’interpolation fonctionne dans les dégradés linéaires, radiaux et coniques. Un dégradé conique du rouge au rouge avec `longer hue` dessine un arc-en-ciel complet et régulier.

## Quel espace colorimétrique choisir

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. **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. **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. **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.

### Vieille habitude

- Mélanger en sRGB et ajouter des arrêts pour masquer le gris
- Accepter un creux sombre au milieu
- Choisir des couleurs proches pour ne pas prendre de risque

### Mieux

- Mélanger en OKLab ou OKLCH avec moins d’arrêts
- Une luminosité régulière d’un bout à l’autre
- Oser des paires plus franches et laisser l’espace les garder nettes

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é](https://gradiently.design/fr/guide/gradient-stops). 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](https://gradiently.design/fr/developers) montre comment ChatGPT ou Claude peuvent chercher des Marks et créer des designs qui s’ouvrent dans le Studio.

## FAQ

### Qu’est-ce que l’interpolation d’un dégradé ?

Le calcul de chaque couleur entre deux arrêts d’un dégradé. L’espace colorimétrique dans lequel il se fait, comme le sRGB ou OKLab, change les couleurs qui apparaissent au milieu.

### Pourquoi mes dégradés paraissent-ils gris au milieu ?

Ils mélangent en sRGB des couleurs situées de part et d’autre du cercle, donc le chemin passe près du gris. Mélangez en OKLCH ou ajoutez une couleur de transition.

### OKLab ou OKLCH, lequel est meilleur pour les dégradés ?

OKLab donne les mélanges les plus réguliers et naturels. OKLCH garde des couleurs plus saturées et convient mieux aux paires vives et aux arcs-en-ciel.

### Comment utiliser OKLCH dans un dégradé CSS ?

Ajoutez `in oklch` avant les couleurs, par exemple `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Écrivez d’abord une version sRGB en solution de repli.

### Quel espace colorimétrique les dégradés CSS utilisent-ils par défaut ?

Le sRGB quand toutes les couleurs utilisent une syntaxe ancienne comme l’hexadécimal ou `rgb()`, et OKLab dès qu’une couleur utilise une syntaxe récente comme `oklch()`.