BrowserTools
Publicité
Accueil / Convertisseurs / Convertisseur de couleurs et vérificateur de contraste

Convertisseur de couleurs et vérificateur de contraste

Convertissez les couleurs entre HEX, RGB, HSL et HSV, avec un vérificateur de ratio de contraste WCAG.

Maintenu par BrowserTools · Dernière mise à jour 2026-06-06

Chargement de Convertisseur de couleurs et vérificateur de contraste… Si rien ne se passe, activez JavaScript.

La représentation numérique des couleurs a évolué à travers plusieurs systèmes concurrents, chacun optimisé pour un usage différent. Le format hexadécimal #RRGGBB est apparu aux débuts du HTML dans les années 1990, lorsque le web de Tim Berners-Lee avait besoin d'un moyen concis de spécifier les 16 millions de couleurs que les écrans 24 bits pouvaient afficher. Le format encode les intensités des canaux rouge, vert et bleu sous forme de nombres hexadécimaux à deux chiffres, ce qui le rend compact pour le balisage tout en restant lisible par l'humain. RGB (rouge, vert, bleu) est le modèle de couleur additif utilisé par tous les écrans numériques : mélanger de la lumière à pleine intensité produit du blanc, l'inverse du comportement de l'encre. HSL (teinte, saturation, luminosité) et HSV (teinte, saturation, valeur) sont des transformations cylindriques du RGB qui correspondent davantage à la perception humaine des couleurs, ce qui les rend indispensables pour construire des palettes de design systématiques.

Exemples

Entrée #ff5733
Sortie rgb(255, 87, 51)

Chaque paire hexadécimale correspond à un canal rouge, vert, bleu (0-255).

Entrée rgb(255, 87, 51)
Sortie hsl(11, 100%, 60%)

La même couleur exprimée en teinte, saturation, luminosité.

Questions fréquentes

Des données sont-elles envoyées à un serveur lorsque j'utilise cet outil ?
Non. Toutes les conversions de couleurs et les calculs de contraste se font entièrement dans votre navigateur en JavaScript. Aucune valeur de couleur, aucun code hexadécimal ni aucune autre donnée n'est transmis à un serveur. Vous pouvez utiliser cet outil en toute sécurité avec des couleurs de marque confidentielles.
Comment fonctionne le format de couleur hexadécimal ?
Le format #RRGGBB encode trois canaux de couleur (rouge, vert et bleu), chacun sous forme de nombre hexadécimal à deux chiffres allant de 00 (0 en décimal, aucune intensité) à FF (255 en décimal, intensité maximale). Cela donne 256 valeurs possibles par canal et 256^3 = 16 777 216 couleurs possibles. La forme abrégée #RGB double chaque chiffre, de sorte que #abc se développe en #aabbcc.
Quand dois-je utiliser HSL plutôt que RGB dans mon CSS ?
Le HSL est bien plus intuitif pour un travail systématique sur la couleur. Si vous voulez une version plus claire d'une couleur, augmentez simplement la valeur de luminosité. Pour créer une version plus atténuée, baissez la saturation. Cela rend le HSL idéal pour générer des tokens de design, des systèmes de thèmes et des palettes de couleurs accessibles de façon programmatique, alors que le RGB exige de connaître les relations numériques exactes entre les canaux pour obtenir le même effet.
Quel ratio de contraste WCAG me faut-il pour mon site web ?
Les WCAG 2.1 de niveau AA exigent un ratio de contraste d'au moins 4,5:1 pour le texte de taille normale et 3:1 pour le grand texte (18 pt ou 14 pt en gras). Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. La plupart des exigences légales d'accessibilité, dont la directive européenne sur l'accessibilité du web et la Section 508 aux États-Unis, prennent la norme AA comme référence minimale.
Pourquoi les mêmes valeurs HSL paraissent-elles parfois différentes selon les navigateurs ?
Le HSL traditionnel opère dans l'espace colorimétrique sRGB. Les navigateurs modernes prennent de plus en plus en charge des gamuts plus larges (Display P3, Rec. 2020) via la spécification CSS Color Level 4. Les couleurs définies avec oklch() ou color(display-p3 ...) peuvent paraître plus vives que leurs équivalents sRGB sur les écrans à large gamut, ce qui explique pourquoi les mêmes valeurs numériques HSL en sRGB peuvent paraître subtilement différentes sur un iPhone par rapport à un moniteur standard.
Quelle est l'histoire des couleurs web ?
Les 16 premières couleurs HTML nommées (comme red, blue, lime) provenaient de la palette CGA de l'IBM PC d'origine. Netscape Navigator 1.1 en 1994 a introduit le format hexadécimal #RRGGBB en tant qu'extension, et Internet Explorer l'a rapidement adopté. Le W3C a normalisé l'ensemble complet des 140 couleurs nommées et la notation hexadécimale dans CSS1 en 1996. La spécification CSS Color moderne prend désormais en charge des milliers de couleurs nommées et plusieurs espaces colorimétriques.
Puis-je convertir des couleurs avec transparence ?
Oui. Saisissez une couleur hexadécimale avec un canal alpha en utilisant le format à huit chiffres #RRGGBBAA, ou utilisez la notation RGBA lors de la saisie d'une valeur RGB. L'outil conserve et convertit le canal alpha dans tous les formats. Notez que le HSL et le HSV n'ont pas de canal alpha natif, de sorte que l'alpha est affiché comme une valeur distincte lorsque vous convertissez vers ces formats.
En quoi cet outil diffère-t-il des DevTools du navigateur ?
Les sélecteurs de couleurs des DevTools du navigateur sont excellents, mais limités aux couleurs déjà présentes dans votre CSS. Cet outil vous permet de saisir librement n'importe quelle valeur de couleur, quelle que soit son origine (un fichier de design, un sélecteur de couleur sur une capture d'écran, une charte de marque imprimée), et de voir instantanément tous les formats équivalents ainsi que le ratio de contraste par rapport à toute couleur d'arrière-plan que vous indiquez.
Quelles valeurs de couleur un développeur devrait-il connaître par cœur ?
Quelques-unes sont universellement utiles : #000000 est le noir, #ffffff le blanc, #ff0000 le rouge pur, #00ff00 le vert pur, #0000ff le bleu pur et #808080 le gris moyen. En termes WCAG, du texte noir sur fond blanc a un ratio de contraste de 21:1, soit le maximum théorique.
Quelle est une erreur fréquente de débutant avec les couleurs hexadécimales ?
Une erreur très courante consiste à mal comprendre le développement de la forme abrégée #RGB. #fff se développe en #ffffff (blanc), et non en #f0f0f0. Une autre erreur fréquente est de confondre le mélange additif du RGB avec le mélange soustractif de la peinture : en RGB, combiner le rouge (#ff0000) et le vert (#00ff00) produit du jaune (#ffff00), et non du brun, car les écrans numériques émettent de la lumière au lieu de l'absorber.

À propos de Convertisseur de couleurs et vérificateur de contraste

Les designers utilisent les codes hexadécimaux pour rédiger des feuilles de style CSS et choisir des couleurs de marque dans des outils comme Figma ou Sketch. Les développeurs front-end passent au RGB ou au RGBA lorsqu'ils ont besoin d'appliquer une opacité ou d'effectuer un mélange de couleurs programmatique dans canvas ou WebGL. Le HSL est privilégié pour générer des échelles de couleurs de façon algorithmique ; par exemple, en gardant la teinte fixe tout en faisant varier la luminosité par paliers afin de créer une rampe de nuances cohérente. Le HSV est le format natif de la plupart des sélecteurs de couleurs, car son axe de valeur correspond intuitivement au curseur de luminosité. Les ingénieurs en accessibilité s'appuient sur les calculs de ratio de contraste pour garantir que le texte reste lisible pour les utilisateurs malvoyants ou daltoniens, une exigence imposée par les WCAG 2.1 et appliquée aux sites du secteur public dans l'ensemble de l'UE et des États-Unis.

Cet outil convertit toute couleur que vous saisissez vers les quatre notations simultanément et calcule également le ratio de contraste WCAG entre votre couleur et tout arrière-plan que vous indiquez. Tout s'exécute dans votre navigateur sans aucune requête vers un serveur. Vous pouvez coller un code hexadécimal, saisir des valeurs RGB ou entrer des coordonnées HSL, et l'outil vous montre instantanément toutes les représentations équivalentes. Le vérificateur de contraste vous donne un résultat réussi ou échoué par rapport aux seuils AA et AAA des WCAG.

Une erreur courante consiste à confondre HSL et HSV : tous deux utilisent la teinte et la saturation, mais leur troisième axe diffère de manière importante. En HSL, une luminosité de 100 % produit toujours du blanc, quelles que soient la teinte ou la saturation. En HSV, une valeur de 100 % produit la teinte pure (luminosité maximale), et non du blanc. Une autre erreur fréquente est d'oublier que la forme abrégée hexadécimale #RGB se développe en #RRGGBB en doublant les chiffres, de sorte que #f09 signifie #ff0099, et non #f00009. Lorsque vous travaillez avec l'opacité, notez que le CSS accepte aussi bien l'hexadécimal à huit chiffres (#RRGGBBAA) que la fonction rgba(), mais certains navigateurs et outils de design plus anciens ne prennent en charge que la forme rgba().

Comment 16 millions de couleurs ont fini dans un code de six caractères

Avant le web, la couleur sur les écrans d'ordinateur était une affaire de contraintes sévères. La carte graphique CGA d'origine, de 1981, n'offrait que 16 couleurs, soigneusement choisies pour être distinguables sur les moniteurs de l'époque. La norme EGA a porté ce nombre à 64, et le VGA a fini par offrir 256 couleurs issues d'une palette fixe. Ce n'est que lorsque les écrans en couleurs vraies 24 bits sont devenus abordables au début des années 1990 que le spectre complet de 16 777 216 couleurs est devenu accessible au matériel grand public, et le web a eu besoin d'une notation pour les décrire toutes.

Les ingénieurs de Netscape Navigator ont choisi l'hexadécimal parce qu'il correspondait parfaitement au matériel sous-jacent : chacun des trois canaux de couleur 8 bits (0-255) peut s'exprimer par exactement deux chiffres hexadécimaux (00-FF), donnant un code de six caractères compact et sans ambiguïté. Le format est apparu dans Netscape 1.1 vers 1994 et a été rapidement copié par Internet Explorer. Le W3C l'a formalisé dans la spécification CSS1 en 1996, ancrant sa place comme abréviation universelle de la couleur web. Les mots-clés de couleurs nommées (red, blue, aqua) ont été hérités directement des 16 couleurs VGA standard, avec des couleurs supplémentaires tirées du système de fenêtrage X11 utilisé sur les stations de travail Unix.

Le basculement vers des espaces colorimétriques perceptuellement uniformes constitue le chapitre suivant de l'histoire de la couleur web. Le RGB et le HSL traditionnels sont mathématiquement simples mais perceptuellement non uniformes : un pas de dix unités de luminosité en HSL paraît très différent selon la teinte, ce qui complique les calculs fiables d'accessibilité. La spécification CSS Color Level 4 introduit OKLCH et OKLAB, des espaces colorimétriques conçus pour que des différences numériques égales correspondent à des différences perçues égales. Ces espaces sont déjà pris en charge par les navigateurs modernes et représentent l'évolution la plus marquante de la manière dont les développeurs spécifient la couleur depuis l'introduction du format hexadécimal d'origine il y a trente ans.

Outils associés

Convertisseur d'unités

Convertissez entre les unités courantes de longueur, de masse, de température, de temps et de stockage numérique.
Publicité
Publicité
Publicité