Hex en RGB : convertir un code couleur à la main ou en code

Pour convertir un hex en RGB, coupez le code en trois paires de caractères, une pour le rouge, une pour le vert et une pour le bleu, et transformez chaque paire de la base 16 en un nombre ordinaire entre 0 et 255. Pour #7c3aed, les paires sont 7c, 3a et ed, qui deviennent 124, 58 et 237 : la couleur est donc rgb(124 58 237). Rien ne change dans la couleur. Hex et RGB sont deux façons d’écrire les trois mêmes nombres.

Comment est construit un code couleur hex

Un code hex compte six caractères après le dièse. Les deux premiers forment le canal rouge, les deux du milieu le vert et les deux derniers le bleu. Chaque canal peut prendre 256 valeurs, de 0 (aucune lumière de cette couleur) à 255 (toute la lumière). La base 16 permet d’écrire chacune de ces 256 valeurs en exactement deux caractères, c’est pourquoi l’hex est devenu la façon compacte de saisir les couleurs sur le web. Pour une vue d’ensemble des liens entre ces codes, voir les codes couleur hex expliqués.

La base 16 compte de 0 à 9 puis continue avec des lettres. C’est la seule chose à retenir :

Convertir un hex en RGB à la main

Chaque paire est un nombre à deux chiffres en base 16. Le chiffre de gauche compte les seizaines et celui de droite les unités. Multipliez le chiffre de gauche par 16, ajoutez celui de droite, et vous obtenez la valeur du canal.

1. 1

   Retirez le dièse et coupez en paires

   #7c3aed devient 7c, 3a et ed. Ce sont le rouge, le vert et le bleu, dans cet ordre.

2. 2

   Convertissez la paire rouge

   7c : 7 × 16 = 112, et c vaut 12, donc le rouge vaut 112 + 12 = 124.

3. 3

   Convertissez la paire verte

   3a : 3 × 16 = 48, et a vaut 10, donc le vert vaut 48 + 10 = 58.

4. 4

   Convertissez la paire bleue

   ed : e vaut 14, 14 × 16 = 224, et d vaut 13, donc le bleu vaut 224 + 13 = 237.

5. 5

   Écrivez le résultat

   Le CSS moderne accepte rgb(124 58 237). L’ancienne forme avec virgules rgb(124, 58, 237) fonctionne toujours partout.

Deux vérifications rapides évitent les erreurs. 00 vaut toujours 0 et ff toujours 255 : toute paire qui commence par une lettre de a à f vaut donc 160 ou plus, et toute paire qui commence par 0 à 7 vaut moins de 128. Si votre résultat pour ed est petit, vous avez lu les chiffres à l’envers.

Codes abrégés et transparence

Un code à trois caractères est un raccourci : doublez chaque caractère pour obtenir le code complet. #f60 signifie #ff6600, soit rgb(255 102 0). #fff est le blanc et #000 le noir. Seules les couleurs dont les paires répètent un chiffre peuvent s’écrire ainsi : #7c3aed n’a donc pas de forme courte.

Un code à huit caractères ajoute une quatrième paire pour l’opacité. Elle se convertit de la même façon, puis on divise par 255 pour obtenir une fraction. #7c3aed80 se termine par 80, qui vaut 128, et 128 ÷ 255 donne environ 0,5 : il équivaut donc à rgb(124 58 237 / 50%). Un code à quatre caractères comme #f608 est la version abrégée de la même idée.

.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}

Hex en RGB en JavaScript

En code, parseInt avec une base de 16 fait la conversion pour vous. La fonction ci-dessous accepte les codes à trois, quatre, six et huit caractères, avec ou sans dièse, et renvoie les canaux ainsi qu’un alpha entre 0 et 1.

function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }

Convertir du RGB en hex

Le retour se fait par division. Divisez le canal par 16 : le quotient est le premier chiffre et le reste le second. Pour 153, 153 ÷ 16 donne 9 reste 9, donc la paire est 99. Pour 51, c’est 3 reste 3, soit 33, et 102 donne 6 reste 6, soit 66. Ainsi rgb(51 102 153) correspond à #336699. En JavaScript, toString(16) s’en charge, avec un remplissage pour que les valeurs à un seul chiffre gardent leur zéro initial :

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'

Quand utiliser l’hex, le RGB ou autre chose

L’hex est compact et facile à coller d’un outil à l’autre, c’est pourquoi les chartes de marque et les fichiers de design l’utilisent. Le RGB est plus simple à manier quand il faut changer un seul canal ou ajouter de la transparence en code. Aucun des deux ne répond bien aux questions que se posent vraiment les designers, comme « éclaircis un peu ceci » ou « trouve une version plus douce de ce bleu ». Pour cela, la couleur HSL et OKLCH décrivent les couleurs par teinte et luminosité, si bien que les petites retouches se comportent de façon prévisible.

Une autre distinction compte pour l’impression. Hex et RGB décrivent de la lumière sur un écran : une imprimante doit les traduire en encre, et les couleurs d’écran très vives peuvent ternir sur papier. RVB ou CMJN explique à quoi s’attendre. À l’écran, les couleurs converties sont identiques, et quand une couleur doit s’effacer, ce sont les formes avec alpha ci-dessus que vous écrivez ; les dégradés transparents en CSS les montrent à l’œuvre.

Avant d’utiliser une couleur convertie pour du texte, vérifiez-la sur son fond avec un vérificateur de contraste. Dans Gradiently, c’est rarement nécessaire : l’encre automatique choisit un texte clair ou sombre pour chaque ligne à partir de la palette du Mark, pour que les mots restent lisibles.