Comprendre OKLCH : L'espace colorimétrique qui a vraiment du sens

Vous êtes-vous déjà demandé pourquoi certaines combinaisons de couleurs vous plaisent naturellement tandis que d'autres donnent envie à vos yeux de s'échapper ?

Ce n'est pas de la magie. Ce n'est pas un talent naturel. C'est des mathématiques—spécifiquement, les mathématiques derrière la façon dont nos yeux perçoivent réellement la couleur.

Pendant des décennies, nous avons été coincés avec RGB et HSL, des systèmes de couleurs conçus pour les ordinateurs, pas pour les humains. Mais OKLCH change tout.

Voyez le problème par vous-même

Commençons par une démonstration simple. En HSL, si vous définissez trois couleurs différentes à la même valeur de "luminosité", elles devraient paraître également brillantes, n'est-ce pas ?

Essayez de basculer entre les deux systèmes ci-dessus. Remarquez-vous quelque chose ? En mode HSL, le vert domine absolument—même si les trois couleurs sont définies à 50% de luminosité. En mode OKLCH, elles paraissent réellement équilibrées.

C'est la différence entre l'égalité mathématique et l'égalité visuelle.

Qu'est-ce qu'OKLCH, vraiment ?

OKLCH signifie OK Lightness Chroma Hue (OK Luminosité Chroma Teinte). La partie "OK" vient de Björn Ottosson, qui a développé l'espace colorimétrique OKLab sous-jacent sur lequel OKLCH est basé.

Voici ce qui le rend spécial :

L (Lightness/Luminosité) : Luminosité qui a du sens

Contrairement à la fausse luminosité d'HSL, la luminosité OKLCH correspond à la luminosité réelle d'un objet pour vos yeux. L=50% paraît vraiment deux fois moins lumineux que L=100%.

C (Chroma) : Saturation sans mensonges

Le chroma mesure à quelle distance une couleur est du gris. Même valeur de chroma = même saturation perçue, quelle que soit la teinte.

H (Hue/Teinte) : Le cercle chromatique, corrigé

Comme HSL, mais arrangé selon la perception humaine plutôt que la technologie d'affichage.

Pourquoi RGB et HSL échouent

RGB : Construit pour les machines

RGB a été conçu pour les moniteurs CRT dans les années 1950. Il décrit combien de lumière rouge, verte et bleue émettre—pas comment les couleurs paraissent réellement aux humains.

Le problème : rgb(0, 255, 0) et rgb(255, 0, 0) ont la même "intensité" mathématiquement, mais le vert paraît dramatiquement plus lumineux.

HSL : Une tentative noble

HSL a essayé d'être plus convivial pour les humains en séparant teinte, saturation et luminosité. Bonne idée, exécution défaillante.

Le problème : La luminosité HSL n'est que du RGB déguisé. Elle ne tient pas compte de la façon dont nos yeux perçoivent réellement les différentes couleurs.

Comment OKLCH corrige tout

OKLCH est construit sur des décennies de recherche en science des couleurs. Il est conçu autour de la vision humaine, pas de la technologie d'affichage.

Uniformité perceptuelle

Le Saint Graal des espaces colorimétriques. Dans OKLCH, les distances mathématiques correspondent aux différences visuelles. Si deux couleurs sont deux fois plus éloignées numériquement, elles paraissent deux fois plus différentes à vos yeux.

Dégradés qui ne craignent pas

Avez-vous déjà remarqué comme les dégradés RGB paraissent souvent boueux au milieu ? C'est parce que l'interpolation RGB ne suit pas le chemin que vos yeux attendent.

La différence est frappante. Les dégradés RGB luttent contre la perception humaine. Les dégradés OKLCH travaillent avec elle.

Avantages du monde réel

Palettes de couleurs prévisibles

Vous voulez cinq couleurs qui paraissent également importantes ? Définissez-les aux mêmes valeurs L et C, ne variez que H. Terminé.

Design accessible facilité

Besoin d'assurer le contraste du texte ? La luminosité OKLCH correspond réellement à la luminosité perçue, rendant les calculs d'accessibilité significatifs.

Couleur à l'épreuve du futur

OKLCH n'est lié à aucune technologie d'affichage spécifique. Il décrit les couleurs comme les humains les voient, le rendant pertinent pour les écrans que nous n'avons pas encore inventés.

La meilleure partie : C'est déjà là

OKLCH n'est pas une technologie future théorique. Il est supporté dans :

• Chrome 111+ (Mars 2023)
• Firefox 113+ (Mai 2023)
• Safari 15.4+ (Mars 2022)

C'est plus de 95% des utilisateurs web aujourd'hui.

Commencer

La syntaxe est merveilleusement simple :

/* Syntaxe OKLCH */
color: oklch(60% 0.15 240);

/* Comparer à RGB */
color: rgb(57, 130, 246);

Lequel vous en dit plus sur la couleur réelle ? Avec OKLCH, vous pouvez lire les valeurs :

• 60% de luminosité
• 0.15 de saturation
• 240° teinte bleue

Avec RGB ? Vous devez juste faire confiance au fait que ces trois nombres font d'une manière ou d'une autre du bleu.

Pourquoi c'est important

La couleur est l'un des outils les plus puissants en design. Elle influence l'humeur, guide l'attention et communique du sens.

Trop longtemps, nous avons travaillé avec des outils cassés—des systèmes de couleurs qui ne s'alignent pas avec la perception humaine. OKLCH corrige cette inadéquation fondamentale.

Le résultat ? Des choix de couleurs plus prévisibles, plus cohérents et plus efficaces.

Vous n'avez pas besoin d'être un expert en couleurs pour bénéficier d'OKLCH. Vous devez juste commencer à utiliser un système de couleurs conçu pour les humains au lieu des machines.

Bienvenue dans le futur de la couleur sur le web. Il vous attendait.