Le système de couleurs de Opcodia v2 est entièrement en OKLCH. C'est un changement qu'on a fait en début d'année et qu'on ne reverra plus jamais en arrière. Pourquoi.
HSL n'est pas perceptuellement uniforme
Le drame de HSL : deux couleurs avec la même valeur de luminosité (le L) peuvent paraître complètement différentes à l'œil.
/* Ces deux couleurs ont L = 50%. Lequel paraît plus clair ? */
hsl(60deg 80% 50%); /* jaune éclatant */
hsl(240deg 80% 50%); /* bleu profond */
Le jaune sera perçu comme brillant, le bleu comme sombre. Concrètement, une grille de boutons qui utilise différentes teintes HSL avec L = 50 % ne sera jamais cohérente en hiérarchie visuelle — on aura systématiquement besoin d'ajuster L à la main par couleur.
OKLCH résout ce problème
OKLCH (Oklab Lightness Chroma Hue) est basé sur l'espace Oklab publié en 2020, conçu pour être perceptuellement uniforme. Deux couleurs OKLCH avec la même valeur L paraîtront égales en luminosité — quelle que soit la teinte.
oklch(70% 0.18 60deg); /* jaune */
oklch(70% 0.18 240deg); /* bleu */
/* Les deux sont perçus comme étant à la même clarté. */
Sur un design system, ça veut dire qu'on peut définir un ensemble de tokens
de luminosité (--lvl-1, --lvl-2, ...) qui fonctionnent pour toutes
les teintes de la palette sans ajustement individuel.
Le bénéfice concret en build
Avant (HSL) — extrait d'un de nos design systems 2023 :
--brand-50: hsl(214deg 70% 96%);
--brand-100: hsl(214deg 65% 88%);
--brand-200: hsl(214deg 60% 78%);
--brand-300: hsl(214deg 56% 66%);
--brand-400: hsl(214deg 54% 56%);
--brand-500: hsl(214deg 52% 48%); /* base */
--brand-600: hsl(214deg 55% 40%);
--brand-700: hsl(214deg 58% 32%);
--brand-800: hsl(214deg 62% 24%);
--brand-900: hsl(214deg 68% 16%);
/* On a tweaké la saturation à la main pour chaque palier pour que ça
"fonctionne" visuellement — 9 tweaks ad-hoc pour ce token. */
Après (OKLCH) — Opcodia v2 :
--ink: oklch(20% 0.08 270);
--indigo: oklch(48% 0.27 270);
--paper: #f5f7f8;
/* Et les variantes sont générées par décalage de L uniquement,
pas besoin de retoucher la chroma. */
--indigo-soft: oklch(70% 0.22 270);
--indigo-deep: oklch(35% 0.3 270);
On a passé l'équivalent de 3 jours à tweaker la palette HSL en 2023. Pour Opcodia v2 en OKLCH : 45 minutes.
Le support navigateur en 2026
OKLCH est supporté nativement par tous les navigateurs evergreen depuis mai 2023 (Safari 16.4, Chrome 113, Firefox 113). En 2026, c'est 97 % du trafic global. Pour les 3 % restants (vieilles versions, navigateurs exotiques), un fallback HSL via PostCSS suffit :
:root {
--indigo: hsl(252deg 100% 60%); /* fallback */
--indigo: oklch(48% 0.27 270);
}
Le navigateur utilise la dernière valeur qu'il comprend. Pas de JS, pas de détection, pas de UA-sniffing.
Outils utilisés
- Oklch.com — convertisseur HSL ↔ OKLCH en ligne, idéal pour migrer une palette existante.
- Huetone — outil de génération de palette qui visualise la luminosité perceptuelle en colonnes.
- VS Code — l'extension Color Highlight supporte OKLCH depuis 2024.
Le seul piège
OKLCH n'est pas dans Sketch ni dans Figma nativement. On édite la palette en CSS, on visualise dans le navigateur. C'est un workflow différent de "Figma puis copier les hex" — mais en 2026, on conçoit dans le navigateur de toute façon, pas dans Figma.
Ce qu'on fait sur les projets
Toute nouvelle stack design Opcodia est en OKLCH par défaut depuis janvier 2026. Pour les projets existants, on migre uniquement si on touche déjà à la palette pour autre chose — pas de migration "religieuse" sans bénéfice métier.