Aller au contenu principal
ToolsByUs

Convertir HEX en RGB

HEX vers RGB décompose une couleur hexadécimale en ses trois canaux décimaux. Chaque paire de chiffres hexadécimaux est un canal écrit en base 16, donc #FF8800 est rgb(255 136 0). Un hex à quatre ou huit chiffres porte une quatrième paire pour l’alpha, qui ressort comme une valeur 0–1 dans rgba(). La conversion est exacte dans les deux sens — aucune couleur n’est perdue, car les deux notations décrivent les mêmes trois octets.

100 % local
Entrée HEX

Saisissez une couleur à gauche. Les valeurs hexadécimales avec ou sans dièse sont acceptées, rgb(), hsl(), oklch() ainsi que les noms de couleurs CSS.

Comment fonctionne Convertir HEX en RGB ?

Une couleur hexadécimale est trois octets écrits en base 16. Chaque octet est un canal — rouge, vert, bleu — et contient une valeur de 0 à 255, soit exactement deux chiffres hexadécimaux, car 16² vaut 256. Toute la conversion est là : lire deux caractères, les interpréter en base 16.

Lire un chiffre hexadécimal

Les chiffres vont de 0–9 puis a–f, où a vaut 10 et f vaut 15. Le chiffre de gauche compte les seizaines et celui de droite donne le reste, donc 88 vaut 8×16 + 8 = 136 et ff vaut 15×16 + 15 = 255. La casse ne compte pas : #FF8800 et #ff8800 sont la même couleur, et CSS ne les a jamais distinguées.

Le hex à trois chiffres, et pourquoi ce n’est pas un arrondi

#f80 est un raccourci pour #ff8800 — chaque chiffre est doublé, pas complété par un zéro. Cela a son importance : doubler envoie f sur ff = 255, le vrai maximum, tandis que compléter donnerait f0 = 240 et chaque couleur raccourcie ressortirait légèrement sombre. Le raccourci ne peut exprimer que les 4 096 couleurs dont les paires de canaux sont justement des doubles, c’est pourquoi il survit pour les valeurs rapides comme #fff et disparaît de tout ce qui est conçu.

La quatrième paire, c’est l’alpha

CSS Color 4 a ajouté le hex à 4 et à 8 chiffres, où la dernière paire est l’opacité sur la même échelle 0–255. #ff880080 est rgb(255 136 0 / 0.5), car 0x80 vaut 128, et 128/255 vaut 0.502. Cette légère imprécision est inhérente : l’alpha en CSS est une fraction et le hex ne peut en stocker que 256 pas, si bien qu’une valeur écrite 0.5 dans rgba() fait l’aller-retour par le hex en 0.502.

Quelle syntaxe écrire

Le CSS moderne sépare les canaux par des espaces et l’alpha par une barre oblique — rgb(255 136 0 / 50%) — et rgb() accepte désormais l’alpha directement, si bien que rgba() est un alias historique conservé pour la compatibilité. La forme à virgules fonctionne encore dans tous les navigateurs et continuera ; il n’y a aucune dépréciation et aucune raison de réécrire une feuille de style pour cela. Les deux formes sont produites ici, pour que vous puissiez coller celle que votre base de code utilise déjà.

Une couleur hexadécimale

#ff8800

Ses canaux RGB

rgb(255 136 0)

ff → 255   (15 × 16 + 15)
88 → 136   (8 × 16 + 8)
00 → 0     (0 × 16 + 0)

Quelles options et quels cas limites Convertir HEX en RGB prend en charge ?

Référence technique et options
ParamètreTypeValeur par défautComportement et cas limites
#rgb3 chiffresraccourciChaque chiffre est doublé : #f80 devient #ff8800. Seulement 4 096 couleurs peuvent être écrites de cette manière.
#rgba4 chiffresraccourciLe même principe de doublement, avec un quatrième chiffre pour l’alpha. #f808 devient #ff880088.
#rrggbb6 chiffresstandardUn octet par canal, de 0 à 255 chacun. 16,7 millions de couleurs.
#rrggbbaa8 chiffresCSS Color 4L’alpha comme quatrième octet. Supporté partout actuellement ; retombe sur opaque dans les très vieux navigateurs plutôt qu’être ignoré.
Casse—ignorée#FF8800 et #ff8800 sont identiques. La minuscule est la convention habituelle.
rgb(r g b)moderneespacesLa syntaxe actuelle. L’alpha va après une barre oblique : rgb(255 136 0 / 50%).
rgba(r,g,b,a)héritéevirgulesToujours valide partout et non obsolète. rgb() et rgba() sont maintenant la même fonction.
Pourcentages0–100%autorisésrgb(100% 53.3% 0%) est la même couleur. Les pourcentages sont calculés par rapport à 255, pas à 100.

Questions fréquentes

Comment convertir du hex en RGB à la main ?

Séparez les six chiffres en trois paires, puis lisez chaque paire en base 16 : le chiffre de gauche dit combien de seizaines, celui de droite donne le reste. Ainsi 88 vaut 8×16 + 8 = 136. Les lettres poursuivent le comptage — a vaut 10, b vaut 11, jusqu’à f qui vaut 15 — donc ff vaut 15×16 + 15 = 255. Trois paires, trois nombres, et toute la conversion est là.

#f80 est-il la même couleur que #ff8800 ?

Oui. Le hex à trois chiffres double chaque chiffre au lieu de le compléter par un zéro, donc #f80 se développe en #ff8800. Ce doublement est ce qui permet à #fff de vouloir dire blanc pur ; s’il complétait, #fff serait #f0f0f0 et chaque raccourci serait légèrement sombre.

Comment fonctionne l’alpha dans un hex à 8 chiffres ?

Les deux derniers chiffres sont l’opacité sur la même échelle 0–255 que les canaux de couleur, donc #ff880080 donne 0x80 = 128, soit un alpha de 128/255 = 0.502. Comme le hex n’a que 256 pas, un alpha écrit 0.5 dans rgba() ressort en 0.502 après un passage par le hex. Cette différence est invisible à l’écran et apparaîtra si vous comparez des chaînes.

Faut-il utiliser rgb() ou rgba() ?

rgb() — il accepte l’alpha désormais, donc rgba() est un alias historique de la même fonction. Ni l’un ni l’autre n’est déprécié et les deux fonctionnent partout, il n’y a donc aucune raison de réécrire du code existant. Pour du code neuf, rgb(255 136 0 / 50%) est la syntaxe actuelle.

Pourquoi mon outil de design affiche-t-il des nombres RGB différents pour le même hex ?

Presque toujours un profil colorimétrique. Le hex est une valeur dans un espace colorimétrique, et si le document est étiqueté Display P3 ou Adobe RGB plutôt que sRGB, les mêmes trois octets décrivent une couleur différente et l’outil peut vous montrer l’équivalent sRGB au lieu des nombres bruts. Cette page considère le hex comme sRGB, ce qu’un navigateur en fait en CSS.

Comment utiliser une valeur RGB dans une propriété personnalisée CSS ?

Stockez les trois canaux sans l’emballage rgb() — --brand: 240 84 30; — puis écrivez color: rgb(var(--brand)) pour la couleur pleine et background: rgb(var(--brand) / 0.12) pour une teinte translucide de celle-ci. Une seule variable sert alors la couleur et toutes ses transparences, c’est pourquoi les design systems stockent des canaux plutôt que des chaînes de couleur finies.

Équipe ToolsByUs · Comment nous vérifions nos outils