Comment convertir un code HEX en RGB, HSL et OKLCH, et quel format coller où

Convertir une couleur relève de l’arithmétique. Choisir lequel des résultats coller, c’est là qu’on se trompe, car les notations ne sont pas interchangeables quant à ce qu’elles permettent de faire ensuite.

Convertir une couleur avec l’outil

1. Ouvrez le convertisseur de couleurs et tapez ou collez votre valeur dans le champ intitulé Any CSS colour (n’importe quelle couleur CSS). Il lit le hex avec ou sans dièse, les noms de couleurs CSS et les valeurs rgb(), hsl() et oklch(). L’échantillon à gauche du champ ouvre un sélecteur de couleur si vous préférez choisir à l’œil.
2. Regardez le grand échantillon en dessous. Il montre la couleur à une taille qui permet d’en juger, avec son code hex écrit en noir ou en blanc, selon celui qui offre le meilleur contraste.
3. Repérez le groupe correspondant à la destination de la valeur : Paste into CSS (pour le CSS), Paste into a design tool (pour un outil de design) ou Going to print (pour l’impression). Chaque ligne porte une note d’une phrase indiquant quand l’utiliser.
4. Cliquez sur une ligne pour la copier. La ligne entière sert de bouton, et son libellé devient copied. Pour tout copier d’un coup, cliquez sur Copy all formats dans la barre en bas de la page (ou appuyez sur la touche C) : chaque conversion est copiée, une par ligne.
5. Avant de valider, lisez Contrast as text (contraste en tant que texte). Il donne le ratio de votre couleur utilisée comme texte sur blanc et sur noir, avec la mention AA body, AA large only ou fails AA. À côté, Colour vision montre la même couleur en huit échantillons : la vision typique et sept déficiences simulées.

Une couleur dans toutes les notations

L’outil s’ouvre sur #2563EB. Voici ce qu’il donne pour cette couleur, et où va chaque valeur.

Notation	#2563EB s’écrit	À coller dans
HEX	#2563EB	N’importe quelle propriété CSS ; partout où une valeur simple suffit
RGB	rgb(37 99 235)	Le CSS quand il faut de la transparence, sous la forme rgb(37 99 235 / 50%) ; les données de canvas et d’image
OKLCH	oklch(54.6% 0.215 262.9)	Les design tokens, les échelles, les variantes plus claires et plus sombres
HSL	hsl(221 83% 53%)	Un ajustement rapide à la main, jamais un système
HEX sans dièse	2563EB	Les champs de couleur de Figma, Sketch et Canva
Variable CSS	--color: #2563eb;	Un fichier de tokens
CMJN	cmyk(84% 58% 0% 8%)	Une discussion avec un imprimeur, pas une spécification

Une notation de couleur est une manière d’écrire une couleur, pas une couleur différente. Chaque ligne ci-dessus correspond au même bleu. Ce qui change, c’est ce que les nombres vous permettent de raisonner : le HEX ne vous dit rien à première vue, le RGB décrit ce que fait l’écran, le HSL est facile à ajuster à la main, et l’OKLCH est la notation dont l’axe de luminosité correspond à ce que vous voyez.

Ce dernier point mérite un chiffre plutôt qu’une reprise de toute la démonstration. À une luminosité HSL de 50%, le jaune pur a une luminance relative de 0.928 et le bleu pur de 0.072, soit près de treize fois d’écart pour la même luminosité nominale. Pourquoi cela exclut le HSL de tout usage systématique, et ce que fait l’OKLCH à la place, est expliqué dans OKLCH pour les designers.

Ce qui tourne mal lors de la conversion

Un HSL arrondi ne redonne pas le même hex

Le convertisseur arrondit le HSL à des nombres entiers, comme presque tous les outils et feuilles de style. Cet arrondi entraîne une perte. Reconvertissez hsl(221 83% 53%) en RGB et le canal rouge donne 255 × (0.53 − 0.83 × 0.94 ÷ 2) = 255 × 0.1399 = 35.7, arrondi à 36. L’original était 37. #2563EB part donc en HSL et revient sous la forme #2463EB.

Personne ne peut voir une différence de un sur le canal rouge. Un audit de tokens qui compare des chaînes, ou un fichier de design qui vérifie un hex de marque exact, la verra à chaque fois. Conservez la valeur HEX ou OKLCH comme source de vérité et traitez le HSL comme une simple vue de celle-ci.

La transparence ne survit pas

Collez un hex à huit chiffres comme #2563EB80 et tous les formats reviennent opaques, car le convertisseur travaille sur la couleur et abandonne le canal alpha. Si vous avez besoin de la transparence, rajoutez-la dans la forme RGB, rgb(37 99 235 / 50%), comme le suggère la note de l’outil sur la ligne RGB.

Le CMJN n’est pas une couleur d’impression

Le CMJN périphérique (device CMYK) est une conversion directe du RGB de l’écran en pourcentages d’encre, sans profil ICC : il ne sait rien du papier, de la presse ni des encres. Le calcul est assez simple pour être vérifié à la main. Pour #2563EB, le noir vaut K = 1 − 235 ÷ 255 = 8%, et le cyan (1 − 37 ÷ 255 − 0.078) ÷ (1 − 0.078) = 84%. Tous les convertisseurs web font ce même calcul naïf, c’est pourquoi l’outil le présente comme un point de départ. Pour l’impression, convertissez dans un logiciel qui connaît le profil de votre papier et de votre presse.

La notation ne change pas le contraste

Convertir n’améliore jamais la lisibilité d’une couleur. La luminance relative est la mesure WCAG de la quantité de lumière qu’émet une couleur, de 0 pour le noir à 1 pour le blanc, et les ratios de contraste en sont calculés. #2563EB a une luminance relative de 0.1532, quelle que soit la façon de l’écrire. En texte sur blanc, cela donne (1 + 0.05) ÷ (0.1532 + 0.05) = 5.17, que l’outil affiche comme 5.16:1 parce qu’il tronque au lieu d’arrondir : un ratio juste sous un seuil ne s’affiche ainsi jamais comme conforme. Sur noir, c’est (0.1532 + 0.05) ÷ 0.05 = 4.06:1 : grand texte uniquement. Si une couleur échoue, la solution est un changement de luminosité, et c’est précisément ce que cherche le vérificateur de contraste.

Autres façons de faire

Pour le CSS, vous n’avez peut-être même pas besoin de convertir. HEX, rgb(), hsl() et oklch() sont toutes des valeurs de couleur CSS valides : une valeur issue d’un fichier de design peut généralement être collée telle quelle.

Le passage du HEX au RGB se fait facilement à la main, car chaque paire de chiffres hexadécimaux est un nombre en base 16. Pour #2563EB : 25 vaut 2 × 16 + 5 = 37, 63 vaut 6 × 16 + 3 = 99, et EB vaut 14 × 16 + 11 = 235. Cela donne rgb(37 99 235).

L’OKLCH n’est pas praticable à la main. Il faut linéariser chaque canal, effectuer deux multiplications de matrices et une racine cubique : c’est un travail pour du code. Aucune méthode intégrée au système d’exploitation n’est indiquée ici, car nous n’en avons vérifié aucune qui produise toutes ces notations.

Vérifier que rien n’a quitté la page

La conversion s’exécute dans l’onglet, et la couleur saisie est inscrite dans la barre d’adresse après un #. Cette partie d’une URL n’est jamais envoyée au serveur, et c’est aussi pourquoi un lien copié rouvre la même couleur. Pour le vérifier, ouvrez les outils de développement de votre navigateur, choisissez le panneau Réseau et tapez quelques couleurs : vous ne verrez aucune requête qui les transporte. La balise d’analyse de la page transmet le chemin de la page, pas le fragment.

Pour aller plus loin

Ouvrez le convertisseur de couleurs et collez la couleur que vous vous apprêtez à valider. Si elle doit entrer dans un système plutôt que dans une seule règle, le générateur d’échelles et de tokens transforme une valeur OKLCH en onze paliers, avec des rôles attribués selon le contraste mesuré.