Convertisseur HEX vers RGB, gratuit

Comment fonctionne la conversion HEX vers RGB

Les couleurs HEX utilisent une chaîne hexadécimale à six chiffres (#RRGGBB) où chaque paire représente les canaux rouge, vert et bleu. Les valeurs vont de 00 (0) à FF (255).

Le RGB utilise trois nombres décimaux (0 à 255) pour chaque canal. Par exemple, #2b7190 se décompose en R:43, G:111, B:142.

Questions fréquentes

Comment convertir HEX en RGB manuellement ?

Découpez le code hex en trois paires (par ex. #FF8800 → FF, 88, 00), puis convertissez chaque paire de la base 16 vers la base 10 : FF = 255, 88 = 136, 00 = 0. Le résultat est rgb(255, 136, 0).

Et les codes HEX à 3 chiffres ?

Le HEX à 3 chiffres est un raccourci où chaque chiffre est doublé : #F80 = #FF8800. Ce convertisseur gère les deux formats automatiquement.

Quand utiliser HEX ou RGB ?

Le HEX est plus compact et populaire en CSS. Le RGB est préférable quand vous devez manipuler les canaux individuellement en code ou utiliser rgba() pour la transparence.

Ce qu'est réellement la notation hex

Une couleur hex est une représentation en base 16 d'une couleur RGB sur 24 bits. Six chiffres après le #, trois paires : rouge, vert, bleu. Chaque paire est un nombre de 00 à ff : un octet (8 bits) par canal, trois canaux, 24 bits au total. C'est exactement assez pour encoder n'importe laquelle de 2²⁴ = 16 777 216 couleurs distinctes. C'est la plage « couleurs vraies » / « millions de couleurs » qui constitue la référence des écrans grand public depuis la fin des années 1990.

Le signe dièse ne fait pas partie de la valeur : c'est un préfixe syntaxique qui indique à l'analyseur CSS que « ce qui suit est une couleur hex, et non un nom de variable ». Sans lui, une chaîne comme ff0000 pourrait être ambiguë pour l'analyseur lexical. Les chiffres 0-9 conservent leur sens décimal ; les lettres A-F (insensibles à la casse en CSS) représentent les décimaux 10-15. Ainsi, f vaut 15, et ff vaut 15 × 16 + 15 = 255.

Le calcul, avec des exemples concrets

Chaque paire hex de deux chiffres correspond à un décimal 0-255 par la formule (high_digit × 16) + low_digit, où chaque chiffre est interprété comme 0-15 (A = 10 jusqu'à F = 15) :

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43 (le canal rouge de l'échantillon #2b7190 par défaut ci-dessus)
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

En JavaScript, toute l'analyse tient en deux lignes. const n = parseInt(hex.slice(1), 16); suivi de const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff]; : c'est essentiellement le code substantiel de tout convertisseur hex vers RGB sur le web. Le sens inverse est '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

Raccourcis à 3, 4 et 8 chiffres

CSS autorise des formes abrégées lorsque les canaux sont symétriques :

• 3 chiffres (#RGB) : chaque chiffre est dupliqué pour former le code équivalent à 6 chiffres. #F00 → #FF0000 ; #FFF → #FFFFFF ; #369 → #336699. Cette forme est pratique pour les couleurs « rondes » appréciées des designers, mais ne peut exprimer que 4 096 valeurs uniques, pas 16,7 millions : il n'existe pas de raccourci pour #778899 car les paires diffèrent.
• 8 chiffres (#RRGGBBAA) : identique à 6 chiffres plus une paire alpha. 00 = entièrement transparent, FF = entièrement opaque, 80 ≈ 50 % d'opacité. Fonctionnellement identique à rgba(255, 0, 0, 0.5), mais plus compact.
• 4 chiffres (#RGBA), raccourci par duplication de la forme à 8 chiffres. #F00A → #FF0000AA.

Le raccourci à 3 chiffres existait dans CSS Level 1 (1996). Les formes alpha à 4 et 8 chiffres sont arrivées bien plus tard dans le CSS Color Module Level 4, avec une large disponibilité multinavigateur depuis mi-2015 environ.

Les couleurs nommées et l'histoire de rebeccapurple

Avant que le hex ne devienne l'idiome web par défaut, les couleurs nommées étaient la norme. HTML 4.01 (décembre 1999) spécifiait 16 couleurs nommées : black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua, fondées sur les 16 couleurs standard de la palette VGA de Windows. CSS 2.1 a ajouté orange comme 17e. Le CSS Color Module Level 3 a ensuite formellement adopté environ 130 noms supplémentaires issus du fichier X11 rgb.txt (que Mosaic et les premières versions de Netscape ont hérité de leurs racines dans le système X Window), portant le total à environ 147-148 selon la façon dont on compte les alias comme cyan/aqua et gray/grey.

Le CSS Color Module Level 4 en a ajouté une de plus, avec une histoire attachée. Rebecca Meyer était la fille de six ans d'Eric A. Meyer, une autorité de la première heure sur CSS et un participant au W3C. Elle est morte d'un cancer du cerveau le 7 juin 2014, le jour de son sixième anniversaire. Eric a écrit sur son blog la même semaine : « Elle a atteint l'âge de six ans. Pendant presque douze heures, elle a eu six ans. » Un membre de la communauté a proposé d'ajouter sa couleur préférée, un violet aubergine profond, hex #663399, sous le nom beccapurple ; Eric a accepté à une condition : ce devait être rebeccapurple, et non beccapurple, parce que Rebecca elle-même avait récemment annoncé qu'elle était désormais trop grande pour ce nom de bébé. Le CSS Working Group a approuvé le changement le 22 juin 2014, deux semaines après sa mort. WebKit et d'autres moteurs de navigateur ont livré la prise en charge en quelques jours. C'est la seule couleur CSS nommée d'après une personne, un discret mémorial dans tous les navigateurs modernes.

sRGB : l'espace colorimétrique implicite de tout code hex

Lorsque vous écrivez #FF5733 en CSS, vous ne spécifiez pas seulement un nombre : vous le spécifiez dans l'espace colorimétrique sRGB. C'est implicite ; le navigateur interprétera votre valeur hex comme du sRGB, à moins que vous n'utilisiez l'une des nouvelles fonctions color() pour en spécifier autrement.

sRGB a été proposé conjointement par Hewlett-Packard et Microsoft en 1996 et adopté sous le nom d'IEC 61966-2-1:1999, un espace colorimétrique unique et indépendant du périphérique, conçu autour de la courbe de réponse du moniteur CRT typique de l'époque. Il partage ses chromaticités primaires avec l'ITU-R BT.709 (la norme TVHD) au point blanc D65 (6500 K). Le W3C a explicitement défini sRGB comme l'espace colorimétrique par défaut du web ; tous les codes hex, toutes les valeurs rgb(), toutes les images JPEG classiques et PNG non balisées sont interprétés comme du sRGB.

Limite assumée : sRGB couvre environ 35,9 % du diagramme des couleurs visibles CIE 1931. Il existe des couleurs présentes dans la nature, affichables par les écrans OLED de téléphone modernes, mais qui ne peuvent pas être spécifiées en notation hex : verts émeraude saturés, teintes de coucher de soleil rouge-orangé vives, peintures fluorescentes. Le CSS Color Module Level 4 a introduit de nouveaux espaces pour elles, accessibles via la fonction color() : Display P3 (utilisé par les écrans Apple depuis l'iPhone 7 et l'iMac de fin 2015, environ 25 % plus large que sRGB) et Rec. 2020 (la norme de diffusion 4K/8K, environ 75 % de CIE 1931). Sur les appareils plus anciens limités au sRGB, le navigateur se replie élégamment.

Alternatives modernes : HSL, HWB, OKLCH

Le hex est compact mais peu commode pour l'humain : vous ne pouvez pas regarder #3DE7C9 et deviner la teinte. CSS a progressivement ajouté des notations fonctionnelles qui correspondent à la façon dont les humains pensent la couleur :

• HSL : teinte, saturation, luminosité. La teinte est un angle 0-360°. Introduit dans le CSS Color Module Level 3 (2011). Des curseurs intuitifs, mais la luminosité n'est pas perceptuellement uniforme : le jaune à L = 50 % paraît bien plus lumineux que le bleu à la même luminosité.
• HWB : teinte, blancheur, noirceur. Plus facile pour le modèle mental d'un peintre (« un bleu avec un peu de blanc et une touche de noir »). Même gamut que HSL.
• LCH / Lab : perceptuellement uniforme ; des changements numériques égaux correspondent à des changements perçus égaux. Prend en charge le large gamut P3+.
• OKLCH : le tout dernier venu, introduit par Björn Ottosson en décembre 2020. Il corrige la distorsion de teinte et les problèmes de dégradé des couleurs sombres de CIELAB. Des nombres de luminosité égaux paraissent également lumineux pour toutes les teintes. L'interpolation linéaire en OKLCH produit des dégradés visuellement lisses, sans les points médians gris boueux que l'on obtient avec linear-gradient(red, green) en sRGB. Tailwind CSS v4.0 (janvier 2025) a déplacé toute sa palette de couleurs par défaut de rgb() vers oklch(). La prise en charge par les navigateurs est large depuis 2023 environ.

OKLCH est l'orientation à long terme pour la couleur en CSS, mais les codes hex resteront la lingua franca des outils de conception, des chartes de marque et des extraits copiés-collés : ils sont courts, sûrs au copier-coller sur tout support textuel, et universellement compris.

L'origine en 1861 du RGB additif

Le modèle RGB remonte à la théorie trichromatique de la vision de Young-Helmholtz (début du XIXe siècle), qui proposait que l'œil humain possède trois types de récepteurs de couleur correspondant au rouge, au vert et au bleu. James Clerk Maxwell l'a démontré expérimentalement le 17 mai 1861 à la Royal Institution de Londres. Il a projeté trois photographies en noir et blanc d'un ruban de tartan (l'une prise à travers un filtre rouge, une verte, une bleue) au moyen de trois projecteurs équipés des mêmes filtres colorés ; l'image recombinée sur l'écran montrait le ruban en couleurs approximativement complètes. On la crédite généralement comme la première photographie en couleur. Le même principe du RGB additif anime chaque écran CRT, LCD, OLED et plasma jamais fabriqué : chaque pixel est une triade de sous-pixels rouge, vert et bleu de luminosité indépendamment variable, et votre rétine les mélange en une couleur perçue.

Plus de questions

Le hex est-il sensible à la casse ?

Non. #abcdef et #ABCDEF sont identiques pour l'analyseur. La spécification CSS est explicite : les valeurs de couleur hex sont insensibles à la casse. Une casse mixte comme #FfAa00 est également valide, bien que rare dans le code de production. (À ne pas confondre avec les fragments d'URL, où le dièse de tête est un concept syntaxique entièrement différent.)

Pourquoi la moyenne de deux codes hex produit-elle un gris boueux ?

Parce que les valeurs hex sont encodées en gamma (la fonction de transfert sRGB est appliquée), et que faire la moyenne dans l'espace gamma n'est pas la même chose que la faire en lumière linéaire. L'exemple classique est linear-gradient(red, green) produisant un point médian olive boueux : le calcul est correct dans l'espace encodé en gamma, mais visuellement faux. Les fonctions de couleur modernes comme OKLCH résolvent cela en interpolant dans un espace perceptuellement uniforme, ce qui explique pourquoi elles produisent des dégradés plus lisses.

Pourquoi n'existe-t-il pas de code hex pour les couleurs « néon » ou « fluorescentes » ?

Parce que la notation hex est implicitement du sRGB, et que le sRGB ne couvre qu'environ 36 % des couleurs que l'œil humain peut voir. De nombreuses couleurs vives (verts émeraude saturés, rouge-orangé vifs, peintures fluorescentes) existent dans la nature et peuvent être affichées sur des écrans modernes à large gamut, mais tombent hors du cube sRGB. Pour les atteindre, il vous faut color(display-p3 …), color(rec2020 …) ou oklch() avec des valeurs de chroma élevées. Ces couleurs n'ont pas d'équivalent hex.

Qu'était la « palette web sûre » ?

À la fin des années 1990, quand de nombreux moniteurs étaient limités à 256 couleurs, les designers s'en tenaient à une palette de 216, l'intersection des palettes système de Windows et de Mac OS. Les 216 provenaient d'un cube 6×6×6 : chacun des canaux R, G et B ne prenait que les valeurs 00, 33, 66, 99, CC, FF. Lynda Weinman l'a popularisée dans son livre de 1996 Designing Web Graphics. Elle est devenue obsolète vers 2000, lorsque la couleur 24 bits est arrivée sur le matériel grand public. Aujourd'hui, c'est une pure curiosité historique, encore parfois visible dans des codes hex d'époque comme #CC0033 ou #993366.

Quelque chose est-il envoyé à un serveur ?

Non. La conversion hex vers RGB tient en deux lignes d'arithmétique JavaScript en fonction pure. La conversion s'exécute localement ; rien de la couleur que vous saisissez n'est envoyé où que ce soit ; la page fonctionne hors ligne une fois chargée.

Outils associés