La couleur OKLCH dans le CSS moderne : pourquoi elle gagne et comment la livrer

OKLCH est le premier espace colorimétrique livré en CSS que les designers peuvent vraiment raisonner. Les équipes qui construisent encore leurs palettes en hex perdent discrètement chaque débat sur le contraste et le dark mode, sans même savoir qu'elles le mènent.

L'hex n'a jamais été un espace colorimétrique, c'était une sérialisation

L'hex est un raccourci pour le sRGB. #4A90E2 n'est pas une spécification de couleur, c'est un triplet de valeurs de canaux rouge, vert et bleu compressé en six caractères. Le sRGB a été conçu pour les moniteurs CRT du début des années 1990, pas pour la perception visuelle humaine.

Conséquence : deux valeurs hex peuvent occuper la même position numérique de « luminosité » dans votre palette et paraître totalement différentes à l'œil. Le blue-500 de la plupart des design systems paraît plus sombre que le yellow-500, même quand les deux partagent la même position relative dans la rampe. Ce n'est pas un problème de goût. C'est un problème de maths inscrit dans le système de coordonnées.

« L'hex n'a jamais été un espace colorimétrique, c'était une sérialisation, et nous nous disputons sur la luminosité depuis. »

HSL a prétendu régler le problème, sans y parvenir

HSL est arrivé et a donné un vocabulaire aux designers : teinte, saturation, luminosité. Ça ressemblait à un système. Ce n'en était pas un. Le canal de luminosité en HSL correspond toujours à des valeurs sRGB sous le capot, ce qui signifie que HSL hérite des mêmes problèmes perceptuels que l'hex.

hsl(220, 70%, 50%) et hsl(45, 70%, 50%) ont nominalement la même luminosité. Ouvrez-les côte à côte. Le jaune paraît nettement plus clair. HSL vous a donné de meilleurs mots pour les mêmes maths cassées.

OKLCH est perceptuellement uniforme

OKLCH repose sur l'espace colorimétrique OKLab, développé par Björn Ottosson en 2020 précisément pour corriger la non-uniformité perceptuelle des espaces précédents. Le L d'OKLCH signifie luminosité perçue, calibrée sur la façon dont le système visuel humain réagit réellement à la lumière.

Des valeurs L égales en OKLCH signifient une luminosité perçue égale. Pas approximativement égale. Pas « généralement égale si la chroma est similaire ». Égale. C'est la propriété qu'aucun espace colorimétrique CSS antérieur ne pouvait offrir, et elle change tout dans la façon de raisonner la génération de palettes.

Les trois raisons pour lesquelles OKLCH gagne

Luminosité perceptuellement uniforme, interpolation de teinte prévisible et prise en charge des gamuts étendus. Chacune corrige un bug précis de votre palette actuelle, et ensemble elles composent un workflow couleur qui passe à l'échelle entre thèmes, composants et types d'écrans.

Raison un : la dérive de luminosité est morte

Dans les systèmes hex et HSL, la dérive de luminosité est la taxe invisible que vous payez sur chaque palette. Vous réglez blue-50 et amber-50 à ce qui semble juste à l'œil, ils divergent selon les écrans, ils se battent en dark mode, et les calculs de contraste ne tiennent jamais tout à fait.

En OKLCH, blue-50 et amber-50 ont le même nombre de luminosité, et ce nombre représente la même luminosité perçue. Tailwind v4 a migré toute sa palette vers OKLCH précisément pour cette raison. Si vous utilisez les échelles de couleurs de Radix UI, vous profitez déjà de l'uniformité perceptuelle, même si vous n'avez jamais vu le mot OKLCH dans la documentation.

Raison deux : l'interpolation de teinte devient sensée

Les dégradés CSS en interpolation sRGB traversent le cube de couleurs RGB, pas l'espace perceptuel. Un dégradé bleu vers jaune en sRGB passe par un milieu gris boueux parce que la diagonale RGB croise près de l'axe achromatique. Ce n'est pas artistique. C'est un accident de géométrie.

L'interpolation de dégradé OKLCH fait parcourir à l'angle de teinte l'anneau perceptuel. Du bleu au jaune en OKLCH, on passe par le cyan et le vert, ce que votre œil attend. Le gris boueux disparaît. Cela compte pour les dégradés d'interface, les transitions de couleur animées et tout outil de génération de palette qui produit des étapes intermédiaires.

Raison trois : P3 et Rec2020 deviennent accessibles

L'hex ne peut pas décrire les couleurs hors sRGB. Chaque iPhone depuis 2016, chaque ordinateur portable récent à dalle wide-gamut et la plupart des nouveaux moniteurs grand public peuvent afficher des couleurs qui existent dans le gamut P3 mais n'ont aucune adresse hex. Vous laissez de côté des couleurs saturées et vives parce que votre système de coordonnées ne savait pas les nommer.

OKLCH décrit nativement les couleurs P3 et Rec2020. oklch(0.60 0.28 260) est un bleu vif qui existe en P3 mais hors du gamut sRGB. Les navigateurs modernes savent quoi en faire, et les recommandations d'Apple sur la couleur Display P3 vont dans ce sens depuis des années. Le design system qui passe à OKLCH maintenant est aussi celui qui sera prêt quand P3 deviendra l'attente par défaut.

La migration en quatre étapes de l'hex vers OKLCH

Auditer, convertir, régénérer, réauditer. La migration est mécanique pour les tokens primitifs et demande du jugement pour les tokens sémantiques. Une migration complète d'un design system de taille moyenne prend des jours, pas des semaines. Ancrer les nouveaux tokens dans une architecture de variables Figma propre avant de commencer fait gagner le plus de temps.

Étape un : auditer la palette existante

Exportez chaque token de couleur de votre système. Convertissez chaque valeur hex en OKLCH avec un outil comme oklch.com ou le plugin PostCSS OKLCH. Triez par valeur L et regardez la colonne de luminosité à travers les teintes.

Les bugs se révèlent immédiatement. Blue-300 sera à L=0.72 tandis que yellow-300 sera à L=0.87. Des tokens censés avoir un poids visuel équivalent en sont très loin. Cet audit est la preuve qui rend la décision de migrer facile à justifier face à quiconque résiste.

Étape deux : convertir les primitifs en OKLCH

Prenez l'échelle primitive, la rampe numérotée brute plutôt que les tokens sémantiques, et convertissez-la en OKLCH. Arrondissez les valeurs de luminosité à des paliers cohérents sur les onze stops : 0.97, 0.93, 0.86, 0.75, 0.65, 0.54, 0.45, 0.37, 0.27, 0.19, 0.13.

N'essayez pas de préserver exactement les valeurs hex d'origine. Le but est de corriger l'incohérence. Un blue-500 converti et un red-500 converti ne seront pas identiques au pixel près aux anciennes valeurs, et c'est tout l'objectif. Le système s'améliore, il ne fait pas que changer.

Étape trois : régénérer les rampes

Avec des paliers de luminosité propres et cohérents, régénérer les rampes sur toutes les teintes devient une opération de tableau. Fixez la colonne L, choisissez la chroma de chaque teinte (les bleus portent généralement plus de chroma que les bruns et les jaunes avant l'écrêtage), ajustez la colonne H, et générez.

Résultat : blue-500 et red-500 ont pour la première fois le même poids visuel dans votre système. Les décisions de palette de couleurs de marque qui relevaient auparavant du jugement arbitraire deviennent des choix argumentés, avec une coordonnée à pointer.

Étape quatre : réauditer l'accessibilité

Nouvelle palette, nouvelle passe de contraste. OKLCH facilite la prédiction du contraste parce que la luminosité veut enfin dire ce qu'elle dit. Associer deux tokens aux valeurs L connues donne une bonne estimation de leur ratio de contraste avant même d'ouvrir le vérificateur.

Lancez des contrôles de contraste WCAG et APCA sur toutes les paires de tokens sémantiques. Signalez les paires qui ne respectent plus les exigences et ajustez la chroma ou la luminosité du token fautif. Une vraie passe de contraste de couleur accessible sur une palette OKLCH réserve en général moins de surprises que la même passe sur une palette hex, parce que les paliers de luminosité étaient faux avant et ne le sont plus.

---

Vous voulez un système de couleurs qui tient entre modes, teintes et écrans modernes sans dérive de luminosité ? Brainy conçoit des systèmes de palettes natifs OKLCH livrés sous forme de variables Figma, de propriétés CSS personnalisées et de tokens Tailwind, avec la passe de contraste déjà faite.

---

Les quatre pièges d'OKLCH

Écrêtage hors gamut, écrêtage de chroma, gestion de l'alpha et lacunes d'outillage. Chacun piège les équipes qui découvrent OKLCH, et chacun a un correctif précis qui s'applique en quelques minutes une fois qu'on sait quoi chercher.

Le problème du gamut mord le plus fort. Quand vous écrivez oklch(0.60 0.32 260), cette valeur de chroma est hors sRGB. Les navigateurs de bureau gèrent cela en écrêtant vers la couleur sRGB la plus proche, ce qui peut décaler la teinte apparente. Le correctif consiste soit à rester dans une chroma sûre en sRGB pour les tokens de base, soit à réserver les valeurs wide-gamut derrière une media query et à garder une déclaration de repli au-dessus.

La rampe de palette OKLCH qui fonctionne

Une rampe pratique de 11 paliers à luminosité constante, avec le bleu à la teinte 260 comme référence. Les paliers de luminosité sont identiques pour chaque teinte de votre système. Seules la chroma et la teinte changent selon la famille de couleur.

:root { --blue-50: oklch(0.97 0.02 260); --blue-100: oklch(0.93 0.05 260); --blue-200: oklch(0.86 0.09 260); --blue-300: oklch(0.75 0.14 260); --blue-400: oklch(0.65 0.18 260); --blue-500: oklch(0.54 0.22 260); --blue-600: oklch(0.45 0.20 260); --blue-700: oklch(0.37 0.17 260); --blue-800: oklch(0.27 0.13 260); --blue-900: oklch(0.19 0.09 260); --blue-950: oklch(0.13 0.06 260); }

Pour générer du rouge (teinte 25), de l'ambre (teinte 75) ou du vert (teinte 145), gardez la colonne L identique sur les onze stops. Ajustez C selon la capacité de chroma naturelle de la teinte : les jaunes et les verts portent moins de chroma que les bleus avant de sortir du sRGB. Ajustez H sur votre teinte cible. C'est tout le système de palette.

Le système de couleurs du dark mode construit sur cette rampe utilise des tokens sémantiques qui basculent entre primitifs par palier L et par teinte, pas en écrasant manuellement les valeurs hex une par une.

Support navigateurs et fenêtre de migration sûre

OKLCH est pris en charge dans tous les grands navigateurs sortis depuis 2023. Chrome 111, Safari 15.4, Firefox 113 et Edge 111 livrent tous un support complet d'OKLCH. La couverture mondiale dépasse 93 % à la mi-2025. La fenêtre de migration est ouverte.

Le repli pour tout navigateur qui ne gère pas OKLCH tient en une ligne. Déclarez d'abord le repli hex, puis la valeur OKLCH. Les navigateurs qui ne comprennent pas OKLCH l'ignorent et utilisent l'hex. Ceux qui le comprennent utilisent la meilleure valeur.

color: #4a7de8; /* sRGB fallback */ color: oklch(0.54 0.22 260); /* OKLCH for modern browsers */

Tailwind v4 génère sa palette nativement en OKLCH. Linear, les design tokens Sail de Stripe et les recommandations couleur d'Apple pour les développeurs ont tous évolué vers des systèmes perceptuellement uniformes. L'industrie a tranché. La question est de savoir quand votre équipe suivra.

FAQ

OKLCH est-il difficile à apprendre ?

Le système de coordonnées diffère de l'hex ou de HSL, mais il n'est pas complexe. L est la luminosité de 0 à 1. C est la chroma, en gros le degré de saturation. H est la teinte en degrés. Une fois que vous avez intégré que L signifie luminosité perçue et C intensité colorée, le système devient intuitif plus vite que HSL ne l'a jamais été.

Puis-je utiliser OKLCH dans Figma aujourd'hui ?

Figma n'expose pas OKLCH nativement dans son sélecteur de couleurs en 2025. Le workflow pratique consiste à définir les tokens en OKLCH dans un fichier de tokens via Tokens Studio ou un fichier de variables CSS synchronisé avec les variables Figma, puis à utiliser l'export de code de Figma pour vérifier les valeurs. Le moteur de rendu de Figma gère la conversion en interne.

OKLCH casse-t-il mes valeurs hex existantes ?

Non. Vous pouvez introduire OKLCH progressivement, token par token. Vos valeurs hex existantes continuent de fonctionner exactement comme avant. La migration est additive, pas un remplacement.

Quelle est la différence entre LCH et OKLCH ?

LCH repose sur l'espace colorimétrique CIELAB, perceptuellement uniforme mais avec des problèmes de linéarité de teinte, notamment dans la plage bleu-violet. OKLCH repose sur OKLab, qui corrige ces décalages de teinte. Pour le travail de design concret, OKLCH est le meilleur choix car son interpolation de teinte réserve moins de surprises.

Comment convertir de l'hex en OKLCH ?

Utilisez oklch.com, le plugin PostCSS oklch ou le playground de la spec CSS Color 4. Collez votre valeur hex, lisez les coordonnées OKLCH, arrondissez L et C à deux décimales, et H au degré entier le plus proche. Voilà votre valeur de token exploitable.

OKLCH affecte-t-il les exigences d'accessibilité ?

Les exigences de contraste WCAG sont définies sur la luminance relative sRGB, pas sur la luminosité OKLCH. APCA est plus proche des modèles perceptuels et correspond plus naturellement aux valeurs L d'OKLCH. En pratique, OKLCH rend la prédiction du contraste plus intuitive parce que L suit la luminosité perçue, mais vous devez toujours passer les paires de tokens sémantiques dans un vérificateur de contraste. Le processus est le même, simplement plus facile à anticiper.

Le basculement qu'OKLCH débloque vraiment

OKLCH n'est pas une mode. C'est la première fois que CSS livre un espace colorimétrique conçu autour de la façon dont l'œil humain perçoit la couleur, et l'outillage a assez rattrapé son retard pour que la migration soit praticable dès aujourd'hui pour toute équipe prête à y consacrer quelques jours ciblés.

Les équipes qui bougent maintenant obtiennent trois choses d'un coup : une palette qui tient en dark mode sans surcharges manuelles, un comportement de contraste qui colle au système de coordonnées, et une base qui s'étend vers P3 sans réécriture future. Celles qui attendent auront encore le même débat sur la raison pour laquelle blue-300 paraît plus lourd que orange-300, et la réponse restera la même. Le système de coordonnées n'a jamais été conçu pour ce travail.

Si vous voulez construire l'architecture complète de tokens par-dessus cette palette, l'article sur l'architecture de variables Figma couvre la couche sémantique. Pour l'application au dark mode, les systèmes de couleurs du dark mode prennent le relais là où celui-ci s'arrête.

Vous voulez qu'on le construise pour vous ? Engagez Brainy.