Convertisseur HEX en RGB

Comment convertir du HEX en RGB

Convertir du HEX en RGB (le "hex to rgb" des recherches), c'est découper le code en paires et passer chaque paire de l'hexadécimal au décimal. La première paire est le rouge, la deuxième le vert et la troisième le bleu. Chaque paire va de 00 à FF, soit de 0 à 255.

#5271FF  →  52  71  FF
52 = 5 × 16 + 2   = 82
71 = 7 × 16 + 1   = 113
FF = 15 × 16 + 15 = 255
rgb(82 113 255)

Le calcul de chaque paire est chiffre de gauche × 16 + chiffre de droite. Les chiffres A à F valent de 10 à 15 (A vaut 10, B 11, C 12, D 13, E 14 et F 15), et la table ASCII donne chaque caractère avec son code en décimal et en hexadécimal. Un deuxième exemple, avec une paire à zéro :

#FF8000  →  FF  80  00
FF = 255
80 = 8 × 16 + 0 = 128
00 = 0
rgb(255 128 0)

Comme FF est la plus grande paire possible, le plus grand canal est 255. Et 00 donne toujours 0. On peut même estimer de tête : le premier chiffre de chaque paire donne l'essentiel de la valeur. Dans 5271FF, le rouge est faible (5), le vert moyen (7) et le bleu au maximum (F), donc la couleur est un bleu soutenu.

HEX de 3 et 4 chiffres

Le HEX court double chaque chiffre : #f00 équivaut à #ff0000 et #abc devient #aabbcc. On ne peut abréger que si les deux chiffres de chaque paire sont identiques, donc #5271FF n'a pas de forme courte.

#f00   →  #ff0000  →  rgb(255 0 0)
#abc   →  #aabbcc
#f008  →  #ff000088

Avec 4 chiffres, la même règle s'applique, et le dernier chiffre est la transparence : #f008 donne #ff000088. Le format est valide en CSS, mais du code plus ancien peut ne pas le reconnaître. Vérifiez avant de l'utiliser hors d'une feuille de style.

HEX de 8 chiffres et transparence

Dans le HEX de 8 chiffres, la dernière paire est le canal alpha, qui contrôle l'opacité : 00 est totalement transparent et FF totalement opaque. Pour l'utiliser dans rgba(), convertissez la paire en décimal et divisez par 255.

#5271FF80  →  52  71  FF  80
80 = 8 × 16 + 0 = 128
128 ÷ 255 = 0.50196…  →  0.5
rgba(82, 113, 255, 0.5)
rgb(82 113 255 / 50%)

C'est pourquoi 80 ne vaut 0,5 que de façon approchée : 128 ÷ 255 donne 0,50196. L'outil arrondit à 2 décimales et affiche 0.5, ce que vous écririez en CSS.

rgb() et rgba() dans le CSS actuel

La syntaxe actuelle de rgb() sépare les canaux par des espaces et place la transparence après une barre oblique : rgb(82 113 255 / 50%). L'ancienne utilise des virgules et le nom rgba() : rgba(82, 113, 255, 0.5). Aujourd'hui, les deux fonctionnent avec ou sans alpha. L'outil affiche les deux pour que vous copiiez celle de votre projet.

color: rgb(82 113 255);
color: rgb(82 113 255 / 50%);
color: rgba(82, 113, 255, 0.5);

Les chiffres de compatibilité viennent de MDN (browser-compat-data, vérifiés le 5 novembre 2026) : la syntaxe avec espaces fonctionne depuis Chrome 65, Firefox 52 et Safari 12.1, et le HEX de 4 et 8 chiffres depuis Chrome 62, Firefox 49 et Safari 10. Les règles de syntaxe sont dans la spécification CSS Color 4 du W3C, et la documentation d'usage sur rgb() sur MDN et hex-color sur MDN.

En pratique, le HEX est plus court pour une couleur unie et c'est ce qu'exportent les outils de design. Le RGB avec alpha garde la transparence lisible (50% au lieu de 80) et se calcule plus facilement en JavaScript. La couleur à l'écran est la même.

Convertir du HEX en RGB en code

En JavaScript, parseInt(paire, 16) convertit chaque paire. La fonction ci-dessous accepte 3, 4, 6 et 8 chiffres, avec ou sans # :

function hexToRgb(hex) {
  let digits = hex.trim().replace(/^#/, "");

  if (digits.length <= 4) {
    digits = [...digits].map((digit) => digit + digit).join("");
  }

  if (![6, 8].includes(digits.length) || /[^0-9a-f]/i.test(digits)) {
    return null;
  }

  const [r, g, b, a = 255] = digits
    .match(/../g)
    .map((pair) => parseInt(pair, 16));

  return { r, g, b, a: Math.round((a / 255) * 100) / 100 };
}

hexToRgb("#5271FF");   // { r: 82, g: 113, b: 255, a: 1 }
hexToRgb("#f008");     // { r: 255, g: 0, b: 0, a: 0.53 }

En Python, int(paire, 16) convertit une paire, et bytes.fromhex convertit tout le code d'un coup :

def hex_to_rgb(value: str) -> tuple[int, ...]:
    digits = value.lstrip("#")

    if len(digits) in (3, 4):
        digits = "".join(digit * 2 for digit in digits)

    return tuple(bytes.fromhex(digits))

hex_to_rgb("#5271FF")   # (82, 113, 255)
hex_to_rgb("#5271FF80") # (82, 113, 255, 128)
int("52", 16)           # 82

Validez avant de convertir. Sans vérification, parseInt('zz', 16) renvoie NaN et l'erreur n'apparaît que plus loin, quand la couleur devient rgb(NaN NaN NaN) dans le CSS.

Erreurs courantes en collant du HEX

Quand la conversion échoue, c'est presque toujours pour l'une de ces raisons :

• Trop ou pas assez de chiffres. Le HEX de 5 ou 7 chiffres n'existe pas, seuls 3, 4, 6 et 8 sont valides. C'est souvent un chiffre perdu ou ajouté pendant le copier-coller.
• Une lettre hors de A-F. #G00 n'est pas du HEX, et la lettre O à la place du zéro (#FF0O00) est un classique.
• Une couleur qui change de teinte après conversion. Le nombre est juste, mais l'outil de design travaille dans un autre profil colorimétrique (comme Display P3) et le navigateur affiche du sRGB. La conversion elle-même ne perd rien.

Couleurs de base en HEX et RGB

Les 16 couleurs de base du CSS, avec le HEX et le RGB de chacune. Cliquez sur une ligne pour charger la couleur dans l'outil.