Outils développeur · 16 outils

Convertisseur de couleurs

Tapez une couleur en HEX, RGB, HSL, HWB ou OKLCH, ou choisissez-en une, pour l'obtenir dans tous les autres formats. Le contrôle du contraste indique si un texte posé dessus respecte les niveaux WCAG.

ENTRÉE

HEX, rgb(), hsl(), hwb() ou oklch(), avec ou sans transparence

Format reconnu : HEX

RÉSULTAT

  • HEX#2445D6
  • RGBrgb(36, 69, 214)
  • HSLhsl(229, 71%, 49%)
  • HWBhwb(229 14% 16%)
  • OKLCHoklch(47.27% 0.2232 266.62)

CONTRASTE (WCAG 2)

  • Avec le blanc

    7,24:1

    • AA : conforme
    • AA grand texte : conforme
    • AAA : conforme
    • AAA grand texte : conforme

  • Avec le noir

    2,89:1

    • AA : non conforme
    • AA grand texte : non conforme
    • AAA : non conforme
    • AAA grand texte : non conforme

  • Avec #F5F6F8

    6,70:1

    • AA : conforme
    • AA grand texte : conforme
    • AAA : non conforme
    • AAA grand texte : conforme

Tout se passe dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à un serveur.

Comment convertir un code couleur

  1. Saisissez une couleur

    Tapez ou collez une valeur comme #2445D6, rgb(36, 69, 214) ou oklch(47% 0.22 267), ou utilisez le sélecteur de couleur.

  2. Copiez le format dont vous avez besoin

    HEX, RGB, HSL, HWB et OKLCH sont affichés ensemble, chacun avec son propre bouton de copie.

  3. Vérifiez le contraste

    Consultez le rapport de contraste avec le blanc, le noir et une couleur de votre choix, avec les résultats WCAG AA et AAA.

Une couleur, cinq notations

HEX et RGB décrivent les composantes rouge, verte et bleue d'une couleur. HSL et HWB la décrivent par sa teinte, plus facile à ajuster à la main. OKLCH est un format CSS plus récent dont la luminosité correspond à la clarté perçue : les palettes construites avec restent homogènes. La transparence est conservée dans tous les formats.

Contraste et WCAG

Les WCAG demandent un rapport de contraste d'au moins 4,5:1 pour le texte normal (AA) et de 7:1 pour AAA. Le grand texte, à partir d'environ 24px ou 19px en gras, doit atteindre 3:1 pour AA et 4,5:1 pour AAA. Les rapports sont arrondis vers le bas : une couleur indiquée comme conforme l'est vraiment.

Questions fréquentes

Pourquoi ma couleur OKLCH a-t-elle l'air différente ?

OKLCH peut décrire des couleurs que les écrans limités à la gamme sRGB ne peuvent pas afficher. Ces couleurs sont ramenées dans la gamme en réduisant leur chroma tout en conservant la luminosité et la teinte, et une note vous le signale.

Comment le contraste des couleurs transparentes est-il vérifié ?

Une couleur transparente est d'abord appliquée sur du blanc, comme elle apparaîtrait sur une page blanche, et c'est ce résultat qui est comparé.

Des données sont-elles envoyées à un serveur ?

Non. Toutes les conversions et tous les contrôles de contraste se font dans votre navigateur.