Convertisseur de couleurs

HEX, RGB et HSL décrivent exactement les mêmes couleurs ; ils divergent seulement sur les nombres qu’ils jugent utile de vous montrer. Le convertisseur ci-dessus prend n’importe quelle valeur hexadécimale et vous donne les trois notations à la fois, avec un aperçu en direct, pour passer d’une maquette à une feuille de style ou à un sélecteur de couleur sans jouer aux devinettes.

Comment ça marche

Saisissez une valeur hexadécimale ou utilisez le sélecteur de couleur natif à côté du champ. La saisie est tolérante là où cela compte :

• Le # initial est facultatif — ff0000 et #ff0000 fonctionnent tous les deux.
• La notation abrégée à trois chiffres est développée : #f00 donne donc le même résultat que #ff0000.
• La casse n’a aucune importance ; la sortie canonique est un hexadécimal à six chiffres en minuscules.

Tout le reste — un nom de couleur, une valeur mal formée de quatre caractères, un caractère non hexadécimal — est rejeté avec un court message au lieu d’être converti en noir en silence. Chacune des trois sorties a son propre bouton de copie : vous pouvez ainsi coller rgb(59, 130, 246) directement dans une feuille de style, ou hsl(217, 91%, 60%) dans un fichier de design tokens.

La conversion est exacte dans un sens et arrondie dans l’autre. Passer de l’hexadécimal au RGB revient à lire trois octets en base 16, sans aucune perte. Passer du RGB au HSL implique des divisions, et la teinte, la saturation et la luminosité sont arrondies à l’entier pour rester lisibles — un aller-retour du HSL vers l’hexadécimal peut donc s’écarter d’une ou deux unités sur un canal. Si vous avez besoin de valeurs exactes à l’octet près, gardez l’hexadécimal comme source de vérité.

Quelle notation utiliser, et quand

HEX est compact et sans ambiguïté, ce qui explique qu’il règne sur les livrables de design et les feuilles de style. Il est aussi illisible : rien dans #3b82f6 ne vous dit qu’il s’agit d’un bleu de luminosité moyenne, ni comment il se situe par rapport à #2563eb.

RGB expose directement les trois canaux. C’est la bonne notation lorsque vous manipulez les canaux par programme — composition, permutation de canaux, génération d’image — et c’est la forme avec laquelle les API canvas et image travaillent réellement.

HSL est la notation à privilégier quand vous concevez plutôt que vous ne recopiez. La teinte est un angle sur le cercle chromatique (0 pour le rouge, 120 pour le vert, 240 pour le bleu), la saturation indique la quantité de couleur, et la luminosité va du noir à 0 % au blanc à 100 %. Construire une palette devient alors mécanique : fixez la teinte et la saturation, faites varier la luminosité, et vous obtenez une gamme de nuances cohérente. Changer la teinte seule vous donne une couleur d’accent assortie. Faire la même chose à la main en hexadécimal, c’est de l’arithmétique en base 16 sur trois nombres liés entre eux.

CSS accepte les trois notations, ainsi que les formes modernes séparées par des espaces et avec canal alpha — rgb(59 130 246 / 50%). Elles sont équivalentes aux formes à virgules que produit cet outil ; utilisez celle que votre codebase emploie déjà plutôt que de les mélanger. Les fondamentaux de HTML5 expliquent où se placent les valeurs de couleur dans le modèle de document et de style, et les fondamentaux de JavaScript sont le point de départ si vous calculez ces valeurs à l’exécution au lieu de les écrire à la main.

Bon à savoir

La luminosité HSL n’est pas la luminosité perçue. hsl(60, 100%, 50%) (jaune) et hsl(240, 100%, 50%) (bleu) revendiquent la même luminosité et ne se ressemblent en rien — l’œil est bien plus sensible au vert qu’au bleu. C’est pourquoi on ne peut pas juger l’accessibilité à partir du HSL, et pourquoi le vérificateur de contraste calcule plutôt une luminance relative pondérée.

L’opacité ne fait pas partie de cette conversion. L’outil traite des couleurs opaques ; l’hexadécimal à huit chiffres avec canal alpha n’est pas accepté. Gardez l’alpha à part — c’est une instruction de composition, pas une propriété de la couleur.

L’hexadécimal, c’est du sRGB. Des notations à gamut étendu comme oklch() et color(display-p3 ...) peuvent exprimer des couleurs qui n’ont aucun équivalent hexadécimal. Si une valeur provient d’un outil de design à gamut étendu, la convertir en hexadécimal l’écrête.