Qu’est-ce que la couleur OKLCH ?

• 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.