Design System avec OKLCH : les couleurs du futur

Le web évolue, et avec lui la façon de gérer les couleurs. En 2026, OKLCH s'impose comme le standard pour les design systems professionnels. Voici pourquoi — et comment l'adopter.

Pourquoi abandonner HSL ?

HSL a longtemps été le choix par défaut des développeurs frontend. Mais il souffre de deux défauts majeurs :

• Perception non uniforme : deux couleurs HSL de même lightness ne paraissent pas aussi lumineuses à l'œil humain
• Gamut limité : HSL est contraint au gamut sRGB, insuffisant pour les écrans P3 modernes
• Manipulation difficile : modifier la saturation change souvent la luminosité perçue

OKLCH : la révolution perceptuelle

OKLCH (Lightness, Chroma, Hue) est un espace colorimétrique perceptuellement uniforme. Concrètement, si deux couleurs ont la même lightness en OKLCH, elles paraissent réellement aussi lumineuses.

:root {
  --brand: oklch(72% 0.14 250);
  --mint: oklch(90% 0.18 165);
  --gold: oklch(83% 0.13 80);
  --coral: oklch(70% 0.18 20);
}

Thème dark/light automatique

Avec OKLCH, créer un thème dark/light cohérent devient trivial. Il suffit d'ajuster la lightness :

:root {
  color-scheme: dark;
  --bg: oklch(5% 0.008 270);
  --text: oklch(93% 0.005 260);
}
:root.light {
  color-scheme: light;
  --bg: oklch(99% 0.005 270);
  --text: oklch(15% 0.01 270);
}

La hue et la chroma restent identiques — seule la lightness change. Le résultat : des couleurs cohérentes dans les deux modes.

Intégration avec TailwindCSS 4

TailwindCSS 4 supporte nativement les variables CSS via @theme :

@theme {
  --color-brand: var(--brand);
  --color-mint: var(--mint);
  --color-gold: var(--gold);
}

Vous pouvez ensuite utiliser bg-brand, text-mint, border-gold directement dans vos classes.

Conclusion

OKLCH est l'avenir des design systems. Sa perception uniforme, son support des gamuts étendus et son intégration native dans CSS en font le choix évident pour tout nouveau projet en 2026.