Convertisseur HEX en RGB
Saisissez ou collez une couleur en HEX, RGB, HSL ou CMYK : les autres formats se mettent à jour pendant la saisie. Copiez des valeurs CSS prêtes à l’emploi, parcourez les nuances plus claires et plus foncées et vérifiez le contraste avec le texte.
Besoin d’une interface belle et facile à lire ?
Nous concevons et développons des sites et des applications avec un système de couleurs cohérent : palette de marque, contraste accessible, design tokens partagés par les designers et les développeurs. Décrivez votre projet et recevez une estimation.
Merci ! Nous vous répondrons sous un jour ouvré.
En bref : saisissez une couleur dans n’importe quel champ, par exemple #2e5cf2, rgb(46, 92, 242), hsl(226, 88%, 56%) ou cmyk(81%, 62%, 0%, 5%), et le convertisseur remplit instantanément les autres formats. En dessous, vous trouvez les valeurs CSS, OKLCH compris, des nuances plus claires et plus foncées et une vérification du contraste selon les WCAG 2.2.
Comment convertir HEX en RGB
- Saisissez la couleur. Collez un code HEX avec ou sans « # » : 3, 4, 6 ou 8 chiffres sont acceptés. Vous pouvez aussi partir de RGB, HSL, CMYK ou du sélecteur de couleur.
- Lisez le résultat. Les quatre champs se mettent à jour pendant la saisie. Une saisie invalide est signalée et les autres champs conservent la dernière couleur valide.
- Copiez ce dont vous avez besoin. Chaque champ et chaque valeur CSS a un bouton de copie. L’adresse de la page inclut la couleur, vous pouvez donc partager le lien.
- Vérifiez la lisibilité. Le vérificateur de contraste utilise la couleur actuelle comme fond. Définissez la couleur du texte et voyez si la paire respecte les niveaux AA et AAA.
Comment fonctionne la conversion
Un code HEX est la même couleur RGB écrite en base 16 : chaque paire de chiffres représente un canal de 00 à FF, soit de 0 à 255. #2E5CF2 signifie rouge 0x2E = 46, vert 0x5C = 92, bleu 0xF2 = 242. Un code court comme #3AF double chaque chiffre et devient #33AAFF. Un septième et un huitième chiffre ajoutent le canal alpha : #2E5CF280 est le même bleu avec 50 % d’opacité.
| Format | Exemple | Utilisation |
|---|---|---|
| HEX | #2E5CF2 | CSS, Figma, chartes graphiques |
| RGB | rgb(46, 92, 242) | CSS, code Android et iOS, éditeurs d’images |
| HSL | hsl(226, 88%, 56%) | Thèmes CSS : modifier la luminosité en gardant la teinte |
| OKLCH | oklch(54.2% 0.23 265.7) | Échelles de couleurs CSS modernes à luminosité perçue homogène |
| CMYK | cmyk(81%, 62%, 0%, 5%) | Repère approximatif pour l’impression |
HSL décrit la même couleur par sa teinte (0–360°), sa saturation et sa luminosité, ce qui est pratique pour créer des variantes plus claires et plus foncées d’une couleur de marque. OKLCH fait de même dans un espace colorimétrique perceptuel : des pas de luminosité égaux paraissent égaux à l’œil. Il est pris en charge par tous les navigateurs actuels.
À propos du CMYK
Le convertisseur utilise la formule standard indépendante du périphérique : K = 1 − max(R, G, B), puis C, M et Y à partir des canaux restants. Les imprimeurs travaillent avec des profils ICC propres à un papier et à des encres, leurs valeurs peuvent donc différer de quelques pour cent. Utilisez la valeur CMYK comme point de départ et demandez la valeur définitive à votre imprimeur.
Contraste et accessibilité
Les WCAG 2.2 exigent un rapport de contraste d’au moins 4,5:1 pour le texte courant, et de 3:1 pour le grand texte et les éléments d’interface comme les icônes et les bordures de champs. Beaucoup de bleus et de verts de marque sont tout juste à la limite avec du texte blanc. Pour obtenir une palette complète à partir d’une photo ou d’un logo, utilisez le générateur de palette de couleurs. Si votre produit a besoin d’un système de couleurs cohérent, découvrez nos services de design et développement web.
Questions fréquentes
Comment convertir HEX en RGB ?
Divisez le code à six chiffres en trois paires et convertissez chaque paire de l’hexadécimal au décimal. Pour #2E5CF2, cela donne 2E = 46, 5C = 92 et F2 = 242 : la couleur est donc rgb(46, 92, 242). Le convertisseur de cette page le fait instantanément pendant la saisie.
Comment convertir RGB en HEX ?
Convertissez chaque canal de 0–255 en un nombre hexadécimal à deux chiffres et assemblez-les après « # ». Pour rgb(255, 165, 0), on obtient FF, A5 et 00 : le code HEX est donc #FFA500. Saisissez la valeur RGB dans le champ RGB et copiez le code HEX.
Qu’est-ce qu’un code HEX à 8 chiffres ?
Les deux derniers chiffres sont le canal alpha, de 00 (totalement transparent) à FF (totalement opaque). #2E5CF280 est la couleur #2E5CF2 avec environ 50 % d’opacité. Tous les navigateurs modernes prennent en charge les codes HEX à 8 et 4 chiffres en CSS.
HSL est-il meilleur que RGB pour le CSS ?
Ils décrivent les mêmes couleurs. HSL est plus facile à lire et à ajuster à la main : pour éclaircir une couleur, il suffit de modifier la luminosité. Pour les échelles de couleurs et les thèmes, OKLCH est encore mieux, car des pas égaux paraissent égaux à l’œil.
Pourquoi mes valeurs CMYK diffèrent-elles de celles de l’imprimeur ?
Cette page utilise la formule standard sans profil colorimétrique. Les imprimeurs convertissent avec des profils ICC adaptés à leur papier et à leurs encres, et certaines couleurs d’écran, en particulier les bleus et verts vifs, ne peuvent pas être imprimées exactement. Considérez la valeur CMYK comme un repère.
Puis-je partager une couleur avec un lien ?
Oui. Lorsque vous changez de couleur, l’adresse de la page reçoit le code HEX après « # », par exemple /fr/products/hex-to-rgb#2e5cf2. Toute personne qui ouvre le lien voit la même couleur.
Comment vérifier si un texte est lisible sur cette couleur ?
Utilisez le vérificateur de contraste sous le convertisseur. La couleur actuelle est définie comme fond ; choisissez la couleur du texte et consultez le rapport ainsi que sa conformité aux niveaux WCAG AA (4,5:1) et AAA (7:1).