Convertisseur RGB en HEX

Comment convertir du RGB en HEX

Convertir du RGB en HEX (le "rgb to hex" des recherches), c'est passer chaque canal du décimal à l'hexadécimal et accoler les trois paires après un #. À la main, divisez le canal par 16 : le quotient est le premier chiffre et le reste est le second.

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

Un quotient ou un reste de 10 à 15 devient une lettre : 10 est A, 11 est B, 12 est C, 13 est D, 14 est E et 15 est F. Un deuxième exemple, avec un canal à zéro :

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

Un canal à zéro occupe quand même deux chiffres (00). Le HEX avec transparence, celui de 8 chiffres, a sa propre section plus bas. Et quand les deux chiffres de chaque paire sont identiques, on peut abréger : rgb(255 0 0) devient #F00. L'outil affiche le HEX court chaque fois qu'il existe.

Le zéro à gauche

Le bug classique de ceux qui composent du HEX à la main, c'est toString(16). Il ne complète pas avec un zéro : le canal 15 donne f, et non 0f. Avec un tel canal, le code perd un chiffre et devient une autre couleur, sans aucune erreur :

(15).toString(16);                  // "f"
(15).toString(16).padStart(2, "0");  // "0f"

"#" + [15, 0, 0].map((c) => c.toString(16)).join("");
// "#f00"  (and not "#0f0000")

Remarquez que #f00 est un HEX court valide, égal à #ff0000. Le navigateur l'accepte, mais la couleur est fausse. La correction, c'est padStart(2, '0'), qui complète avec des zéros à gauche jusqu'à deux chiffres.

Transparence en HEX

Pour la transparence, multipliez l'alpha (de 0 à 1) par 255, arrondissez et convertissez le résultat en hexadécimal. La paire se place à la fin du code et forme le HEX de 8 chiffres. Dans le champ, l'alpha peut s'écrire 0.5, .5 ou 50% : les trois donnent le même résultat.

alpha = 0.5
0.5 × 255 = 127.5  →  128
128 = 8 × 16 + 0   →  80
rgb(82 113 255 / 50%)  →  #5271FF80

Pourquoi 50 % donne 80 et non 7F ? Parce que 0,5 × 255 vaut 127,5, et l'arrondi monte à 128 (80). Celui qui tronque au lieu d'arrondir tombe sur 127 (7F). L'écart est de 1 sur 255, invisible à l'écran, mais il apparaît si vous comparez deux outils octet par octet.

Dans l'autre sens, le HEX de 8 chiffres redevient un alpha en divisant la dernière paire par 255 (80 donne 0,5). Le convertisseur HEX en RGB fait ce calcul et affiche le rgba() prêt à l'emploi.

Table d'opacité en HEX

Les paires à placer à la fin du code, de 100 % à 0 %, de 5 en 5. La troisième colonne montre le résultat sur #5271FF.

Pour l'utiliser, ajoutez la paire au HEX de six chiffres : 40 % d'opacité sur #5271FF donne #5271FF66. Cela marche dans background, color, border-color, box-shadow et même dans les étapes d'un linear-gradient.

Convertir du RGB en HEX en code

En JavaScript, combinez toString(16) et padStart(2, '0') pour ne pas perdre le zéro à gauche :

const toHex = (value) =>
  Math.round(value).toString(16).padStart(2, "0");

function rgbToHex(r, g, b, a) {
  const alpha = a === undefined ? "" : toHex(a * 255);

  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alpha}`.toUpperCase();
}

rgbToHex(82, 113, 255);       // "#5271FF"
rgbToHex(82, 113, 255, 0.5);  // "#5271FF80"
rgbToHex(15, 0, 0);           // "#0F0000"

En Python, la f-string avec :02X complète déjà avec des zéros et met en majuscules. hex(255) renvoie '0xff', avec un préfixe et sans zéro à gauche, donc la f-string est en général plus pratique :

def rgb_to_hex(r: int, g: int, b: int) -> str:
    if not all(0 <= channel <= 255 for channel in (r, g, b)):
        raise ValueError("channel out of range 0-255")

    return f"#{r:02X}{g:02X}{b:02X}"

rgb_to_hex(82, 113, 255)  # '#5271FF'
rgb_to_hex(15, 0, 0)      # '#0F0000'

Le piège est de ne pas valider la plage de 0 à 255. Sans cette vérification, le canal 300 donne 12c, qui fait trois chiffres, et tout le code sort décalé :

(300).toString(16);   // "12c"
(-1).toString(16);    // "-1"

Si la valeur vient d'un champ de texte, convertissez-la avec Number() et vérifiez avec Number.isInteger. La chaîne "82" fonctionne, mais "8 2" donne NaN.

Ce que le CSS accepte dans rgb()

L'outil lit les mêmes formats que le rgb() du CSS, vous pouvez donc coller directement depuis votre feuille de style :

• Pourcentages : rgb(100% 0% 0%) équivaut à rgb(255 0 0).
• Décimaux : rgb(82.4 113 255) est valide en CSS. Ici, le canal est arrondi à l'entier le plus proche.
• Valeur hors de 0-255 : le CSS ne signale pas d'erreur et limite au maximum ou au minimum, donc rgb(300 0 0) devient rgb(255 0 0). L'outil, lui, vous prévient, car c'est presque toujours une faute de frappe.
• Séparateurs : 82,113,255 et 82 113 255 fonctionnent, et un quatrième nombre isolé est lu comme une transparence de 0 à 1.

La syntaxe avec espace et barre oblique pour la transparence, et sa différence avec rgba() à virgules, sont expliquées dans le convertisseur HEX en RGB.

Plus d'outils de couleur

Pour le sens inverse, utilisez le convertisseur HEX en RGB. Si vous avez besoin d'une image de test avec une couleur de fond et de texte en HEX, le générateur d'image placeholder accepte les codes que vous venez de convertir.