DevToolPal
FR

Convertisseur de couleurs (HEX, RGB, HSL)

Convertissez des couleurs entre HEX, RGB, HSL, HSV et CMJN, avec aperçu en direct et contraste sur fond blanc et noir.

Traitement local, rien n'est envoyé

Options

Couleur

Résultat

Le résultat s'affiche ici

À quoi ça sert

Le convertisseur de couleurs prend une couleur dans n’importe quelle notation CSS courante et l’affiche d’un coup dans toutes les autres : HEX, RGB, HSL, HSV et CMJN. Il montre aussi un aperçu, le nom de couleur CSS lorsqu’il existe une correspondance exacte, et le rapport de contraste sur blanc et sur noir pour vérifier la lisibilité.

Mode d’emploi

  1. Saisissez ou collez une couleur dans le champ Couleur, ou utilisez le sélecteur de couleur juste à côté.
  2. Toutes les notations se mettent à jour pendant la saisie. Cliquez sur Copier à côté de celle dont vous avez besoin.
  3. Activez Hex en majuscules si votre charte écrit l’hexadécimal en capitales.
  4. Vérifiez les lignes de contraste avant d’utiliser la couleur pour du texte : un badge vert signifie que le niveau WCAG AA est respecté.

Exemple

#1e90ff correspond à la couleur CSS dodgerblue. Sa conversion donne :

  • RGB : rgb(30, 144, 255)
  • HSL : hsl(210, 100%, 55.9%)
  • HSV : hsv(210, 88.2%, 100%)
  • CMJN : cmyk(88%, 44%, 0%, 0%)

Son contraste sur blanc est de 3.24:1, ce qui suffit pour de grands titres mais pas pour du texte courant.

Les modèles de couleur en bref

  • HEX et RGB décrivent la quantité de lumière rouge, verte et bleue émise par un écran. C’est ce qu’utilisent en interne les navigateurs et les outils de design.
  • HSL décrit la teinte (l’angle sur le cercle chromatique), la saturation et la luminosité, ce qui permet de créer facilement des nuances plus claires ou plus foncées d’une même couleur.
  • HSV (aussi appelé HSB) est utilisé par la plupart des sélecteurs de couleur des logiciels de design.
  • CMJN (CMYK en anglais) décrit les encres cyan, magenta, jaune et noir pour l’impression.

Les couleurs avec transparence, comme #1e90ff80 ou rgb(30 144 255 / 50%), sont affichées avec un canal alpha en HEX, RGB et HSL.

FAQ

› Comment convertir une couleur HEX en RGB ?

Découpez les six chiffres hexadécimaux en trois paires et lisez chaque paire comme un nombre de 0 à 255. Pour #1e90ff, cela donne 1e = 30, 90 = 144 et ff = 255, donc rgb(30, 144, 255). Cet outil le fait pour vous pendant la saisie.

› Quels formats puis-je coller ?

Du hexadécimal avec ou sans # (3, 4, 6 ou 8 chiffres), rgb() et rgba(), hsl() et hsla() en syntaxe avec virgules ou avec espaces, des pourcentages, des unités d'angle comme deg et turn, ainsi que les 148 noms de couleurs CSS.

› Que signifie le rapport de contraste ?

C'est le contraste WCAG 2 entre la couleur et un fond blanc ou noir. Le texte courant doit atteindre au moins 4.5:1 pour le niveau AA ; le grand texte (environ 24px, ou 19px en gras) doit atteindre 3:1.

› Pourquoi le CMJN n'est-il qu'approximatif ?

Les imprimeurs utilisent des profils d'encre qui dépendent du papier et de la presse. Le CMJN affiché ici suit la formule standard indépendante du périphérique : un bon point de départ, mais pas un substitut à un profil d'impression.