Convertisseur de couleurs 🔒 Vos données ne quittent jamais votre navigateur.
HEX ↔ RGB ↔ HSL, avec aperçu en direct et pipette.
Vérificateur de contraste
Portez ce vieux whisky au juge blond qui fume.
Portez ce vieux whisky au juge blond qui fume.
Nuances et teintes
Sélectionnez une nuance pour la charger comme couleur courante.
À propos de cet outil
Collez une couleur dans n'importe quel format CSS — hex (#1e90ff ou #19f), rgb(), hsl() ou un nom comme dodgerblue — et obtenez tous les formats avec copie en un clic, plus un échantillon en direct. HEX est l'export des outils de design, RGB le format des APIs JS, HSL celui que les humains comprennent (teinte, saturation, luminosité).
La conversion utilise le moteur CSS du navigateur : tout ce qui est valide dans une feuille de style fonctionne ici. 100 % côté client.
Questions fréquentes
Mes données de couleur sont-elles envoyées quelque part ?
Non. Chaque conversion, vérification de contraste et palette est calculée localement dans votre navigateur — rien de ce que vous saisissez ne quitte jamais votre appareil.
Quelle est la différence entre HSL et HSV ?
Les deux décrivent teinte et saturation, mais la troisième valeur du HSL est la luminosité (proximité du noir ou du blanc), tandis que celle du HSV est la valeur (proximité uniquement du noir, en restant au maximum de luminosité en haut). Le HSV correspond souvent aux sélecteurs de couleur des outils de design ; le HSL correspond souvent aux conventions CSS.
Pourquoi mon code hexadécimal comporte-t-il 8 chiffres au lieu de 6 ?
La paire supplémentaire encode l’alpha (transparence) sous la forme #rrggbbaa. Elle n’apparaît que lorsque la couleur d’entrée a un canal alpha inférieur à 1 — les couleurs totalement opaques restent à 6 chiffres.
Que signifient les badges AA et AAA sous le vérificateur de contraste ?
Ce sont les seuils de contraste WCAG 2 : AA est le minimum que la plupart des sites devraient atteindre (4,5:1 pour le texte normal, 3:1 pour le grand texte ou les composants d’interface), AAA est l’objectif plus strict (7:1 / 4,5:1). Un badge vert signifie que votre paire premier plan/fond passe ce niveau.
Qu’est-ce que l’OKLCH et pourquoi l’utiliser plutôt que le HSL ?
L’OKLCH est un espace colorimétrique perceptuellement uniforme : des pas égaux en luminosité ou en chroma paraissent tout aussi différents à l’œil humain, ce que le HSL ne garantit pas. Il est de plus en plus utilisé en CSS moderne pour créer des échelles de couleurs et des dégradés sans zones sombres ou ternes inattendues.