Convertisseur de couleurs

Tapez n'importe quelle couleur CSS ou choisissez-la, et obtenez-la dans tous les formats à la fois. Testez le contraste sur un fond et générez des nuances plus claires et plus foncées.

Gratuit et privé. Tout se passe dans votre navigateur, rien n'est envoyé.

Comment ça marche

  1. Saisissez une couleurTapez une valeur comme #0d6b57, rgb(13 107 87) ou teal, ou utilisez le sélecteur.
  2. Copiez le format vouluTous les formats se mettent à jour en même temps ; copiez celui qu'il vous faut en un clic.
  3. Testez le contrasteChoisissez une couleur de fond et lisez les résultats WCAG.

Tous les formats à partir d'une seule saisie

Les graphistes transmettent des valeurs HEX, le CSS demande du rgb() ou du hsl(), les design tokens utilisent de plus en plus l'OKLCH et les imprimeurs réclament du CMJN. Tapez la couleur dans n'importe quel format compris par le navigateur, y compris des noms comme rebeccapurple, et tous les autres apparaissent aussitôt, prêts à copier.

L'OKLCH est un espace colorimétrique perceptuel pris en charge par tous les navigateurs récents : des écarts égaux de luminosité paraissent égaux à l'œil. C'est pourquoi la palette de nuances ci-dessous est construite en OKLCH plutôt qu'en mélangeant avec du blanc et du noir.

Un contraste accessible

Le texte doit se détacher de son fond pour les personnes malvoyantes. Le vérificateur de contraste calcule le rapport WCAG et indique si la paire passe le niveau AA (4,5:1 pour le texte normal, 3:1 pour le grand texte) et le niveau AAA (7:1 et 4,5:1). Les couleurs semi-transparentes sont d'abord mélangées au fond, comme le ferait le navigateur.

Questions fréquentes

Quels formats de couleur puis-je saisir ?

Tout ce qui est valide en CSS : HEX à 3, 4, 6 ou 8 chiffres, rgb(), hsl(), hwb(), lab(), oklch() et les noms de couleurs.

La valeur CMJN est-elle exacte pour l'impression ?

C'est une conversion simple, sans profil d'impression. Pour une impression professionnelle, utilisez les valeurs CMJN issues du profil de votre imprimeur.

Quel rapport de contraste faut-il viser ?

Le niveau WCAG AA demande 4,5:1 pour le texte normal et 3:1 pour le grand texte et les éléments d'interface.

Pourquoi l'OKLCH est-il important ?

Il correspond à la façon dont nous percevons la luminosité : les palettes et les dégradés créés en OKLCH paraissent réguliers.