OKLCH est arrivé. OKHSL sera-t-il le prochain?
Si vous avez déjà créé une palette de couleurs en hsl(), on vous a menti. Réglez le jaune et le bleu à la même luminosité de 50 % et placez-les côte à côte. Le jaune éclate. Le bleu est presque marine. La « luminosité » de HSL est un calcul sur les canaux RVB, pas une mesure de ce que votre œil perçoit.
oklch() règle ce problème, fonctionne dans tous les navigateurs modernes aujourd’hui, et c’est la meilleure chose qui soit arrivée à la couleur en CSS depuis des années. Et il a un cousin, OKHSL, que certains d’entre nous aimeraient bien voir arriver ensuite.
Ce qu’est vraiment OKLCH
OKLCH est la forme polaire d’Oklab, un espace colorimétrique publié par Björn Ottosson en 2020 et adopté par CSS dans le module Color Level 4. Il prend trois valeurs, plus une transparence facultative :
- L : la luminosité perçue, de 0 à 1 (ou de 0 % à 100 %). Le mot clé, c’est « perçue » : deux couleurs avec le même L paraissent aussi claires l’une que l’autre.
- C : la chroma, soit l’intensité de la couleur, de 0 (gris) jusqu’à environ 0,37 pour les couleurs les plus vives qu’un écran peut afficher.
- H : l’angle de teinte, de 0 à 360.
:root {
--brand: oklch(0.62 0.19 255); /* un bleu affirmé */
--brand-muted: oklch(0.62 0.06 255); /* même luminosité, moins de couleur */
--overlay: oklch(0 0 0 / 50%); /* noir à 50 % */
}
Lisez ces valeurs et vous voyez presque la couleur. Changez la teinte, et la luminosité ne bouge pas. Rien que pour ça, c’est plus facile à comprendre que l’hexadécimal ou le RVB ne le seront jamais.
Ce que ça permet
Des palettes vraiment harmonisées. Gardez L et C fixes, faites varier H, et vous obtenez des teintes qui paraissent aussi claires et aussi vives les unes que les autres. En HSL, il faudrait ajuster chaque pastille à la main.
La syntaxe de couleur relative. Vous pouvez dériver des couleurs d’une couleur de base directement en CSS, sans préprocesseur :
:root {
--base: oklch(0.62 0.19 255);
}
.button:hover {
background: oklch(from var(--base) calc(l - 0.08) c h);
}
.badge {
background: oklch(from var(--base) l c calc(h + 180));
}
.disabled {
background: oklch(from var(--base) l 0 h);
} /* un vrai gris, même luminosité */
De meilleurs mélanges et dégradés. color-mix() et les dégradés peuvent interpoler dans Oklab, ce qui évite le gris boueux qu’on obtient au milieu d’un mélange en sRGB. L’ébauche de CSS Color 5 fait même d’Oklab l’espace par défaut quand on n’en précise pas dans color-mix().
Une gamme étendue sans effort. OKLCH n’est pas lié au sRGB, il peut donc décrire les couleurs plus riches du Display P3 que la plupart des téléphones et ordinateurs portables récents peuvent afficher.
Le hic : la chroma est irrégulière
OKLCH a un vrai défaut. La chroma maximale dépend à la fois de la teinte et de la luminosité. Un jaune vif n’atteint une chroma élevée que lorsqu’il est clair. Un bleu vif atteint son maximum quand il est foncé. Donc oklch(0.9 0.3 260) n’est tout simplement pas une couleur que votre écran peut afficher, et le navigateur doit la ramener à la plus proche possible.
En pratique, on ne peut pas traiter C comme un curseur propre de 0 à 100 %. Il faut un sélecteur qui montre la limite de la gamme, ou garder une chroma modeste et accepter une palette un peu plus calme. Cette irrégularité, c’est précisément le problème qu’OKHSL a été conçu pour résoudre.
OKHSL : celui que j’attends
Ottosson a aussi conçu OKHSL et OKHSV. Ils conservent la forme familière de HSL, où chaque saturation de 0 % à 100 % donne une couleur valide, mais reposent sur Oklab pour que la luminosité soit beaucoup plus proche de ce qu’on perçoit réellement. Voyez-le comme un HSL qui dit enfin la vérité, avec un curseur qu’on peut glisser d’un bout à l’autre sans sortir de la gamme.
La réalité : ce n’est pas encore dans CSS, et rien n’est prévu. Une demande pour ajouter OKHSL à la spécification CSS a été ouverte en mars 2023, et elle n’est toujours qu’une proposition. L’éditeur de la spécification a soulevé deux objections légitimes. Forcer la couleur dans un cylindre bien net sacrifie une partie de l’uniformité perceptuelle, qui était tout l’intérêt d’Oklab. Et OKHSL a été conçu autour du sRGB, au moment même où le Web passe aux écrans P3 à gamme étendue. D’autres participants ont montré qu’une version P3 est possible, donc la porte n’est pas fermée.
D’ici là, on peut faire presque tout le chemin avec OKLCH et un bon sélecteur qui tient compte de la gamme, ou avec une bibliothèque JavaScript de couleurs qui prend déjà OKHSL en charge. Mon vote : qu’on l’ajoute, avec un paramètre de gamme. Les designers veulent un modèle de couleur qu’ils peuvent comprendre sans diplôme en physique, et OKHSL est ce qui s’en rapproche le plus.