Convertissez un code HEX en valeurs RVB

Lisez le code par paires de caractères et convertissez chaque paire de l’hexadécimal vers le décimal. La première paire est le canal rouge, la deuxième le vert, la troisième le bleu, et chaque valeur tient entre 0 et 255. Le code #3B82F6 se décompose en 3B, 82 et F6, ce qui donne rgb(59, 130, 246).

La formule : R, V et B sont les paires successives du code, lues comme des nombres hexadécimaux.

Une paire se calcule aussi de tête, car cela fait une multiplication et une addition. Vous multipliez le premier caractère par 16 et vous ajoutez le second, sachant que A vaut 10, B vaut 11 et F vaut 15. Pour la paire 3B cela donne 3 × 16 + 11, c’est-à-dire 59.

Quelques codes reviennent plus souvent que les autres. Le noir #000000 donne rgb(0, 0, 0), le blanc #FFFFFF donne rgb(255, 255, 255) et le gris #808080 donne rgb(128, 128, 128), soit exactement la moitié de l’échelle sur chaque canal.

Dans l’autre sens, le calcul repose sur le même nombre avec un changement : vous divisez le canal par 16 et vous écrivez le reste comme second caractère de la paire. Le convertisseur RVB en HEX fait ce chemin pour vous.

Le RVB décrit une couleur par trois nombres, un par canal rouge, vert et bleu, chacun entre 0 et 255. L’écran compose la teinte avec la lumière de ces trois composantes, donc plus les nombres sont élevés, plus le point est clair, et trois valeurs maximales donnent du blanc[1].

Le code HEX décrit la même couleur plus brièvement. La valeur d’un canal tient exactement sur deux caractères en hexadécimal, donc la couleur entière tient sur six caractères après le croisillon.

Au quotidien les deux écritures ne se croisent pas aux mêmes endroits. Le code HEX est ce qu’affichent Figma, le panneau de couleurs d’un système de gestion de contenu et la charte graphique, parce qu’il est court et facile à transmettre. Les valeurs RVB interviennent là où la couleur doit être calculée : dans le calcul du contraste WCAG, dans l’écriture avec transparence et dans les moteurs 3D.

La spécification CSS Color Level 4 admet quatre longueurs de code : trois, quatre, six ou huit caractères[2]. L’écriture à trois caractères est un raccourci dans lequel le navigateur répète chaque caractère, donc #123 vaut autant que #112233. Les versions à quatre et huit caractères ajoutent l’opacité à la fin, où 00 signifie une transparence totale et FF une opacité totale.

Les deux formes décrivent la couleur dans l’espace sRVB. Hewlett-Packard et Microsoft ont proposé cette norme en 1996, et le W3C l’a retenue pour le HTML et le CSS sous la référence IEC 61966-2-1[3]. C’est pourquoi le même code donne la même teinte sur tout écran conforme.

Placez le code dans la cellule A1, puis saisissez dans trois cellules voisines les formules =HEXDEC(STXT(A1;2;2)), =HEXDEC(STXT(A1;4;2)) et =HEXDEC(STXT(A1;6;2)). Pour le code #3B82F6 elles renvoient 59, 130 et 246.

La première de ces fonctions lit un nombre hexadécimal[4], la seconde découpe dans le code les paires successives. STXT prend la cellule, la position du premier caractère et le nombre de caractères ; comme le code commence par un croisillon, les canaux se trouvent aux positions 2, 4 et 6.

Copier ces trois cellules vers le bas convertit toute une colonne de codes. Dans la version anglaise du tableur les fonctions s’appellent HEX2DEC et MID, et les arguments s’y séparent par une virgule au lieu du point-virgule.