Développeur 🔒 Fonctionne dans votre navigateur — aucune donnée envoyée

Convertisseur de Couleurs

Convertissez HEX, RGB, HSL, HSV, CMJN et OKLCH, créez des palettes et vérifiez le contraste — dans le navigateur.

Couleur d'entrée

Sélecteur :

Saisissez une couleur à convertir...

Comment Utiliser

1. Collez une couleur dans n'importe quelle notation, ou choisissez-la avec le sélecteur : Détection automatique trouve le format.
2. L'onglet Formats liste HEX, RGB, HSL, HSV, CMJN et OKLCH, chacun avec son bouton Copier.
3. L'onglet Palette construit une échelle de onze teintes et nuances, plus les harmonies complémentaire, analogue, triadique et tétradique.
4. L'onglet Contraste mesure le rapport WCAG sur n'importe quel fond et marque les seuils AA et AAA.
Tout s'exécute dans votre navigateur : rien n'est envoyé à un serveur.

Questions Fréquentes

Quels formats de couleur sont pris en charge ?

L entrée est détectée automatiquement : HEX avec ou sans #, rgb() et rgba(), hsl() et hsla(), les valeurs modernes oklch(), hwb() et lab(), ainsi que les 148 noms de couleurs CSS. En sortie : HEX, RGB, HSL, HSV, CMJN et OKLCH, avec le canal alpha conservé.

Puis-je choisir une couleur visuellement plutôt que de saisir des valeurs ?

Oui, utilisez le sélecteur de couleur à côté du champ de saisie — il remplit automatiquement la valeur HEX et la convertit.

Prend-il en charge les codes HEX abrégés comme #FFF ?

Oui, les codes HEX abrégés à 3 chiffres sont automatiquement développés en leur équivalent à 6 chiffres.

Cet outil est-il précis pour le travail de design ?

Oui, les conversions utilisent les mathématiques standard de l'espace colorimétrique et correspondent aux valeurs obtenues dans des outils de design comme Figma ou Photoshop.

Peut-il construire une palette ?

Oui. L onglet Palette transforme votre couleur en une échelle de onze paliers numérotés de 50 à 950, plus les harmonies complémentaire, analogue, triadique, complémentaire divisée et tétradique. Copier en CSS copie toute l échelle sous forme de propriétés personnalisées.

Vérifie-t-il le contraste pour l accessibilité ?

Oui. L onglet Contraste donne le rapport WCAG sur n importe quel fond, marque AA et AAA pour le texte courant, le grand texte et les éléments non textuels, et propose la nuance la plus proche de la même teinte qui passe lorsque la combinaison échoue.

Comment convertir HEX en RGB ?

Collez le code HEX, avec ou sans #, et la valeur RGB apparaît aussitôt à côté de HSL, HSV, CMJN et OKLCH. Un HEX à 4 ou 8 chiffres conserve son alpha en rgba().

Convertit-il en CMJN pour l'impression ?

Oui. Le CMJN est affiché à chaque conversion. C'est une conversion mathématique : pour un travail où la couleur est critique, comparez avec un nuancier imprimé.

Convertisseur de couleurs - HEX vers RGB, RGB vers HEX et HSL en ligne

Mis à jour le 30 septembre 2026 · Par Saman

L'outil de design vous donne un format de couleur, le CSS en attend un autre et l'API canvas un troisième. Ce convertisseur de couleurs gratuit accepte les trois notations courantes - #0A84FF, rgb(10,132,255) ou hsl(210,100%,52%) - et renvoie l'équivalent exact dans le format dont vous avez réellement besoin.

Collez la valeur, choisissez le format de sortie et cliquez sur Convertir. Rien à installer, aucune inscription, et comme la conversion s'exécute dans le navigateur, elle fonctionne aussi hors connexion.

Une couleur HEX, ce sont trois paires de chiffres hexadécimaux pour le rouge, le vert et le bleu. #0A84FF vaut rgb(10, 132, 255), et la même couleur écrite en HSL donne hsl(210, 100%, 52%).

Les trois formats et leurs points forts

Format	Écriture	Idéal pour
HEX	`#0A84FF`	Livrables de design, chartes graphiques, partout où une couleur est notée ou collée
RGB	`rgb(10, 132, 255)`	Canvas, SVG, traitement d'image et tout code qui manipule les canaux
HSL	`hsl(210, 100%, 52%)`	Systèmes de design : ajuster la luminosité pour le survol, l'état désactivé et le mode sombre

Tous les formats renvoyés par le convertisseur

Inutile de préciser ce que vous collez : Détection automatique lit un code HEX avec ou sans #, les syntaxes à virgules et à espaces de rgb() et hsl(), les valeurs modernes oklch(), hwb() et lab(), ainsi que les 148 noms de couleurs CSS. À côté de HEX, RGB et HSL, vous obtenez HSV pour les sélecteurs, CMJN pour tout ce qui part à l'impression, oklch() pour des jetons de design perceptuellement réguliers, et le nom de couleur CSS le plus proche. Le canal alpha - rgba(), hsla() ou un HEX à huit chiffres - est conservé au lieu d'être perdu.

Comment convertir une couleur

Collez votre couleur dans n'importe quelle notation, ou choisissez-la avec le sélecteur - Détection automatique trouve le format. Dans les navigateurs qui le permettent, comme Chrome et Edge sur ordinateur, Prélever à l'écran récupère la couleur de n'importe quel pixel de l'écran ; ailleurs, le bouton n'apparaît pas.
L'onglet Formats liste HEX, RGB, HSL, HSV, CMJN et OKLCH ; copiez chaque ligne avec le bouton voisin. Il nomme aussi la couleur : Nom CSS si elle correspond exactement à une couleur nommée de CSS, sinon Le plus proche.
L'onglet Palette fournit une échelle de teintes et de nuances prête à l'emploi, plus les harmonies complémentaire, analogue, triadique et tétradique.
Dans l'onglet Contraste, définissez la couleur de fond et lisez le rapport WCAG avec ses verdicts AA et AAA.
Aléatoire pour explorer, Effacer pour repartir de zéro avant la valeur suivante.

Comment fonctionne un code couleur HEX

Une couleur HEX se compose de trois paires de chiffres hexadécimaux, une par canal - rouge, vert et bleu - chaque paire couvrant la plage 00 à FF, soit 0 à 255 en décimal. #FF0000 est un rouge pur, #000000 le noir et #FFFFFF le blanc. Lorsque les trois paires répètent le même chiffre, la forme courte fonctionne : #FFF équivaut à #FFFFFF. Un code à quatre ou huit chiffres ajoute un canal alpha : #0A84FF80 est donc le même bleu à environ 50% d'opacité.

Pourquoi HSL est plus intuitif

HSL décrit une couleur comme le font les humains : la teinte comme un angle sur la roue chromatique, la saturation comme intensité, la luminosité comme proximité du blanc ou du noir. C'est donc le choix pratique pour bâtir une palette. Prenez la teinte de votre marque, conservez la saturation et ne faites varier que la luminosité pour obtenir un état survolé, un état désactivé, une bordure et une variante mode sombre qui appartiennent visiblement à la même famille. Faire pareil en HEX revient à deviner six chiffres.

Construire une palette complète à partir d'une couleur

L'onglet Palette transforme une seule couleur de marque en la série dont vous avez réellement besoin. L'échelle Teintes et nuances conserve la teinte et la saturation et ne fait varier que la luminosité sur onze paliers, numérotés de 50 à 950 comme dans la plupart des systèmes de design : survol, bordure, état désactivé et variante sombre appartiennent visiblement à la même famille. Copier en CSS place toute l'échelle dans le presse-papiers sous forme de propriétés personnalisées, prêtes pour :root.

Sous l'échelle figurent les harmonies du cercle chromatique : complémentaire (teinte opposée), analogue (voisines à 30 degrés), triadique et Complémentaire divisée pour des accents équilibrés, et tétradique pour un schéma à quatre couleurs. Un clic sur un échantillon copie son HEX, un double-clic en fait la couleur courante.

Vérifier le contraste avant la mise en ligne

L'onglet Contraste mesure le rapport de contraste WCAG entre votre couleur et n'importe quel fond. Il affiche le rapport à deux décimales et marque chaque seuil comme réussi ou échoué : AA texte normal à 4,5:1, AA grand texte à 3:1, AAA texte normal à 7:1, AAA grand texte à 4,5:1 et Composants d'interface, comme les icônes et les bordures de champs, à 3:1. Inverser échange les couleurs du texte et du fond en un clic. Un aperçu montre la combinaison en 16px et en 24px gras, car un rapport insuffisant pour du texte courant peut convenir à un titre.

Lorsque la combinaison ne passe pas, l'outil propose la nuance la plus proche de la même teinte qui atteint 4,5:1 : vous corrigez le contraste sans renoncer à votre couleur de marque. Une couleur translucide est d'abord composée sur le fond, car c'est ce que voit le lecteur ; tester la valeur rgba() brute serait trop optimiste.

Où la conversion de couleurs intervient

Faire passer les couleurs de marque d'un fichier de design vers des propriétés CSS personnalisées.
Définir fillStyle sur un canvas ou un attribut de couleur en SVG, qui préfèrent RGB.
Construire des gabarits d'e-mail HTML, où HEX reste la notation la plus sûre selon les clients.
Générer un ensemble cohérent de nuances claires et foncées pour un système de design.
Choisir des palettes de graphiques et de tableaux de bord où les teintes doivent être régulièrement espacées.
Traduire une couleur issue d'une capture d'écran ou d'un PDF de marque en valeur exploitable dans le code.

Couleur et lisibilité

Convertir une couleur ne dit pas si un texte sera lisible dessus. Le contraste dépend de la luminance relative, et les WCAG demandent au moins 4,5 pour 1 pour le texte courant et 3 pour 1 pour le grand texte. La luminosité HSL est une première approximation utile - si deux valeurs de luminosité sont proches, le contraste est presque certainement insuffisant - et l'onglet Contraste tranche exactement, pour n'importe quelle paire, avant la mise en ligne.

Détails à connaître

Arrondis. HSL utilise des degrés et pourcentages entiers : convertir HEX vers HSL puis revenir peut décaler un canal d'une unité. Gardez un format comme référence.
Alpha. rgba() et le HEX à huit chiffres portent l'opacité ; un HEX à six chiffres ne peut pas la représenter.
Pourcentages en RGB. rgb(100%, 0%, 0%) est du CSS valide et signifie la même chose que rgb(255,0,0).
Gamut étendu. Des fonctions CSS récentes comme oklch() et color(display-p3 ...) expriment des couleurs hors sRGB que HEX ne peut pas atteindre.
Couleurs nommées. Les mots-clés CSS comme tomato correspondent à des valeurs HEX fixes, mais restent limités et s'intègrent mal à un système.

Exécution locale

La conversion est un simple calcul effectué dans votre navigateur. Aucune couleur collée n'est téléversée, ce qui compte lorsque vous travaillez sur une palette de marque encore confidentielle.

La formule HEX vers RGB, et la conversion en code

Un code HEX, ce sont trois octets écrits en base 16. Découpez #0A84FF en 0A, 84 et FF, convertissez chaque paire en décimal (0A = 10, 84 = 132, FF = 255) et vous obtenez rgb(10, 132, 255). Dans l'autre sens, écrivez chaque canal sur deux chiffres hexadécimaux et complétez par un zéro s'il est inférieur à 16.

Langage	HEX vers RGB	RGB vers HEX
JavaScript	`parseInt(hex.slice(1, 3), 16)` pour le rouge, puis 3-5 et 5-7	`'#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('')`
Python	`tuple(int(h[i:i+2], 16) for i in (0, 2, 4))`	`'#%02x%02x%02x' % (r, g, b)`
PHP	`sscanf('#0A84FF', '#%02x%02x%02x')`	`sprintf('#%02x%02x%02x', $r, $g, $b)`
CSS (navigateurs récents)	`rgb(from #0A84FF r g b)`	inutile : les deux notations sont des valeurs de couleur valides

Outils complémentaires

Le travail front-end s'arrête rarement à la couleur. Mettez en forme vos tokens de design avec le formateur JSON, intégrez une petite icône en data URI avec l'encodeur Base64, repérez tous les codes couleur d'une feuille de style avec le testeur de regex et convertissez vos images avec le convertisseur d'images Pour transformer ces couleurs en dégradés et en ombres, utilisez le générateur CSS.