Si vous travaillez avec les couleurs en CSS, vous connaissez sûrement les formats classiques comme rgb() ou hsl(). Mais depuis quelque temps, une nouvelle star fait parler d’elle dans le monde du design et du développement : OKLCH. Ce modèle colorimétrique, plus moderne et plus proche de la manière dont l’œil humain perçoit les couleurs, pourrait bien devenir la norme de demain dans la création de site web ou d’applications mobiles. Voici pourquoi.
Qu’est-ce que OKLCH ?
OKLCH est une façon de définir une couleur selon trois dimensions :
- L (Lightness) : la luminance perçue, c’est-à-dire la clarté de la couleur. Elle va de 0 (noir) à 1 (blanc).
- C (Chroma) : l’intensité ou la pureté de la couleur. Plus c’est élevé, plus la couleur est vive.
- H (Hue) : la teinte, mesurée en degrés sur un cercle (0 = rouge, 120 = vert, 240 = bleu, etc.).
Optionnellement, on peut aussi ajouter un canal alpha pour la transparence, comme dans oklch(0.7 0.1102 206.49 / 50%)
Pourquoi c’est plus intelligent que RGB ou HSL ?
Les anciens formats comme rgb() ou hsl() ne tiennent pas compte de la perception humaine. Par exemple :
- Dans
hsl(), deux couleurs avec la même “lightness” peuvent paraître très différentes en termes de luminosité réelle. - Dans
rgb(), il est très difficile d’ajuster une couleur tout en gardant un bon contraste ou une harmonie visuelle.
Avec OKLCH, tout est plus prévisible et cohérent, car les valeurs reflètent la réalité visuelle. Si vous modifiez uniquement la luminance (L), la couleur devient plus claire ou plus foncée sans dériver vers un ton inattendu.
Les avantages concrets d’OKLCH
1. Des couleurs plus accessibles
OKLCH facilite le respect des critères de contraste des WCAG, car la luminance perçue est directement contrôlable. Plus besoin de tâtonner pour obtenir une couleur lisible.
2. Des palettes harmonieuses facilement
Grâce à la structure logique du modèle, il est simple de créer des variations (plus claires, plus saturées, etc.) à partir d’une couleur de base. Parfait pour les systèmes de design.
3. Compatibilité avec les écrans modernes
Les écrans récents (comme ceux d’Apple) supportent des couleurs plus riches (large gamut). OKLCH permet d’exploiter pleinement ces nouvelles capacités visuelles.
4. Lisibilité humaine
Pas besoin d’un outil externe pour comprendre la couleur : oklch(80% 0.1 240) est lisible d’un coup d’œil si on connaît un peu le modèle.
5. Facile à manipuler dans les outils CSS
OKLCH est compatible avec les fonctions CSS comme color-mix() et relative-color-syntax. Cela le rend puissant pour créer des interfaces dynamiques et adaptables.
Pourquoi OKLCH va devenir la norme
Avec l’arrivée des spécifications CSS Color 4, les navigateurs vont peu à peu adopter ce format. Sa capacité à produire des couleurs cohérentes, accessibles et modernes en fait un candidat naturel pour remplacer les anciens modèles. Comme l’a montré Evil Martians dans leur propre transition, OKLCH simplifie la vie des designers et des développeurs.
Comment OKLCH aide à créer des templates de couleurs plus cohérents
La clé, c’est que OKLCH reflète la perception humaine des couleurs. Voici en détail pourquoi et comment cela change tout pour tes templates :
La luminance perçue = des couleurs vraiment équilibrées
Dans OKLCH, la valeur L (Lightness) correspond directement à la clarté perçue par l’œil humain.
Résultat :
Si tu crées une palette avec différentes couleurs (bleu, rouge, vert…) mais que tu gardes le même L, toutes ces couleurs auront la même luminosité visuelle.
Exemple :
- Avec
hsl(), un bleu et un jaune avec la même “lightness” peuvent paraître très différents en termes de clarté. - Avec
oklch(), tu es sûr que tes boutons, fonds, ou textes auront un équilibre visuel naturel, sans surprises.
Chroma (C) : Maîtriser l’intensité pour éviter les couleurs “criardes”
La composante C (Chroma) définit l’intensité de la couleur.
En ajustant cette valeur, tu peux facilement :
- Créer des variantes désaturées (pour des arrière-plans doux).
- Générer des couleurs plus vives (pour attirer l’attention sur des CTA par exemple).
Et le tout de manière régulière, sans que certaines teintes deviennent soudainement trop flashy ou ternes.
Teinte (H) : Des déclinaisons faciles et logiques
Avec H (Hue) exprimée en degrés, tu peux :
- Générer automatiquement des couleurs complémentaires (ajoute +180°).
- Créer des variantes analogues ou triadiques pour des thèmes harmonieux.
OKLCH garantit que ces déclinaisons restent visuellement cohérentes, car la gestion de la luminance et de la chroma évite les dérives de contraste ou de saturation.
Des échelles et systèmes de design faciles à automatiser
OKLCH est parfait pour les systèmes de design où tu dois générer :
- Des tons clairs et foncés (ex. mode sombre / mode clair).
- Des états d’interface (hover, disabled, active) avec des variations maîtrisées.
- Des gammes complètes (par exemple, 10 nuances d’une même couleur).
Exemple pratique : Tu peux définir une base comme :
css
CopierModifier
--primary: oklch(70% 0.15 250);
Et décliner automatiquement :
- Une version plus sombre :
oklch(50%
0.15 250) - Une version désaturée :
oklch(70%
0.05 250)
Chaque variation garde une logique visuelle, ce qui est difficile à obtenir avec rgb() ou hsl() sans ajustements manuels.
Accessibilité intégrée
Parce que tu maîtrises précisément la luminance, il est beaucoup plus simple de garantir que :
- Tes textes ont un contraste suffisant avec leur fond.
- Tes templates respectent les normes WCAG.
Plus besoin de vérifier chaque combinaison à la main ou avec des outils externes.
Quand la cohérence rime avec simplicité
Avec OKLCH on passe d’une logique “technique” (comme en RGB) à une logique visuelle et humaine.
On peut standardiser des palettes et automatiser des déclinaisons sans risquer de casser l’harmonie du design.
Les interfaces sont plus belles, lisibles et accessibles, sans effort supplémentaire.
C’est pour ça que les équipes de design système (comme chez Evil Martians) adoptent OKLCH : fini les ajustements à l’œil ou les hacks pour obtenir une palette propre.