Utilore

Convertisseur de couleur

Saisissez une couleur dans n’importe quelle notation courante — #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214) — et toutes les autres apparaissent, avec les rapports de contraste nécessaires à un texte lisible.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Contraste:

Comment faire

  1. Saisissez ou collez la couleur, ou choisissez-la avec le nuancier.
  2. Lisez HEX, RGB et HSL côte à côte.
  3. Copiez la notation attendue par votre fichier.

Bon à savoir

Trois notations pour une même couleur

HEX est compact et universel en CSS. RGB nomme les canaux explicitement, ce qui compte quand une valeur est calculée plutôt qu’écrite à la main. HSL décrit teinte, saturation et luminosité : c’est la forme à privilégier pour obtenir la même couleur un peu plus claire, puisqu’on modifie un seul nombre au lieu d’en deviner trois.

Le contraste n’est pas un ornement

Selon les WCAG, un texte courant doit atteindre un rapport d’au moins 4,5:1 avec son fond, et un grand texte 3:1. Les deux chiffres affichés ici disent immédiatement si cette couleur supporte du texte blanc, du texte noir, ou ni l’un ni l’autre — avant que la maquette n’arrive chez un développeur.

Sources

Questions fréquentes

Quels formats sont acceptés ?

HEX à trois, quatre, six et huit chiffres, avec ou sans dièse, ainsi que rgb() et rgba() avec virgules ou espaces. L’alpha est conservé et repris dans la valeur HEX.

Pourquoi le HSL affiche-t-il parfois une couleur légèrement différente ?

Les valeurs HSL sont arrondies à l’entier pour rester lisibles ; l’aller-retour peut donc décaler un canal d’une unité. Les valeurs HEX et RGB, elles, sont exactes.

Quelque chose part-il vers un serveur ?

Non. Tout est calculé dans la page : les couleurs d’une identité non publiée restent sur votre machine.

Outils similaires