1. Accueil
  2. Outils
  3. Développeurs et encodeurs
  4. Convertisseur de couleurs CSS

Convertisseur de couleurs CSS

Convertissez n'importe quelle couleur CSS entre HEX, RGB et HSL, avec un aperçu en direct et les ratios de contraste avec du texte blanc et noir.

Gratuit, sans inscriptionFonctionne dans votre navigateurDéveloppeurs et encodeurs

Entrée

Accepte #RGB, #RRGGBB, rgb(113, 148, 48) ou hsl(81, 51%, 38%).

Conversions

HEX-
RGB-
HSL-
Contraste avec du texte blanc-
Contraste avec du texte noir-

Pourquoi les formats de couleur comptent

Une même couleur peut s'écrire de plusieurs façons en CSS. Les outils de design fournissent généralement des codes HEX. Le RGB est pratique quand vous avez besoin de transparence avec rgb() ou rgba(). Le HSL décrit une couleur par sa teinte, sa saturation et sa luminosité, ce qui facilite la création de nuances plus claires et plus foncées d'une couleur de marque. Une conversion fiable entre ces formats garde vos jetons de design cohérents.

Comment utiliser le convertisseur

Collez une valeur HEX, RGB ou HSL, ou choisissez une couleur avec le sélecteur. L'outil affiche la couleur dans les trois formats avec un aperçu, et vous pouvez copier n'importe lequel en un clic. Il indique aussi le rapport de contraste avec du texte blanc et du texte noir, selon la formule WCAG 2, pour que vous voyiez d'un coup d'œil quelle couleur de texte est lisible dessus.

Lire les pastilles de contraste

  • AAA : un rapport de 7:1 ou plus, le niveau le plus strict pour le texte normal.
  • AA : 4,5:1 ou plus, la cible habituelle pour le corps de texte.
  • AA grand texte seulement : 3:1 ou plus, convient aux grands titres mais pas au corps de texte.

Questions fréquentes

Dois-je utiliser le HEX ou le HSL dans mon CSS ?

Les deux fonctionnent dans tous les navigateurs modernes. Le HEX est compact pour les valeurs fixes. Le HSL est plus pratique quand vous voulez ajuster la luminosité ou la saturation, par exemple pour créer des états de survol ou une palette de teintes.

Pourquoi une conversion aller-retour modifie-t-elle légèrement une valeur ?

Les valeurs HSL sont arrondies à l'entier ici, si bien qu'un aller-retour peut décaler un canal d'un cran. La différence n'est pas visible, mais utilisez la valeur HEX ou RGB comme référence.

L'outil prend-il en charge la transparence ?

Il lit les valeurs rgba() et hsla() mais ignore le canal alpha, puisque le contraste et la conversion HEX portent ici sur des couleurs pleines.

Outils connexes

Tous les outils
Traducteur binaireConvertissez du texte, y compris les émojis et les lettres accentuées, en binaire UTF-8, ou décodez du binaire en texte lisible.Convertisseur YAML en JSONCollez un fichier ou un extrait de configuration YAML et convertissez-le en JSON propre, ou retransformez du JSON en YAML, directement dans votre navigateur.Encodeur / décodeur Base64Encodez du texte en Base64 ou décodez du Base64 en texte, avec prise en charge complète de l'UTF-8 et un mode Base64Url sûr pour les URL.Vérificateur de sécurité de site webVérifiez la configuration HTTPS d'un site, ses en-têtes de sécurité, les attributs de ses témoins et le contenu mixte, puis obtenez une note et des correctifs en langage clair pour chaque problème.Créateur de charges utiles de webhookTransformez une URL de webhook et une charge utile JSON en commande cURL ou en extrait fetch prêt à exécuter pour tester Zapier, Make, n8n et vos intégrations sur mesure.Convertisseur hexadécimalConvertissez du texte en hexadécimal et inversement, de l'hexadécimal en décimal et inversement, ou une couleur hexadécimale CSS en valeurs RGB et HSL, directement dans votre navigateur.