Convertisseur de couleurs : HEX, RGB, HSL

Saisissez une couleur dans n’importe quel format, ou choisissez-la : l’outil la convertit en HEX, RGB, HSL, HSV et CMJN et mesure son contraste.

Saisissez un code : #1e90ff, rgb(30, 144, 255) ou hsl(210, 100%, 56%).

  • HEX—
  • RGB—
  • HSL—
  • HSV—
  • CMJN—

Texte blanc —

Texte noir —

Traitement 100 % local, rien n’est envoyé

Comment ça marche ?

Une couleur d’écran est la combinaison de trois canaux, rouge, vert et bleu, de 0 à 255. Tous les autres formats en découlent :

  • HEX : les trois canaux écrits en hexadécimal (deux chiffres chacun).
  • HSL / HSV : teinte (0 à 360°), saturation et luminosité ou valeur, en pourcentage.
  • CMJN : cyan, magenta, jaune et noir, calculés depuis le RVB.
  • Contraste : rapport des luminances relatives (formule WCAG 2) avec du blanc et du noir.

Les conversions sont arrondies à l’entier. Tout est calculé dans votre navigateur.

Exemples

Convertir le bleu #1e90ff

L’hexadécimal #1e90ff s’écrit rgb(30, 144, 255) ou hsl(210, 100%, 56%). Le contraste d’un texte blanc dessus n’est que de 3,24 : 1 : insuffisant pour un texte courant (minimum 4,5 : 1), alors que le noir atteint 6,49 : 1.

Retrouver le code d’un vert en HSL

hsl(120, 100%, 25%) correspond à #008000, soit rgb(0, 128, 0), le vert « green » du CSS. Saisissez le code HSL tel quel : l’outil affiche tous les autres formats.

Questions fréquentes

Comment convertir un code HEX en RGB ?

Séparez le code en trois paires de chiffres hexadécimaux et convertissez chacune en nombre de 0 à 255 : #1e90ff donne 1e = 30, 90 = 144, ff = 255, soit rgb(30, 144, 255).

Quels formats l’outil comprend-il ?

Les codes hexadécimaux de 3, 4, 6 ou 8 chiffres (avec ou sans #), rgb() et rgba(), hsl() et hsla(), ainsi que trois nombres séparés (30, 144, 255). L’opacité est conservée quand elle est précisée.

Que signifient les niveaux de contraste AA et AAA ?

Ce sont des niveaux des règles d’accessibilité WCAG : un texte courant demande un contraste d’au moins 4,5 : 1 (AA) ou 7 : 1 (AAA) avec son fond, un grand texte 3 : 1 (AA).

À quoi sert la pipette ?

Dans les navigateurs qui la proposent (Chrome, Edge), elle permet de prélever la couleur de n’importe quel pixel de l’écran. Elle n’est affichée que si votre navigateur la prend en charge.

Le CMJN affiché convient-il à l’impression ?

C’est une conversion mathématique simple depuis le RVB, sans profil colorimétrique : pour une impression professionnelle, utilisez le profil fourni par votre imprimeur.

Outils liés