Générateur de dégradé CSS

Qu’est-ce qu’un générateur de dégradé CSS ?

Un générateur de dégradé CSS transforme deux couleurs en une déclaration `background-image` à coller dans votre feuille de style. Vous choisissez les couleurs, la forme — linéaire, radiale ou conique — et la direction, et il écrit la règle. Aucune image n’est exportée : un dégradé CSS est dessiné par le navigateur à la taille qu’a l’élément, il reste donc net et ne coûte aucune bande passante.

Ce que presque tous les générateurs omettent, c’est l’espace d’interpolation. CSS Color 4 permet à un dégradé d’indiquer par quel espace colorimétrique le navigateur doit passer — `linear-gradient(90deg in oklch, ...)` — et ce choix modifie le milieu du dégradé bien plus que l’angle ne le fera jamais. C’est disponible dans tous les navigateurs principaux depuis mai 2023.

Ce générateur rend cette décision visible au lieu de la prendre à votre place : vos deux couleurs s’affichent simultanément dans les trois espaces, chacun avec la mesure de ce qu’il coûte.

Comment utiliser le générateur de dégradé

1. Choisissez vos deux couleurs. Servez-vous du sélecteur, ou saisissez directement une valeur hexadécimale. L’aperçu et le CSS se mettent à jour au fil de la frappe, sans bouton à cliquer.
2. Choisissez la forme et l’espace d’interpolation. Linéaire, radial ou conique, avec un réglage d’angle pour les deux premiers. Puis sRGB, Oklab ou Oklch : le panneau comparatif plus bas affiche de toute façon les trois pour vos couleurs, afin que vous voyiez entre quoi vous arbitrez.
3. Copiez la déclaration. Vous obtenez une règle `background-image:` complète, l’espace d’interpolation écrit explicitement, y compris pour sRGB où il est la valeur par défaut : une règle destinée à être collée puis relue plus tard devrait dire ce qu’elle fait.

« Utilisez oklab pour vos dégradés » n’est vrai qu’à moitié

Le conseil courant veut que les dégradés en sRGB deviennent ternes au milieu et qu’Oklab corrige cela. La première moitié est exacte. La seconde est à l’envers, et cela se mesure facilement.

Prenez du bleu et du jaune. Interpolé en sRGB, le point milieu vaut #7F7F7F : non pas terne, littéralement gris, avec un chroma mesuré nul. Sur 15 000 paires aléatoires saturées et de teintes presque opposées, sRGB perd en médiane 75,8 % de la couleur des extrémités au milieu, et 13,73 % de ces milieux ressortent quasiment gris. Oklab ne corrige pas cela : il l’aggrave, avec une perte médiane de 83,3 % et 22,99 % de milieux gris, soit presque le double.

La raison est structurelle et non anecdotique. sRGB et Oklab sont deux espaces rectangulaires : interpoler y revient à tracer une droite entre deux points, et la droite entre deux teintes opposées passe par l’axe neutre à mi-chemin. Oklch est polaire : il interpole un angle de teinte, il n’a donc jamais à traverser le milieu. Mesuré sur les mêmes 15 000 paires, il perd 14,6 %, et les milieux gris surviennent dans 0,00 % des cas.

À quoi sert alors réellement Oklab ? À une rampe régulière de luminosité perçue, où il l’emporte nettement. Sur 15 000 paires aléatoires, le pire écart à une rampe de luminosité rectiligne est en médiane de 8,60 % en sRGB contre 0,70 % en Oklab — plus de dix fois mieux — et au 90e centile de 44,68 % contre 2,53 %. C’est le banding qu’on voit dans un long dégradé sRGB, et Oklab est la bonne réponse à ce problème-là.

Deux reproches, deux correctifs différents, et le conseil qui règle l’un aggrave l’autre. Oklch se situe entre les deux sur la luminosité (médiane de 1,25 %) tout en conservant la couleur, d’où le choix par défaut de cette page ; mais le panneau affiche les trois, car la bonne réponse dépend de vos deux couleurs et non d’une règle générale.

Limites assumées

L’aperçu est du vrai CSS. C’est le navigateur qui interpole : ce que vous voyez est donc ce que verront vos visiteurs, et cette page n’a jamais à prétendre que son propre rendu coïncide avec celui du navigateur. La bande comparative fait exception : ces trois barres sont composées de 21 arrêts calculés, afin que les espaces restent comparables même sur un navigateur antérieur à cette syntaxe — ce sont donc une approximation fidèle de la version lisse, et non la version lisse.

Ce générateur prend deux arrêts de couleur, pas une liste quelconque. C’est délibéré : la question de l’interpolation porte sur ce qui se passe entre une paire, et les mesures ci-dessus ne sont définies que pour une paire. S’il vous faut un dégradé à plusieurs arrêts, la syntaxe CSS en accepte davantage sous exactement la même forme, et le mot-clé d’espace fonctionne pareil.

Les chiffres de cette page proviennent de paires de couleurs aléatoires, ce qui est la façon équitable de comparer trois espaces mais n’est pas la façon dont on choisit des couleurs. Votre paire peut se comporter tout autrement, et c’est précisément pourquoi le panneau mesure la vôtre au lieu de vous réciter une moyenne. Deux teintes voisines diffèrent à peine d’un espace à l’autre ; deux teintes opposées diffèrent énormément.

Le chroma et la luminosité sont ici mesurés en Oklab, un choix qui par construction avantage le résultat de luminosité d’Oklab, puisqu’il est noté sur sa propre échelle. C’est aussi l’échelle qu’emploie désormais CSS lui-même, et le résultat de chroma joue contre Oklab plutôt qu’en sa faveur : ce biais n’explique donc pas la conclusion.

Les conversions colorimétriques sont vérifiées face à une implémentation indépendante de la même spécification sur 20 000 couleurs, avec un accord meilleur qu’une partie par million, aux côtés de 26 assertions couvrant les allers-retours, la règle de l’arc de teinte le plus court et les chiffres publiés ci-dessus.

Pourquoi est-ce gratuit ?

Tout ici est de l’arithmétique et un attribut `style`, exécutés dans votre navigateur au fil de la frappe. Aucune couleur n’est envoyée, il n’y a pas de compte et aucune limite d’export : le résultat tient en trois lignes de CSS que vous auriez pu écrire vous-même.

Il n’y a pas non plus de filigrane — promesse modeste pour un dégradé — ni de formule payante retenant le panneau comparatif : ce panneau est la raison d’être de la page.