Convertisseur hex vers OKLCH

Qu’est-ce que oklch() ?

oklch() est la façon d’écrire une couleur apportée par CSS Color 4, et elle la nomme par trois nombres avec lesquels on peut raisonner : la clarté en pourcentage, le chroma — à quel point elle est colorée — et la teinte sous forme d’angle en degrés. oklch(62,8% 0,258 29,2) est le rouge que vous connaissez sous le nom de #ff0000.

Le changement vaut surtout pour une raison : la clarté est perceptuelle. Deux couleurs de même L paraissent aussi claires l’une que l’autre, ce qui est loin d’être vrai en HSL — hsl(60 100% 50%) est un jaune éblouissant et hsl(240 100% 50%) un bleu sombre, à clarté déclarée identique. C’est pourquoi une palette construite en faisant varier L en OKLCH paraît régulière, alors que la même en HSL ne l’est pas.

L’inconvénient : une valeur hex, ce sont trois entiers, et une valeur oklch(), trois décimaux — l’écrire suppose donc de décider combien de chiffres garder. Cette décision est invisible, aucun convertisseur que nous ayons vu ne l’étiquette, et c’est précisément là que la couleur change sans le dire.

Comment s’en servir

1. Saisissez ou collez dans l’un ou l’autre champ. Hex à gauche, oklch() à droite ; chacun pilote l’autre. Le champ oklch() accepte ce qu’accepte CSS, y compris un chroma en pourcentage et le mot-clé none.
2. Choisissez le nombre de chiffres. Trois réglages : ce que l’on écrit à la main, un chiffre de plus sur chaque composante, et les nombres ronds qui font propre. La valeur se met à jour, et les indications en dessous aussi.
3. Lisez la ligne de l’aller-retour avant de copier. Elle indique si ce texte exact redonne le hex de départ, et de combien d’unités sur 255 il s’en écarte sinon.

Combien de chiffres il faut

C’est la mesure sur laquelle repose cette page. En prenant 1 893 376 couleurs sRGB — tous les rouges, un vert et un bleu sur trois —, en convertissant chacune en oklch(), en l’arrondissant comme on l’écrirait, puis en revenant :

À la précision que l’on écrit à la main — clarté à une décimale de pourcentage, chroma à trois, teinte à une — 77,91 pour cent reviennent exactes, et le pire cas s’écarte de 8 sur un canal. Un chiffre de plus sur chaque composante porte cela à 99,92 pour cent, avec un pire cas de 1. Quant à la version bien propre, pourcentage et teinte entiers avec deux décimales de chroma, elle survit à 1,66 pour cent et peut s’écarter de 43 sur un canal : une couleur visiblement différente.

À titre de comparaison, le même aller-retour à travers le HSL qu’affiche tout outil de couleur survit à 10,58 pour cent, chiffre publié par notre page hex vers HSL. Autrement dit, oklch() à précision ordinaire est environ sept fois plus fidèle que la notation qu’il remplace, et non l’inverse — bon à savoir, car les décimales le font paraître plus tatillon qu’il n’est.

La règle pratique qui en découle : deux décimales sur le pourcentage, quatre sur le chroma et deux sur la teinte, c’est pratiquement sans perte, et cela coûte trois caractères.

Limites assumées

oklch() peut nommer des couleurs que votre écran ne sait pas montrer, ce que le hex ne peut pas. Le chroma n’a pas de plafond fixe dans la syntaxe, et la plupart des valeurs que l’on peut écrire tombent hors du sRGB. Dans ce cas, CSS réduit le chroma jusqu’à ce que la couleur tienne, en conservant clarté et teinte : il ne rogne pas les canaux rouge, vert et bleu séparément, car rogner fait visiblement tourner la teinte. Cette page fait de même et vous prévient quand elle a dû le faire, et de combien de chroma.

Tout est mesuré ici par rapport au sRGB. Un écran à gamut étendu en montre davantage, et un navigateur sur un tel écran affichera parfaitement une couleur oklch() que cette page déclare non affichable. Depuis une page, il n’existe aucun moyen de demander avec précision quel gamut vous regardez : c’est donc la réponse prudente qui s’affiche.

La conversion emploie les matrices Oklab standard, et ce n’est pas de l’arithmétique exacte : c’est du flottant passant par une racine cubique et revenant. Les erreurs restent très en deçà d’une unité sur 255, et c’est pourquoi les chiffres ci-dessus sont dominés par l’arrondi que vous choisissez, pas par la conversion.

Enfin, la prise en charge d’oklch() est large mais pas universelle, et le schéma raisonnable reste une déclaration hex suivie de la déclaration oklch(), pour que les anciens navigateurs prennent la première et les récents la seconde. Le hex que vous donne cette page est exactement ce repli.

Pourquoi est-ce gratuit ?

La conversion s’exécute dans votre navigateur, en quelques lignes d’arithmétique. Aucun serveur n’intervient : il n’y a donc rien à facturer et aucun compte à créer.

Rien n’est envoyé et rien n’est conservé. Rechargez la page et elle aura oublié votre couleur.