Convertisseur de couleur — convertisseur HEX, RGB, HSL en ligne _

Qu’est-ce que la conversion de couleur ?

Chaque couleur que votre navigateur affiche est en fin de compte un triplet sRGB — trois nombres entre 0 et 255 pour les canaux rouge, vert et bleu, plus une éventuelle alpha. La spécification CSS Color Level 4 définit plusieurs formats textuels qui font des aller-retour vers le même triplet, ainsi que l'espace perceptuellement uniforme OKLCH. Cet outil lit n'importe lequel d'entre eux, les convertit tous, et rapporte le rapport de contraste WCAG 2.1 par rapport à une seconde couleur afin que vous puissiez livrer des interfaces accessibles en toute confiance.

Comment fonctionne la conversion de couleur ?

La conversion est une suite de transformations linéaires et non linéaires bien définies. Chaque étape s'exécute dans votre navigateur — aucune entrée n'atteint jamais nos serveurs :

1. Votre entrée est analysée. L'outil détecte automatiquement les HEX à 3, 4, 6 ou 8 chiffres, les formes fonctionnelles rgb()/rgba()/hsl()/hsla()/hsv()/hwb() en syntaxe traditionnelle à virgules ou en syntaxe moderne à barre oblique pour l'alpha, ou n'importe laquelle des 150 couleurs CSS nommées (rebeccapurple inclus).
2. La couleur analysée est normalisée vers le sRGB canonique — quatre flottants {r, g, b, a} chacun dans la plage 0–1. C'est la source unique de vérité d'où chaque format de sortie est dérivé.
3. HEX provient de l'arrondi de chaque canal à sa valeur d'octet 0–255 et de l'assemblage des chiffres hexadécimaux. RGB / RGBA affichent les mêmes octets. HSL et HSV appliquent les algorithmes standard W3C en coordonnées cylindriques ; HWB dérive la teinte de HSV, la blancheur de min(r, g, b), et la noirceur de 1 - max(r, g, b).
4. CMYK est une approximation naïve — k = 1 - max(r, g, b), puis c, m, y à partir des canaux restants. C'est adapté pour l'aperçu écran mais pas pour l'impression : une vraie sortie CMYK nécessite un profil ICC que cet outil n'incorpore volontairement pas.
5. OKLCH suit le chemin direct de css-color-4 : le sRGB est linéarisé, multiplié par la matrice LMS, élevé à la racine cubique, multiplié par la matrice LMS-vers-OKLab, et enfin converti d'OKLab rectangulaire vers OKLCH polaire. OKLCH est perceptuellement uniforme, ce qui en fait le bon espace pour concevoir des palettes qui paraissent équilibrées à l'œil humain.

Pourquoi utiliser ce convertisseur de couleur ?

• Confidentialité : chaque conversion s'exécute dans votre navigateur en JavaScript pur. La couleur que vous collez ne quitte jamais votre appareil, ce qui compte pour les travaux de marque non publiés, les systèmes de design internes et les maquettes client sous NDA.
• Passage designer-vers-développeur : collez le HEX depuis Figma et récupérez la chaîne rgb() pour une configuration Tailwind, la chaîne hsl() pour une propriété personnalisée CSS, ou la chaîne oklch() pour une palette moderne — tous les formats au même endroit, sans copier-coller entre les onglets.
• Précision WCAG : le vérificateur de contraste utilise la formule exacte de luminance relative WCAG 2.1 et les seuils publiés AA (4,5 / 3,0) et AAA (7,0 / 4,5) pour le texte normal et grand. Le rapport indiqué correspond aux calculatrices manuelles à 0,01 près.
• Mode sombre et dérivation de palette : HSL et OKLCH exposent la clarté comme un canal unique, il est donc simple de déplacer une couleur de marque vers le haut ou le bas de l'axe de clarté pour dériver des jetons assortis en mode sombre ou pour générer une rampe de palette à 10 étapes à partir d'une seule graine.

Quelles sont les applications courantes de la conversion de couleur ?

La conversion de couleurs apparaît à travers le développement web, le design et le travail d'accessibilité :

• Systèmes de design : convertir un HEX de marque en jetons HSL et OKLCH assortis pour une échelle de propriétés personnalisées CSS, puis vérifier que chaque combinaison de jetons passe WCAG AA contre l'arrière-plan de la page.
• Audits d'accessibilité : coller une paire premier plan/arrière-plan depuis un véritable écran produit et lire d'un coup d'œil le rapport de contraste plus les verdicts AA/AAA pour le texte de poids normal et de grand poids.
• Aller-retour entre outils : extraire une couleur depuis une pipette de capture d'écran (HEX), la coller ici, et copier la chaîne hsl() ou oklch() directement dans Tailwind, dans des jetons Figma ou dans un thème CSS-in-JS.

À quoi ressemble un exemple de conversion de couleur ?

Prenons le célèbre rebeccapurple. La recherche de couleur nommée le résout en #663399. La conversion RGB donne rgb(102, 51, 153). La conversion HSL donne hsl(270, 50%, 40%) — une teinte violette, à moitié saturée, à quatre dixièmes de luminosité. Vérifier cette couleur contre le blanc pur avec l'outil de contraste renvoie un rapport proche de 7,39, ce qui franchit AAA (7,0) pour le texte normal et AAA (4,5) pour le grand texte — un choix de premier plan fort et accessible. Faire le tour #663399 via RGB → HSL → RGB → HEX restitue la chaîne d'origine exactement, octet pour octet.

Utilisez ce convertisseur comme référence rapide pour toute couleur que vous rencontrez — dans du code, dans des fichiers de design ou dans une capture d'écran — et le vérificateur de contraste comme contrôle de bon sens avant la livraison. Tout s'exécute localement, rien n'est journalisé, et les calculs de conversion suivent les spécifications publiées par le W3C et WCAG, de sorte que les chiffres correspondent à ce que votre outil d'audit ou les devtools du navigateur rapporteraient.