HEX et RGB : deux façons d'écrire la même couleur
Chaque couleur que vous voyez à l'écran est composée de trois lumières : rouge, verte et bleue. Poussez les trois au maximum et vous obtenez du blanc ; éteignez-les toutes et vous obtenez du noir. HEX et RGB ne sont que deux notations pour décrire l'intensité de chacun de ces trois canaux. Ils désignent exactement la même couleur, de sorte qu'un bon convertisseur se contente de traduire entre les deux systèmes d'écriture sans jamais changer la teinte réelle. C'est ce que fait cet outil, entièrement dans votre navigateur, tout en vous affichant un échantillon en direct pour que vous confirmiez le résultat de vos propres yeux.
Comment lire un code hexadécimal
Une couleur hexadécimale ressemble à #1E90FF. Le croisillon marque simplement le début ; les six caractères qui le suivent forment trois paires, écrites selon le motif #RRVVBB. La première paire est le rouge, la deuxième le vert, la troisième le bleu. Chaque paire est un nombre écrit en hexadécimal, c'est-à-dire en base 16, où les chiffres vont de 0 à 9, puis A, B, C, D, E, F représentent 10 à 15. Une paire peut contenir des valeurs allant de 00 (le canal complètement éteint) jusqu'à FF (complètement allumé). En décimal ordinaire, cette plage est exactement 0 à 255, la même échelle qu'utilise le RGB. Avec 256 niveaux possibles par canal, la forme à six chiffres peut décrire 16 777 216 couleurs distinctes.
Convertir dans les deux sens, avec un exemple détaillé
Pour passer de HEX à RGB, divisez le code en ses trois paires et convertissez chacune de la base 16 vers le décimal ordinaire. Prenons #1E90FF. La paire rouge est 1E : soit 1 multiplié par 16, plus 14 (E), ce qui donne 30. La paire verte 90 est 9 multiplié par 16, plus 0, soit 144. La paire bleue FF est 15 multiplié par 16, plus 15, soit 255. Ainsi #1E90FF devient rgb(30, 144, 255) — le fameux bleu dodger.
Dans l'autre sens, c'est le même processus inversé. Prenez chaque nombre RGB et écrivez-le sous forme de deux chiffres hexadécimaux. Le rouge pur, rgb(255, 0, 0), donne FF, 00 et 00, qui se réunissent en #FF0000. Une chose à retenir : si une valeur est inférieure à 16, il vous faut tout de même les deux chiffres, donc 5 s'écrit 05 et non simplement 5. Le convertisseur gère ce remplissage pour vous, mais cela piège les gens quand ils le font à la main.
Où chaque format est utilisé
Le HEX est la langue quotidienne du web. CSS, HTML et la plupart du code que vous écrivez recourent aux codes hexadécimaux parce qu'ils sont compacts et faciles à copier. Le RGB tend à apparaître dans les outils de design et de retouche d'image — Figma, Photoshop, Sketch et Illustrator affichent généralement des curseurs ou des champs dans la plage 0-255, et les applications d'enregistrement d'écran ou de vidéo attendent souvent du RGB elles aussi. Vous récupérez donc régulièrement un code hexadécimal dans une feuille de style et avez besoin de sa forme RGB pour le saisir dans un panneau de design, ou inversement. Cet aller-retour est précisément pourquoi un convertisseur est pratique. Si vous devez bâtir tout un jeu de teintes assorties plutôt que d'en traduire une seule, notre générateur de palette de couleurs est un meilleur point de départ, et vous trouverez d'autres utilitaires de ce genre dans nos outils pour développeurs.
Alpha, opacité et HSL
Les deux notations possèdent une forme étendue qui ajoute la transparence. Le RGB devient rgba(30, 144, 255, 0.5), où la quatrième valeur est l'alpha — 0 est totalement transparent et 1 totalement opaque. Le HEX ajoute une quatrième paire dans le même but, donnant un code à huit chiffres #RRVVBBAA ; 80, par exemple, correspond à peu près à 50 pour cent d'opacité. Quelques convertisseurs proposent aussi le HSL (teinte, saturation, luminosité), qui décrit la couleur à la manière dont un humain pourrait le faire — choisir une teinte sur la roue, puis ajuster son intensité et sa luminosité. Le HSL est un modèle mental différent plutôt qu'une palette différente, il peut donc être plus intuitif quand vous voulez rendre une couleur plus claire ou plus douce sans jongler avec trois nombres séparés.
Questions fréquentes
Le croisillon fait-il partie d'un code hexadécimal ?
Le croisillon est un marqueur qui indique au CSS et aux outils de design que vous donnez une couleur hexadécimale. La couleur elle-même est constituée des six caractères qui le suivent. La plupart des outils acceptent le code avec ou sans croisillon et le rajoutent pour vous.
Quelle est la différence entre un code hexadécimal à 3 chiffres et à 6 chiffres ?
Un code à 3 chiffres est une forme abrégée où chaque chiffre est doublé, donc #1AF signifie #11AAFF. Il n'atteint que 4 096 couleurs, tandis que la forme complète à 6 chiffres en atteint plus de 16 millions.
Pourquoi mon code hexadécimal a-t-il huit caractères ?
Un code hexadécimal à 8 chiffres ajoute une quatrième paire pour l'alpha, c'est-à-dire la transparence. Les six premiers caractères restent le rouge, le vert et le bleu, et les deux derniers règlent l'opacité de 00 (invisible) à FF (opaque).
Les codes hexadécimaux sont-ils sensibles à la casse ?
Non. #1e90ff et #1E90FF décrivent exactement la même couleur. Les lettres hexadécimales fonctionnent de la même façon en majuscules ou en minuscules, utilisez donc celle que votre équipe préfère.
HEX et RGB peuvent-ils paraître différents à l'écran ?
Non. Lorsqu'ils décrivent les mêmes valeurs de canaux, ils sont la couleur identique. Toute différence visible vient d'une coquille ou du fait que l'un des codes inclut une transparence que l'autre omet.
Combien de couleurs un code hexadécimal standard peut-il afficher ?
Un code hexadécimal à 6 chiffres offre 256 niveaux pour chacun des trois canaux, ce qui se multiplie en 16 777 216 couleurs possibles.