TF

Design et CSS

Convertisseur de couleurs et vérificateur de contraste

Convertissez les couleurs entre HEX, RGB, HSL, HSV, HWB, CMJN et OKLCH, et vérifiez le contraste WCAG pour un texte accessible.

HEX, rgb(), hsl(), hsv(), hwb(), cmyk(), oklch() ou un nom CSS comme tomato.

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

Teintes et nuances

À quoi sert cet outil ?

Collez une couleur dans n’importe quel format — #ff6347, rgb(255 99 71), hsl(9 100% 64%) ou simplement tomato — et copiez-la dans tous les autres formats. Passez au vérificateur de contraste pour tester texte et fond selon WCAG 2 et obtenir la couleur conforme la plus proche si une paire échoue.

Les écrans mélangent de la lumière rouge, verte et bleue : HEX et RGB décrivent donc les couleurs comme les moniteurs. HSL et HSV s’ajustent plus facilement à la main, le CMJN approche les encres d’impression et OKLCH est un espace perceptuel moderne pris en charge par CSS.

Les rapports de contraste WCAG vont de 1:1 à 21:1. Le texte normal exige au moins 4,5:1 pour AA et 7:1 pour AAA ; le grand texte (24px, ou 18,66px en gras) et les composants d’interface exigent 3:1. Les couleurs translucides sont fusionnées avec le fond avant la mesure.

Comment utiliser l’outil Convertisseur de couleurs et contraste

  1. Saisissez ou collez une couleur, ou choisissez-la avec le sélecteur.
  2. Copiez le format voulu : HEX, RGB, HSL, HSV, HWB, CMJN, OKLCH ou le nom de couleur CSS.
  3. Cliquez sur une teinte ou une nuance pour explorer des versions plus claires ou plus foncées.
  4. Ouvrez le vérificateur de contraste, réglez texte et fond, et voyez s’ils respectent WCAG AA et AAA.
  5. Si une paire échoue, utilisez la couleur suggérée : elle garde la teinte et ajuste la luminosité.

Exemples

Tomato dans d’autres formats

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Questions fréquentes

Comment convertir HEX en RGB ?

Collez le code HEX, par exemple #3366cc, et copiez la ligne RGB : rgb(51 102 204). Chaque paire de chiffres hexadécimaux correspond à un canal de 0 à 255.

Quel rapport de contraste me faut-il ?

Pour le texte courant, au moins 4,5:1 (WCAG AA). Les grands titres et les icônes demandent 3:1. Visez 7:1 (AAA) pour la lecture longue ou les personnes malvoyantes.

La conversion CMJN est-elle fiable pour l’impression ?

C’est une approximation indépendante du matériel. Le rendu réel dépend du papier et du profil de l’imprimante : utilisez le profil de votre imprimeur pour les fichiers finaux.

Qu’est-ce qu’OKLCH ?

OKLCH décrit une couleur par sa luminosité, sa chroma et sa teinte dans un espace perceptuellement uniforme. Il est pris en charge par le CSS moderne et facilite des palettes cohérentes.

Besoin de plus de puissance plus tard ?

Des outils premium, des limites plus élevées et un accès API sont prévus. La V1 reste gratuite et privée dans votre navigateur.