RGB te donne trois canaux décimaux entre 0 et 255. Convertir en HEX transforme chaque canal en un nombre hexadécimal à deux chiffres, de sorte que toute la couleur tient dans un seul token compact reconnu par tous les navigateurs, outils de design et guides de style.
Comment fonctionne la conversion de RGB en HEX
- Prends le canal rouge et divise-le par 16 : le quotient est le premier chiffre, le reste le deuxième.
- Écris les valeurs 10 à 15 comme les lettres A à F — 255 devient FF.
- Répète pour le vert et le bleu, en complétant les chiffres simples avec un zéro devant : 5 devient 05.
- Assemble les trois paires et place un # devant.
Exemple pratique
Exact, tant que les canaux sont des entiers de 0 à 255. Les valeurs fractionnaires comme rgb(79.5, 70, 229) sont d’abord arrondies à l’entier le plus proche, car HEX ne peut pas stocker d’intermédiaires.
RGB et HEX expliqués
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()
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
Table de référence RGB vers HEX
Les couleurs CSS les plus courantes, converties de RGB vers HEX.
| Couleur | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |