Convertissez des valeurs RVB en code HEX

Divisez chaque canal par 16. Le quotient donne le premier caractère de la paire, le reste donne le second, et les nombres de 10 à 15 s’écrivent avec les lettres A à F. Le canal 59 donne 3 et il reste 11, d’où la paire 3B.

La formule : chaque canal s’écrit sur deux caractères hexadécimaux, et les paires se collent dans l’ordre rouge, vert, bleu.

Le même calcul donne 82 pour 130 et F6 pour 246, donc rgb(59, 130, 246) s’écrit #3B82F6. Un canal inférieur à 16 reçoit un zéro devant pour que la paire garde ses deux caractères : la valeur 10 s’écrit 0A.

Les gris ont leurs trois canaux égaux, donc leur code se compose de trois paires identiques : 51 donne #333333 et 204 donne #CCCCCC. Un tel code se raccourcit à trois caractères et le navigateur le redéveloppe. Dans l’autre sens, le calcul repose sur le même nombre 16 et le convertisseur HEX en RVB le fait pour vous.

RVB décrit une couleur par trois nombres, un par canal rouge, vert et bleu. Chacun va de 0 à 255, parce qu’un canal compte autant de degrés de luminosité dans le codage sur vingt-quatre bits. Trois canaux de 256 degrés donnent ensemble 16 777 216 couleurs[1].

L’écriture hexadécimale donne les mêmes trois nombres dans un autre système de numération. Un canal a 256 degrés, et c’est exactement ce que contiennent deux caractères hexadécimaux, donc chaque canal occupe deux places dans le code. La couleur entière tient en six caractères, sans virgules et sans parenthèses.

Cette concision décide de l’endroit où vous croisez chaque écriture. Le code HEX se trouve dans les feuilles de style, dans les champs de couleur de Figma et dans les chartes graphiques. Les valeurs RVB apparaissent dans l’onglet Calculé du navigateur, dans les sélecteurs des logiciels graphiques et partout où la couleur entre dans un calcul. Le sélecteur de couleurs de Photoshop affiche d’ailleurs les deux à la fois : les champs R, V et B d’un côté, le champ # de l’autre.

La spécification CSS Color Level 4 admet quatre longueurs de code : trois, quatre, six et huit caractères[2]. La version à trois caractères fonctionne quand les deux caractères de chaque paire sont identiques, car le navigateur la redéveloppe par répétition. Les versions à quatre et huit caractères ajoutent l’opacité à la fin.

Les deux écritures décrivent la couleur dans le même espace sRVB, celui que le W3C a retenu pour le HTML et le CSS[1]. Un canal noté 255 et le même canal noté FF sont exactement la même nuance.

Placez les canaux dans les cellules A1, B1 et C1, puis saisissez dans la quatrième la formule ="#"&DECHEX(A1;2)&DECHEX(B1;2)&DECHEX(C1;2). Pour les valeurs 59, 130 et 246 elle renvoie #3B82F6.

Le 2 de chaque appel est l’argument du nombre de caractères, qui complète le résultat par des zéros devant[3]. Un code couleur exige exactement deux caractères par canal, et un canal valant 10 renverrait sans cet argument un simple A.

Copier cette cellule vers le bas convertit toute la colonne. Dans la version anglaise du tableur la fonction s’appelle DEC2HEX, et les arguments s’y séparent par une virgule au lieu du point-virgule.