Qu’est-ce que la couleur OKLCH ?

 (jakub.kr)
11 points par GN⁺ 2025-08-26 | 1 commentaires | Partager sur WhatsApp
  • OKLCH est un modèle de couleur moderne adapté à la perception visuelle humaine, avec la propriété que les variations de luminosité, de saturation et de teinte entre les couleurs sont perçues de manière uniforme ; c’est donc un modèle colorimétrique perceptuellement uniforme
  • Sa structure repose sur Lightness (luminosité), Chroma (saturation), Hue (teinte), et permet de composer des palettes de couleurs cohérentes plus facilement qu’avec les modèles existants
  • En conservant la même luminosité et la même saturation et en ne changeant que la Hue, il est possible de créer une palette uniforme, ce qui est avantageux pour le design UI
  • Par rapport à sRGB/HSL, il offre des variations de contraste plus prévisibles et des dégradés plus homogènes, même si, dans certains cas, des couleurs inattendues peuvent être générées
  • Avec des écrans récents comme Display-P3, il permet une représentation plus large des couleurs, il est pris en charge par les navigateurs récents via CSS Color 4, et propose aussi une gestion de fallback sRGB, ce qui en fait progressivement un standard du web

Présentation du modèle de couleur OKLCH

  • OKLCH est un modèle de couleur récent développé dans l’objectif d’une uniformité perceptuelle (perceptually uniform)
  • Ce modèle fonctionne d’une manière plus proche de la façon dont les humains perçoivent réellement les couleurs, ce qui rend la gestion des couleurs bien plus pratique dans le design numérique et le développement frontend

Concepts de base des modèles de couleur

  • Un modèle de couleur est un système qui définit et représente mathématiquement les couleurs
  • Exemples de modèles couramment utilisés : RGB, HSL, LCH, OKLCH, LAB, XYZ
  • Chaque modèle détermine la facilité de représentation et de manipulation des couleurs

Exemples de notation des couleurs

  • oklch(0.55 0.18 260)
  • hsl(220 100% 50%)
  • rgb(0, 128, 255)
  • lch(60% 60 260)
  • lab(50 -10 -50)
  • color(xyz 0.18 0.19 0.6)
  • #1E90FF

Gamut (étendue de l’espace colorimétrique)

  • Le gamut désigne l’ensemble des couleurs qu’un modèle peut représenter
  • Gamuts représentatifs : sRGB (base du web), Display-P3 (pris en charge par les appareils récents)
  • Un espace colorimétrique possède aussi diverses propriétés au-delà du gamut, comme le white point ou la transfer function

Structure d’OKLCH

OKLCH et LCH sont tous deux composés de trois valeurs : Lightness, Chroma, Hue
OKLCH est basé sur l’espace colorimétrique OKLab

  • Lightness (clarté/luminosité) : exprimée de 0 à 1 ou de 0 % à 100 %, elle garantit des variations de luminosité uniformes
  • Chroma (saturation) : intensité de la couleur, similaire à la Saturation de HSL
  • Hue (teinte) : représentation de la couleur sur un angle de 0 à 360 degrés

Avantages et usages d’OKLCH

  • Luminosité cohérente

    • Dans OKLCH, si l’on définit des couleurs avec la même luminosité et la même saturation mais une hue différente, toutes les couleurs semblent avoir une luminosité similaire
    • Avec les modèles traditionnels comme sRGB ou HSL, la luminosité ou la saturation peuvent paraître incohérentes selon la couleur
    • OKLCH facilite donc la création de palettes de couleurs perceptuellement uniformes

  • Paliers de luminosité prévisibles

    • Dans OKLCH, en faisant varier la luminosité, on peut créer plusieurs niveaux de couleur sans modifier la hue (teinte) ni la chroma (saturation)
    • Dans HSL et d’autres modèles, un phénomène de dérive peut faire varier la teinte lorsque la luminosité change
    • Avec OKLCH, il est possible de construire des paliers de luminosité cohérents en n’ajustant que la luminosité

  • Gestion des dégradés (Gradients)

    • En sRGB, l’interpolation se fait entre les valeurs rouge, vert et bleu, ce qui peut rendre les points intermédiaires ternes ou provoquer de fortes variations de luminosité
    • OKLCH interpole le long des axes Lightness, Chroma et Hue, ce qui permet des dégradés plus naturels
    • Toutefois, comme la Hue suit une structure circulaire, des variations de couleur inattendues peuvent apparaître
    • Pour éviter cela, on peut interpoler linéairement dans OKLab afin d’obtenir un résultat plus prévisible

Prise en charge des espaces colorimétriques

  • sRGB ne couvre pas une partie du large espace colorimétrique affiché par les écrans récents
  • En utilisant OKLCH, il devient possible d’obtenir des couleurs plus éclatantes sur les appareils prenant en charge de larges gamuts comme Display-P3
  • Sur les appareils ne prenant en charge que sRGB, les couleurs sont mappées vers une teinte aussi proche que possible

Valeur maximale de Chroma (saturation)

  • OKLCH permet aussi de définir mathématiquement des couleurs situées hors de la plage réellement affichable par un écran
  • Par exemple, une valeur de chroma trop élevée comme oklch(0.7 0.4 40) ne peut pas être réellement affichée et sera donc écrêtée vers une couleur proche
  • Il est important de comprendre la notion de chroma maximale et de choisir des valeurs adaptées selon la teinte, la luminosité et l’espace colorimétrique ciblé (sRGB, Display-P3)

Compatibilité navigateur et fallback

  • Les couleurs OKLCH ont été introduites dans CSS Color Module Level 4 et sont prises en charge par la plupart des navigateurs récents
  • Les anciens navigateurs peuvent ne pas les prendre en charge ; il est alors possible de définir des valeurs de fallback via la directive CSS @supports 
    @layer base {  
  :root {  
    /* sRGB hex */  
    --color-gray-100: #fcfcfc;  
    --color-gray-200: #fafafa;  
    --color-gray-300: #f4f4f4;  

    @supports (color: oklch(0 0 0)) {  
      /* OKLCH */  
      --color-gray-100: oklch(0.991 0 0);  
      --color-gray-200: oklch(0.982 0 0);  
      --color-gray-300: oklch(0.955 0 0);  
    }  
  }  
}
  • Dans les navigateurs compatibles, OKLCH est appliqué ; dans les navigateurs non compatibles, ce sont les couleurs sRGB (hex) qui sont utilisées

Outil oklch.fyi

  • oklch.fyi est un outil web proposant des fonctions liées à OKLCH, comme la génération de palettes de couleurs OKLCH ou la conversion en variables CSS
  • Il facilite l’utilisation des couleurs OKLCH dans les design systems, le développement de thèmes, etc.

À lire aussi

1 commentaires

 
GN⁺ 2025-08-26
Avis Hacker News

  • J’ai des doutes sur la fonctionnalité « Better Gradients ». OKLCH est un espace polaire, et dans cet espace, la teinte joue le rôle d’un angle. Lorsqu’on interpole entre deux couleurs à des positions différentes, on se déplace donc le long du bord du cercle. Par exemple, avec linear-gradient(in oklch, #f0f, #0f0), on sort visiblement de la gamme pendant la transition du vert au violet. Si on fait le tour du cercle dans l’autre sens, comme avec linear-gradient(in oklch longer hue, #f0f, #0f0), on passe par du turquoise ou de l’aqua. Ces trajectoires montrent à quel point il est vraiment peu pratique qu’un espace colorimétrique perceptuel doive gérer les limites de sRGB ou de la zone des couleurs perceptibles par l’être humain, c’est-à-dire le gamut. En pratique, il suffit d’un très léger écart de valeur pour qu’une couleur sorte de la plage. Il existe plusieurs algorithmes pour corriger cela, mais on sacrifie alors l’uniformité perceptuelle. Par exemple, le rouge dans le dégradé devient anormalement sombre. Si l’on veut de meilleurs dégradés et que l’uniformité perceptuelle est importante, c’est en réalité l’interpolation Oklab qui devrait être utilisée par défaut. Oklab interpole en ligne droite à travers le cercle et peut même passer par du gris si nécessaire (linear-gradient(in oklab, #f0f, #0f0)). Cette méthode évite aussi l’assombrissement qu’on voit souvent avec l’interpolation sRGB et produit un dégradé naturel du magenta au lime. À noter que Tailwind v4 utilisait Oklch au lieu de sRGB dans la bêta, puis a choisi Oklab comme valeur par défaut plus sûre dans la version finale

    • À mon avis, interpoler les couleurs en sRGB dans le navigateur est en fait quasiment un bug. sRGB est un encodage sur une échelle logarithmique, donc la spécification indiquait à l’origine qu’il ne fallait pas interpoler directement en sRGB, mais convertir en RGB linéaire avant interpolation

    • L’article a été corrigé, donc mon commentaire peut être ignoré. Cela dit, je suis toujours d’accord sur le fait que l’interpolation Oklab devrait être le choix par défaut. L’article dit aussi, à propos des « meilleurs dégradés », que la teinte d’OKLCH est circulaire et peut donc suivre des chemins inattendus. Pour éviter ce problème, beaucoup d’outils utilisent OKLAB, et Oklab donne des résultats cohérents avec une trajectoire rectiligne

    • En réalité, CIE LAB remplit déjà le même rôle et existe déjà comme standard (CIE LAB sur Wikipédia)
      Document de revue du W3C

    • Merci pour cette explication très instructive. Je suis l’auteur de l’article. Je vais le modifier pour rendre cela plus clair

    • Faire un dégradé entre deux couleurs situées à l’opposé du spectre est un cas assez extrême. Il n’y a pas vraiment de bonne réponse sur le rendu attendu, et je pense qu’en pratique on a rarement besoin de ce genre de dégradé en design. En général, quand on utilise des dégradés, on choisit directement les couleurs intermédiaires

  • Pour tout ce qui touche à OKLCH, oklch.com m’a aidé à développer une intuition. Il faut toutefois faire attention au fait que la valeur de teinte diffère de celle de HSL, et que le maximum de chroma varie selon la teinte et la luminosité. Ce n’est pas un bug, mais le reflet des caractéristiques de la vision humaine et des écrans. Contrairement à OKLCH, HSL a toujours la même valeur maximale, mais la signification des couleurs n’y est pas cohérente. L’un des bons côtés de OKLCH en CSS, c’est qu’on peut le manipuler sous forme de formule. Par exemple : oklch(from var(--accent) calc(l + .1) c h). Mais pour bien utiliser ces formules dans la pratique, il faut des notions de théorie des couleurs ou beaucoup de tests. Par exemple, je pensais qu’il suffisait de changer la luminosité pour créer une ombre, mais en réalité la teinte doit aussi changer. Cela ne veut pas dire que les dégradés OKLCH sont toujours les meilleurs. Avec des teintes proches, les couleurs paraissent effectivement plus régulières, mais si l’on veut aussi tenir compte de la façon dont la lumière se mélange physiquement, il faut un espace de couleur XYZ. Voir à ce sujet la documentation MDN sur color-mix. Au passage, le « ok » vient littéralement du mot OK. L’idée était que l’ancien LCH avait des problèmes, donc n’était pas « OK »

    • Vous dites que la possibilité d’utiliser des formules dans OKLCH en CSS est un avantage, mais en réalité la manipulation relative des couleurs est possible dans tous les espaces colorimétriques CSS. Par exemple : background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));

    • Grâce à OKLCH et aux couleurs relatives, j’ai pu réduire fortement le nombre de couleurs codées en dur dans ma feuille de style
      Exemple de variables CSS

  • Certains points critiques ont déjà été mentionnés, mais je trouve que c’est malgré tout un assez bon article d’introduction à OKLCH et à son usage en CSS. Une question annexe : je m’interroge sur la tendance récente à ne plus afficher la date sur les billets de blog. En particulier, la formule « OKLCH est un nouveau modèle de couleur » risque de vite devenir datée. Sur le site principal, il n’y a écrit que « août 2025 », ce qui donne l’impression d’une absence de date volontaire
    Site concerné

    • Je ne saurais pas l’expliquer précisément, mais je pense qu’un article sans date est un vrai problème. Je ne sais pas si c’est vraiment une tendance actuelle, mais sans date on peut très facilement prendre un vieux texte pour un article récent. Il m’arrive d’estimer l’année d’un billet via les horodatages dans les commentaires, mais beaucoup de blogs ne proposent même pas de commentaires, et dans ce cas je n’ai plus envie d’y revenir. (C’est ironique que la page principale de l’OP dise « je ne m’attarde pas sur les détails », alors qu’elle semble obsédée par l’esthétique du design au détriment de la fonctionnalité.)

    • Quand un article n’a pas de date, j’essaie de me fier à l’en-tête Last-Modified quand je récupère le document HTML via HTTP. Mais souvent, l’auteur ne se soucie pas vraiment des dates. Comme le suggère le mot blog, à l’origine [web]-log, les horodatages en sont un élément essentiel, et beaucoup semblent l’oublier. Pour rappel, la valeur Last-Modified indique l’instant de dernière modification de cette ressource (le HTML). Si le serveur ne gère pas le cache et rerend le backend à chaque requête, la date est alors mise à jour en permanence
      Exemple de ce problème

    • C’est surtout une astuce SEO pour éviter que les contenus anciens ne soient rétrogradés dans les moteurs de recherche. Quel procédé pénible

    • C’est à cause de Google et du SEO

  • L’article dit que les couleurs OKLCH donnent des bleus plus cohérents que HSL, mais en pratique l’augmentation de luminosité en OKLCH se déplace fortement vers le vert. Le fait de garder une intensité perceptuelle constante est clairement un avantage, mais j’ai l’impression que l’effet revendiqué ici est exagéré

    • On comprend pourquoi en regardant le diagramme de teinte de cette couleur
      Diagramme OKLCH
      Quand on augmente la luminosité, on dépasse la limite de la bande de teinte pour cette couleur, et la couleur glisse vers le cyan à cause de la limite des bleus clairs reproductibles sur un écran. Dans les dégradés, OKLCH ne conserve pas la teinte quand on ajuste la luminosité, mais la saturation. Que cet effet soit préférable ou non relève du goût esthétique, mais comme on a longtemps utilisé des couleurs web désaturées à teinte constante, je trouve intéressant de pouvoir « choisir quel compromis privilégier »
      Discussion Hacker News liée
      La communauté scientifique a récemment mis au point des LED bleues encore plus profondes, donc j’espère que dans 10 à 20 ans, lorsqu’une technologie remplacera Display P3, on pourra afficher des dégradés bleus plus fidèles sans ce glissement vers le cyan. D’ici là, ce qui compte, c’est ce qui fonctionne visuellement en design.
      Au passage, je me demande si les futurs espaces colorimétriques ne pourraient pas éviter de choisir strictement entre teinte constante et saturation constante : on pourrait garder une saturation constante jusqu’aux limites de l’écran, puis basculer progressivement vers une teinte constante au point critique. Mais c’est très difficile à cause des contraintes des profils colorimétriques (IDCv4). Cela dit, ce serait amusant à tester comme cible expérimentale pour DisplayCAL

    • Sur mon écran, je ne vois absolument aucun glissement vers le vert dans l’exemple. Je me demande si votre écran n’est pas mal calibré

    • Je suis d’accord. La couleur passe complètement du bleu au cyan. Si OKLCH est bien implémenté ainsi, je n’aurais aucune envie de l’utiliser. Il semble y avoir un problème sérieux dans le calcul de la teinte. HSL/HSV ont certes un problème de luminosité perceptuelle, mais la teinte elle-même reste toujours constante et n’a pas besoin d’être corrigée

    • Je ne connais pas très bien la science des couleurs, donc c’est peut-être subjectif, mais à l’extrémité droite, la couleur OKLCH me semble au pire bleu-vert, voire simplement bleu clair. En revanche, les deux couleurs les plus claires en HSL ne me paraissent pas bleues du tout : celle juste avant l’extrémité droite ressemble plutôt à un violet clair, et celle tout à droite à du gris. La légende disait que le côté sombre de HSL tirait vers le gris, mais en réalité, dans OKLCH comme dans HSL, l’extrémité la plus sombre garde un aspect bleu. Si on mesure avec le Digital Color Meter de macOS, les valeurs de vert des couleurs les plus à droite en OKLCH et en HSL sont presque identiques (226 et 227, ou 228 et 227 en sRGB)

  • Je recommande un meilleur article sur le sujet
    OKLCH in CSS: Why quit RGB, HSL, par Evil Martians
    Outil de conversion OKLCH à essayer
    Discussion Hacker News précédente (il y a 6 mois, 30 commentaires)

  • OKLCH est fondé sur OKLab, un espace colorimétrique perceptuellement uniforme, et c’est un modèle qui permet d’ajuster la luminosité, la chroma et la teinte. Le « OK » vient du fait que son créateur aurait dit que « ça fonctionne à peu près correctement »

    • Je suppose plutôt que le « OK » de OKLCH est l’abréviation de « Ottossons kulör » (« la couleur d’Ottosson » en suédois). Son créateur a peut-être humblement laissé entendre que c’était juste « OK »

  • Quand on travaille avec la couleur et du texte ou des logos, il faut aussi absolument tenir compte du contraste et de la lisibilité
    APCA Contrast

    • Le site ci-dessus est utile si l’on veut utiliser l’algorithme de contraste le plus récent (APCA, qui n’est pas encore l’algorithme officiel du futur standard WCAG 3), mais aujourd’hui beaucoup de secteurs se basent encore sur WCAG 2, donc il faut aussi faire attention aux exigences légales.
      Vérification du contraste (WCAG 2)
      Il existe aussi divers autres outils

  • Dans ma tête, le nom OKLCH s’est naturellement transformé en « Oklachroma »

  • Il existe un tout premier billet de blog présentant l’espace de couleur OKLab, intéressant d’un point de vue historique
    Billet original sur OKLab

  • Je me demande pourquoi la formule de conversion vers l’espace colorimétrique OKLCH n’est pas documentée. Quand je cherche sur Google, je ne trouve qu’un Gist[0] et la page Wikipédia sur Oklab[1]
    Exemple de formule de conversion dans un Gist
    Oklab sur Wikipédia

    • Le cœur de la conversion réside dans la matrice entre Oklab et sRGB. La conversion OKLab-OKLCH elle-même n’est qu’un changement de coordonnées, et elle figure aussi sur Wikipédia

    • OKLCH et OKLab sont le même espace colorimétrique. Seule la représentation change : coordonnées cartésiennes (OKLab) contre coordonnées polaires (OKLCH)