Convertir le hex en OKLCH (et inversement)

Faites un aller-retour. Prenez un bleu de marque — #2563eb — et convertissez-le en OKLCH : oklch(0.546 0.215 262.9). Reconvertissez-le en hex et #2563eb revient, exact jusqu’au dernier chiffre. Maintenant, apportez une seule modification avant le trajet retour : augmentez le chroma de 0,215 à 0,28, une version plus vive du même bleu, et convertissez de nouveau. Cette fois, vous obtenez #0054ff — et relire ce hex indique un chroma de 0,261, et non le 0,28 que vous aviez écrit. L’aller était parfait ; le retour a discrètement déplacé votre couleur.

Cette asymétrie résume à elle seule toute la conversion hex-vers-OKLCH : hex → OKLCH est sans perte — chaque couleur hex possède des coordonnées OKLCH exactes — tandis que OKLCH → hex peut écrêter, car OKLCH peut exprimer des couleurs qu’aucune valeur hex ne peut encoder, et celles-ci doivent alors être mappées vers la couleur la plus proche que le hex sait contenir. Les allers-retours sont sûrs ; c’est lors des modifications qu’une couleur peut tomber en dehors de la carte hex. Cet article parcourt le pipeline, l’asymétrie, et le flux de travail qui rend toute conversion manuelle inutile — dans le cadre de notre guide OKLCH.

Comment la conversion fonctionne-t-elle réellement ?

Quatre étapes, exécutées dans l’ordre. D’abord, la valeur hex est décomposée en ses trois canaux sRGB (chaque paire de chiffres hexadécimaux devient un nombre de 0 à 255, ramené à l’intervalle 0–1). Ensuite, ces canaux sont décodés de leur forme encodée en gamma vers la lumière linéaire — des nombres proportionnels à la lumière physique qu’un écran émet. Troisièmement, les valeurs linéaires sont transformées en OKLab, l’espace perceptuel où un axe porte la luminosité et deux axes portent la couleur. Quatrièmement, ces deux axes de couleur sont réexprimés sous forme polaire : la distance au gris devient le chroma, l’angle devient la teinte — et vous obtenez L, C, H. La définition formelle, matrices et racine cubique comprises, se trouve dans la référence espace colorimétrique Oklab ; en pratique, chaque outil de couleur exécute ces étapes pour vous.

Chaque étape est réversible, et les exécuter à l’envers correspond au sens OKLCH → hex. La précision n’est pas un problème en pratique : le hex quantifie chaque canal en 256 niveaux, ce qui est plus grossier que des valeurs OKLCH à trois décimales — c’est pourquoi oklch(0.546 0.215 262.9), arrondi tel qu’imprimé ici, renvoie tout de même exactement #2563eb.

Pourquoi la conversion hex vers OKLCH est-elle toujours sans perte ?

Parce que le trajet part d’un ensemble petit et discret vers un espace plus vaste et continu. Le hex peut nommer exactement 16 777 216 couleurs (256³), toutes situées à l’intérieur du gamut sRGB. OKLCH décrit un espace continu qui contient l’intégralité de sRGB — et davantage au-delà. Chaque couleur hex possède donc une adresse OKLCH précise, et la convertir ne perd rien. Une bonne image mentale : les couleurs hex sont des villes, et OKLCH est une carte plus grande et mieux calibrée. Placer une ville sur une carte plus grande ne fait jamais perdre la ville.

Pourquoi la conversion OKLCH vers hex peut-elle écrêter ?

Le trajet retour n’offre aucune garantie de ce genre, car OKLCH contient des adresses sans aucune ville sur la carte hex : des couleurs hors de sRGB. Certaines sont visibles sur des écrans à large gamut — des tons moyens Display-P3 éclatants — et d’autres réclament simplement plus de chroma que la luminosité n’en autorise où que ce soit.

L’expérience d’ouverture illustre le mécanisme avec de vrais nombres. À la luminosité et à la teinte de #2563eb (L 0,546, H 262,9), sRGB arrive à court de place vers un chroma ≈ 0,251. Demander 0,28 réclame une couleur qui existe — un écran P3 peut l’afficher — mais qu’aucune valeur hex ne peut écrire. Le mappage de gamut trouve alors la couleur exprimable la plus proche : #0054ff, qui se mesure oklch(0.532 0.261 262.7). Notez que les trois coordonnées ont bougé, pas seulement le chroma — l’écrêtage atterrit sur la couleur la plus proche, et non sur votre couleur avec un seul nombre plafonné.

C’est aussi pourquoi les générateurs d’échelles plafonnent le chroma légèrement en dessous du plafond sRGB à chaque luminosité — une marge de sécurité plutôt qu’un écrêtage — afin que les paliers générés se convertissent proprement en hex au lieu de s’entasser sur la frontière du gamut.

À quoi ressemble le flux de conversion en pratique ?

Rien qui ressemble à de la conversion. Presque personne ne traduit les valeurs hex à la main, car le point de départ réaliste est une couleur de marque qui existe déjà en hex, et l’objectif réaliste est une palette — pas des coordonnées. Le flux de travail est donc : importer le hex comme couleur de départ, et laisser la génération de l’échelle se faire en OKLCH autour d’elle. Importez ce bleu comme couleur de départ dans Scale Composer — l’outil lit #2563eb comme oklch(0.546 0.215 262.9) et construit l’échelle à partir de là.

Voici l’échelle que produit cette couleur de départ — la luminosité progressant selon une courbe, le chroma suivant un profil en cloche qui culmine près de la couleur de départ et conserve un plancher aux extrêmes, de sorte que même les paliers les plus pâles et les plus foncés gardent une pointe de bleu :

Chaque ligne se convertit en hex sans écrêtage, car chaque valeur de chroma se situe sous le plafond du gamut à sa luminosité. La couleur de départ est arrivée en hex, la réflexion s’est faite en OKLCH, et les résultats repartent en hex — trois conversions par palier, aucune réalisée par un humain.

Que se passe-t-il quand vous modifiez et réexportez ?

La modification est la raison même de convertir — et c’est là que l’asymétrie du début de cet article devient un fait quotidien plutôt qu’une curiosité. Poussez le chroma d’une couleur vers le haut et, à un certain point, elle quitte sRGB : dès lors, son écriture hex n’est qu’une approximation écrêtée tandis que la couleur, elle, continue d’exister. Les exports gèrent cette scission honnêtement — le hex reste écrêté sur sRGB, et en mode Display-P3 chaque palier porte aussi une chaîne color(display-p3 …) qui contient le chroma que le hex ne peut pas exprimer. Ouvrez l’échelle générée à partir de la couleur de départ, augmentez le chroma et réexportez — observez quels paliers voient leurs valeurs hex cesser de bouger en atteignant le plafond, tandis que les chaînes P3 continuent.