Un code HEX contient trois nombres de 8 bits encodés en six chiffres hexadécimaux. Convertir HEX en RGB signifie séparer ces chiffres en paires et lire chaque paire comme un nombre décimal entre 0 et 255 — exactement les valeurs attendues par CSS, Figma et les éditeurs d’image.
Comment fonctionne la conversion de HEX en RGB
- Supprime le # initial et, si le code n’a que trois chiffres, double chacun d’eux : #f53 devient #ff5533.
- Sépare les six chiffres en trois paires — RR, GG et BB.
- Lis chaque paire comme un nombre en base 16 et convertis-le en base 10 : FF devient 255, 57 devient 87, 33 devient 51.
- Écris les trois résultats sous la forme rgb(R, G, B).
Exemple pratique
Cette conversion est exacte. HEX et RGB décrivent les mêmes valeurs sRGB dans des notations différentes, donc rien n’est arrondi ou perdu dans l’un ou l’autre sens.
HEX et RGB expliqués
Qu'est-ce que HEX ?
Un code HEX est un nombre hexadécimal à six chiffres qui stocke les canaux rouge, vert et bleu d’une couleur précédé d’un #. Chaque paire de chiffres représente un canal, de 00 (aucun) à FF (plein), ce qui donne les mêmes 16,7 millions de couleurs que RGB mais dans une notation plus compacte. HEX est le format par défaut dans CSS, les outils de design et les chartes graphiques.
- Syntaxe :
- #RRGGBB
- Plage :
- 00–FF par canal
- Idéal pour :
- CSS, transfert de design, chartes graphiques
Qu'est-ce que RGB ?
RGB décrit une couleur comme trois canaux de lumière — rouge, vert et bleu — chacun de 0 à 255. Il reflète le fonctionnement des écrans : tous trois à 255 donnent blanc, tous à 0 donnent noir. RGB est le bon choix quand tu dois calculer avec une couleur, et rgba() ajoute la transparence.
- Syntaxe :
- rgb(R, G, B)
- Plage :
- 0–255 par canal
- Idéal pour :
- code, canvas, transparence avec rgba()
Table de référence HEX vers RGB
Les couleurs CSS les plus courantes, converties de HEX vers RGB.
| Couleur | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |