Construire un gradient CSS avec OKLCH

Que fait le générateur de gradient ?

Le générateur construit des dégradés CSS visuellement : vous choisissez entre dégradé linéaire, radial et conique, posez des stops de couleur à n’importe quelle position et décidez de l’espace colorimétrique d’interpolation. L’aperçu live affiche deux rectangles côte à côte — l’un dans l’espace courant, l’autre en sRGB pour comparaison. Vous voyez ainsi tout de suite si un dégradé en OKLCH passe effectivement plus saturé qu’en sRGB.

La sortie vient en cinq formats : CSS pur pour les stylesheets classiques, une utility Tailwind v4 avec modifier d’espace colorimétrique correct, un attribut style inline, un mixin SCSS et un snippet SVG inline pour les templates d’e-mail. Chaque format est généré directement dans le navigateur — sans build tool, sans aller-retour vers un serveur.

Pourquoi l’espace colorimétrique est-il si important pour les gradients ?

Lors de la transition entre deux couleurs, le navigateur doit calculer les teintes intermédiaires. En sRGB, des « zones mortes » grises ou brunâtres apparaissent souvent entre couleurs complémentaires fortes — par exemple entre bleu et jaune. La raison : sRGB n’est pas un espace colorimétrique perceptuellement uniforme. Des distances numériques égales ne paraissent pas égales pour l’œil.

OKLCH (Oklab en forme polaire, décrit dans CSS Color Module Level 4) résout le problème. Lightness (L) et Chroma (C) sont calibrés pour qu’une saturation constante reste conservée tout au long du dégradé. Le même argument vaut pour OKLab, qui décrit le même espace en cartésien. HSL paraît au premier coup d’œil perceptuellement uniforme, mais s’effondre dans les zones sombres et claires.

Comment fonctionne l’aperçu comparatif A/B ?

Les deux rectangles d’aperçu utilisent exactement les mêmes stops et le même angle — la seule différence est la valeur dans la propriété CSS linear-gradient(in <space>, …). À gauche se trouve l’espace d’interpolation choisi (par défaut : OKLCH), à droite sRGB comme référence. Si les stops ont des teintes proches, les deux rectangles sont presque identiques. Dès que vous combinez des couleurs complémentaires, le dégradé sRGB bascule en un milieu boueux tandis qu’OKLCH garde la saturation.

Espace	Force	Faiblesse
OKLCH	perceptuellement uniforme, hue-stable	un peu plus de saisie
OKLab	même espace, cartésien	pas de mode longer hue propre
sRGB	universel, navigateurs anciens	« zones grises » sur transitions complémentaires
HSL	boutons intuitifs (Hue/Sat/Light)	casse dans le très clair/sombre

Comment utiliser correctement les gradients Tailwind v4 ?

Tailwind v4 a nettement étendu l’API gradient par rapport à v3. L’utility de direction s’appelle maintenant bg-linear-to-r (au lieu de bg-gradient-to-r), et il y a bg-radial, bg-radial-[<position>] ainsi que bg-conic et bg-conic-[<from>]. Les stops de couleur sont toujours posés avec from-, via- et to-. La différence décisive : Tailwind v4 interpole par défaut en OKLab — donc déjà dans un espace perceptuellement uniforme, ce qui corrige automatiquement 90 % des problèmes de « milieu gris ».

Si vous avez besoin d’un autre espace (par ex. OKLCH pour des effets arc-en-ciel ou sRGB pour la précision pixel), vous accrochez un modifier à l’utility de direction : bg-linear-to-r/oklch, bg-conic/hsl-longer, bg-radial/srgb. Ce modifier compile alors en linear-gradient(to right in oklch, …) dans le CSS final (CSS Images-4 exige que l’angle et l’interpolation de couleur soient dans le même segment pre-stop, séparés par un espace, avec une seule virgule avant les stops). La sortie Tailwind v4 de cet outil ajoute le modifier automatiquement dès que vous choisissez un autre espace que sRGB — sinon vous n’obtenez que la direction sans clause d’espace colorimétrique.

À quoi servent les hard-stops et comment les construire ?

Un hard-stop n’est pas un dégradé, mais une transition nette à une position unique. Vous le créez en faisant atterrir deux stops à exactement la même position pourcentage — le navigateur n’a pas de place pour une couleur intermédiaire et coupe net. Cela permet de construire :

• Fonds en rayures. linear-gradient(90deg, #FF5733 0%, #FF5733 33%, #FFD166 33%, #FFD166 66%, #7C2D12 66%, #7C2D12 100%) donne trois bandes de même largeur.
• Barres de chargement. Un hard-stop entre « rempli » et « vide » se déplace animé via custom property.
• Bandes décoratives. Skeleton loaders ou en-têtes color-block pour layouts éditoriaux.

Le bouton « Transition nette » à côté de chaque stop duplique l’entrée actuelle à la même position. Vous tirez ensuite l’une des deux couleurs sur une nouvelle valeur — la transition reste nette.

Quelle différence entre shorter hue et longer hue ?

Dans les espaces colorimétriques polaires (OKLCH, HSL), toutes les valeurs de hue sont sur un cercle. Entre deux points de hue, il y a toujours deux chemins : l’arc court et l’arc long. CSS offre quatre méthodes : shorter hue (par défaut, plus court), longer hue (plus long), increasing hue (croissant mod 360) et decreasing hue (décroissant mod 360).

Pour la plupart des dégradés, shorter hue est correct — vous ne voulez pas qu’une transition bleu-vert passe soudain par le rouge. Pour les gradients coniques qui doivent rendre un spinner arc-en-ciel ou un color wheel, vous avez besoin de longer hue, sinon le chemin « court » ne couvre qu’un arc de hue étroit. Le sélecteur « Direction de hue » dans l’outil s’active automatiquement dès que vous passez en conique ou OKLCH.

Quels cas d’usage existent ?

Fonds hero. Un dégradé linéaire subtil de off-white à un accent chaud donne de la profondeur aux landing pages sans distraire. OKLCH garde la saturation tout au long du dégradé — pas de milieu gris entre l’orange de marque et le sable.

Highlights de cartes. Les gradients radiaux positionnent un halo de lumière doux derrière des cartes — idéal pour les hover states ou les accents d’attention. Avec radial-gradient(circle closest-side, …), le highlight reste centré.

Spinners de chargement. Les gradients coniques avec longer hue et une seconde position de stop alpha-fading forment des arcs de chargement — de l’accent plein au transparent. Animé via CSS rotate(), le tout tourne régulièrement.

Tokens de design system. La sortie mixin SCSS empaquette le gradient comme token réutilisable. Les composants consomment @include app-gradient;, et au changement d’espace d’interpolation, vous ne changez que le mixin — tous les consommateurs suivent silencieusement.

Templates d’e-mail. Outlook et les anciennes vues navigateur Gmail ne rendent souvent pas les gradients CSS. Le snippet SVG inline est plus universel — <linearGradient> en SVG est pris en charge par tout client mail qui autorise les images.

Questions fréquentes

Comment crée-t-on un gradient CSS ?

Ouvrez l’éditeur navigateur, choisissez le type de gradient (linéaire, radial, conique), réglez l’angle et créez les stops de couleur. Le code CSS se génère en direct. Le bouton de copie transfère le snippet dans votre stylesheet.

Qu’est-ce qu’OKLCH et pourquoi mieux que RGB ?

OKLCH est un espace colorimétrique perceptuellement uniforme. Lors de l’interpolation entre deux couleurs, aucune zone grise intermédiaire n’apparaît comme en sRGB — le dégradé reste visiblement saturé. La fenêtre d’aperçu A/B montre la différence directement.

Comment utiliser les gradients dans Tailwind v4 ?

Tailwind v4 propose bg-linear-to-r, bg-radial, bg-conic et les classes auxiliaires from-, via-, to-. L’interpolation par défaut est OKLab — avec le modifier /oklch ou /hsl, l’espace colorimétrique se définit explicitement.

Les gradients CSS fonctionnent-ils dans les e-mails ?

Beaucoup de clients e-mail (Outlook, anciens modes Gmail) ne rendent pas linear-gradient(). L’outil livre donc aussi un snippet SVG inline en fallback — <linearGradient> SVG tourne fiablement dans presque tous les clients mail.

Qu’est-ce qu’un hard-stop dans un gradient CSS ?

Deux stops de couleur à la même position créent une transition nette sans dégradé. On en construit des rayures, des barres de chargement ou des fonds color-block. Le bouton « Transition nette » duplique le stop sélectionné.

Que signifie longer hue dans un gradient conique ?

Les espaces colorimétriques polaires (OKLCH, HSL) offrent deux chemins autour du cercle chromatique : shorter hue (plus court) et longer hue (plus long). Pour les spinners arc-en-ciel et les color-wheels, on prend longer hue — sinon le navigateur fait sauter l’arc.

L’outil enregistre-t-il mes palettes de couleur ?

Non. Toutes les saisies restent dans l’onglet du navigateur, rien n’est stocké ni téléversé. Au rechargement, l’outil est vide. Pour conserver des palettes, copiez la sortie dans votre propre stylesheet ou un design token.

Quels navigateurs prennent en charge OKLCH ?

OKLCH est CSS Color Module Level 4 et disponible depuis Chrome 111, Firefox 113 et Safari 16.4 (tous en 2023). Cela couvre environ 95 % des navigateurs mondiaux. Les moteurs plus anciens retombent silencieusement — le stop hex de fallback reste visible.

Quels outils couleur sont liés ?

D’autres outils pour le CSS-authoring et la gestion des couleurs :

• Convertisseur Hex vers RGB — convertir des codes hex en RGB, HSL et OKLCH.
• Vérificateur de contraste — vérifier le contraste WCAG AAA entre deux couleurs.
• Optimiseur SVG — réduire la sortie SVG sans perte de qualité.
• Formateur CSS — formater proprement du CSS brut ou minifié.