L’essentiel en bref
- Les dégradés CSS se mélangent par défaut en sRGB quand toutes leurs couleurs sont écrites en hex, rgb() ou hsl(), ce qui rend souvent le milieu du mélange terne ou gris.
- Ajouter in oklch ou in oklab à un dégradé dit au navigateur de mélanger dans un espace colorimétrique perceptuel, ce qui garde une luminosité régulière et des couleurs nettes.
- in oklab prend le chemin le plus direct entre deux couleurs, tandis que in oklch fait le tour du cercle des teintes et garde une saturation élevée.
- Les mots-clés de teinte comme shorter hue, longer hue, increasing hue et decreasing hue choisissent dans quel sens un dégradé oklch tourne autour du cercle chromatique.
- Les navigateurs ignorent les déclarations qu’ils ne savent pas lire : écrire d’abord un dégradé sRGB puis la version oklch après lui est un repli sûr.
Sur cette page
L’interpolation OKLCH d’un dégradé CSS consiste à demander au navigateur de calculer les couleurs intermédiaires d’un dégradé dans l’espace colorimétrique OKLCH plutôt qu’en sRGB. Vous ajoutez deux mots après la direction : linear-gradient(90deg in oklch, #2563eb, #facc15). Le résultat est un mélange dont la luminosité change régulièrement et dont le milieu reste vif, au lieu de s’affaisser dans la bande grise et boueuse dont les mélanges sRGB sont réputés.
Pourquoi les dégradés sRGB virent au gris
Le sRGB a été conçu pour coder efficacement les couleurs d’écran, pas pour correspondre à la vision humaine. Mélanger deux couleurs sRGB revient à faire la moyenne de leurs nombres de rouge, de vert et de bleu, et à mi-chemin entre un bleu et un jaune se trouvent des nombres moyens qui donnent du gris. Sa luminosité change aussi de façon inégale : certains mélanges se creusent ou se gonflent au milieu. Le versant design de ce problème est dans les dégradés boueux.
Oklab et sa forme cylindrique, OKLCH, ont été conçus pour que des pas égaux dans leurs nombres paraissent à peu près égaux à l’œil. Mélanger dans ces espaces garde la luminosité perçue régulière : c’est pourquoi les dégradés ainsi faits paraissent plus fluides et plus lumineux aux mêmes extrémités.
La syntaxe : in oklch et in oklab
La méthode d’interpolation va dans le premier argument, avant ou après la direction. Elle marche dans linear-gradient(), radial-gradient(), conic-gradient() et leurs formes répétées, ainsi que dans color-mix(). Vos arrêts de couleur peuvent rester en hex ; seul le calcul change.
/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);
/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);| Espace colorimétrique | Comment il mélange | À utiliser pour |
|---|---|---|
srgb | Moyenne du rouge, du vert et du bleu | Reproduire exactement d’anciens designs |
srgb-linear | Moyenne de la lumière physique | Effets de mélange de lumière ; les milieux paraissent clairs |
oklab | Ligne droite dans un espace perceptuel | La plupart des mélanges, et tout fondu vers le blanc, le noir ou le gris |
oklch | Autour du cercle des teintes à chroma constante | Mélanges vifs multi-teintes, arcs-en-ciel, couchers de soleil |
hsl | Autour du cercle des teintes, non perceptuel | Cercles chromatiques ; luminosité inégale |
oklab ou oklch : lequel choisir
Les deux sont perceptuels ; ils diffèrent par le chemin qu’ils suivent. Oklab trace une ligne droite entre les deux couleurs : le milieu peut perdre de la saturation quand les extrémités sont éloignées sur le cercle chromatique, mais il ne passe jamais par une teinte que vous n’avez pas demandée. OKLCH garde la chroma, l’intensité de la couleur, et fait le tour du cercle des teintes : le milieu reste saturé mais traverse les teintes intermédiaires. Du bleu au jaune en oklch passe par le vert. Parfois c’est le but ; parfois c’est une surprise.
Choisir le sens de la teinte
Entre deux teintes, il y a deux façons de faire le tour du cercle chromatique. Par défaut, oklch prend le shorter hue. Vous pouvez demander longer hue, ou forcer un sens avec increasing hue ou decreasing hue. Le mot-clé se place juste après l’espace colorimétrique.
longer hue est la façon la plus propre de dessiner un spectre : deux arrêts au lieu de sept. C’est aussi ainsi que l’on fait un dégradé arc-en-ciel dont les couleurs paraissent toutes également lumineuses, ce qu’un arc-en-ciel sRGB n’atteint jamais tout à fait.
Écrire les couleurs en oklch()
Vous pouvez aussi écrire les arrêts eux-mêmes en OKLCH : oklch(L C H), où L est la luminosité de 0 % à 100 %, C la chroma de 0 à environ 0,37, et H l’angle de teinte. Garder le même L sur tous les arrêts donne un dégradé de luminosité égale, difficile à obtenir à l’œil en hex. oklch.com est un bon sélecteur pour trouver les valeurs.
.band {
/* same lightness and chroma, only the hue changes */
background: linear-gradient(
90deg in oklch,
oklch(68% 0.17 300),
oklch(68% 0.17 20),
oklch(68% 0.17 70)
);
}linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))Prise en charge et replis
Les méthodes d’interpolation et les couleurs oklch() sont prises en charge dans les versions actuelles de Chrome, Edge, Safari et Firefox. Les navigateurs sautent toute déclaration qu’ils ne savent pas lire : le repli consiste donc à écrire d’abord la version simple. Là où la ligne améliorée est ignorée, le dégradé sRGB reste.
.hero {
background-color: #7c3aed;
background-image: linear-gradient(135deg, #7c3aed, #f97316);
background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}Pour aller plus loin, les mélanges perceptuels s’associent bien au grain pour éviter le banding des dégradés, et aux techniques d’arrêts et de points d’inflexion du guide du dégradé linéaire CSS.
Les questions qu’on nous pose
Que fait in oklch dans un dégradé CSS ?
Cela fait calculer au navigateur les couleurs intermédiaires dans l’espace colorimétrique OKLCH, ce qui garde une luminosité régulière et des couleurs saturées au lieu de mélanger en passant par le gris.
Faut-il utiliser oklab ou oklch pour les dégradés ?
Utilisez oklch pour des mélanges vifs entre teintes différentes, et oklab pour des fondus vers le blanc, le noir ou le gris, ou quand vous ne voulez pas que le mélange passe par d’autres teintes.
Pourquoi mon dégradé oklch passe-t-il par le vert ?
OKLCH fait le tour du cercle des teintes, et entre le bleu et le jaune le chemin le plus court passe par le vert. Utilisez in oklab pour un chemin direct, ou ajoutez un arrêt intermédiaire.
Faut-il écrire les couleurs en oklch() pour utiliser l’interpolation oklch ?
Non. Les couleurs hex marchent très bien avec in oklch ; seul le mélange change. Écrire les arrêts en oklch() est utile quand vous voulez contrôler précisément la luminosité.
Que se passe-t-il dans les navigateurs qui ne prennent pas en charge in oklch ?
Ils ignorent toute la déclaration. Mettez un dégradé sRGB normal sur la ligne précédente et ces navigateurs gardent celui-là.
É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
