Conversion HEX vers RGB : Guide complet des codes couleur

Que vous construisiez un site web, conceviez un logo ou déboguiez des styles CSS, comprendre comment convertir entre les formats de couleur HEX et RGB est une compétence essentielle pour les développeurs et designers web. Ces deux systèmes sont la pierre angulaire de la représentation numérique des couleurs, et savoir comment ils fonctionnent rend votre travail plus rapide et plus précis.

Dans ce guide, vous apprendrez exactement ce que sont HEX et RGB, comment convertir de l'un à l'autre manuellement, et quand utiliser chaque format. Vous pouvez aussi utiliser notre Convertisseur de Couleur pour basculer instantanément entre les formats.

Qu'est-ce que le HEX ?

HEX signifie hexadécimal — un système de numération en base 16 utilisé pour représenter les couleurs en développement web. Un code couleur HEX est un code à six chiffres précédé d'un symbole dièse (#), où chaque paire de chiffres représente l'intensité du rouge, du vert et du bleu.

#RRVVBB

• RR — Composante rouge (00 à FF en hexadécimal, 0 à 255 en décimal)
• VV — Composante verte (00 à FF en hexadécimal, 0 à 255 en décimal)
• BB — Composante bleue (00 à FF en hexadécimal, 0 à 255 en décimal)

Par exemple, #ff5733 signifie rouge = FF (255), vert = 57 (87), bleu = 33 (51).

Le HEX supporte une notation abrégée quand les deux chiffres de chaque paire sont identiques : #f00 équivaut à #ff0000 (rouge pur).

Qu'est-ce que le RGB ?

RGB signifie Red, Green, Blue (Rouge, Vert, Bleu) — le modèle de couleur additif utilisé par les écrans et affichages numériques. Chaque couleur est définie par trois valeurs allant de 0 à 255 :

rgb(R, V, B)

• R — Intensité du rouge (0–255)
• V — Intensité du vert (0–255)
• B — Intensité du bleu (0–255)

Par exemple, rgb(255, 87, 51) produit le même orange chaud que #ff5733.

Le RGB est intuitif car il correspond directement à la façon dont les écrans produisent la couleur : en combinant de la lumière rouge, verte et bleue à différentes intensités.

HEX vs RGB : Comparaison

Caractéristique	HEX	RGB
Format	#RRVVBB	rgb(R, V, B)
Système numérique	Base 16 (hexadécimal)	Base 10 (décimal)
Plage de valeurs	00–FF par canal	0–255 par canal
Notation abrégée	Oui (#f00 = #ff0000)	Non
Utilisation CSS	color: #ff5733;	color: rgb(255, 87, 51);
Support alpha	#RRVVBBAА (8 chiffres)	rgba(R, V, B, A)
Lisibilité	Compact, courant dans les outils design	Plus facile à comprendre d'un coup d'œil

Les deux formats produisent des couleurs identiques — la différence réside uniquement dans la façon dont les valeurs sont écrites.

Comment convertir HEX en RGB : Étape par étape

Convertir un code couleur hexadécimal en RGB se fait en trois étapes simples :

1. Séparer le code HEX en trois paires de deux chiffres (après avoir retiré le #).
2. Convertir chaque paire de l'hexadécimal vers le décimal.
3. Combiner les trois valeurs décimales en rgb(R, V, B).

Exemple : Convertir #3498db en RGB

1. Séparer : 34, 98, db
2. Convertir chaque paire :
   • 34 → (3 × 16) + 4 = 52
   • 98 → (9 × 16) + 8 = 152
   • db → (13 × 16) + 11 = 219
3. Résultat : rgb(52, 152, 219) — un bleu vif.

La formule de conversion

La formule mathématique pour convertir une paire hexadécimale en décimal est :

décimal = (premier_chiffre × 16) + second_chiffre

Les chiffres hexadécimaux utilisent 0–9 et A–F, où :

• A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Exemples détaillés

Exemple 1 : #ff0000 (Rouge)

• FF → (15 × 16) + 15 = 255
• 00 → 0
• 00 → 0
• Résultat : rgb(255, 0, 0)

Exemple 2 : #00ff00 (Vert)

• 00 → 0
• FF → 255
• 00 → 0
• Résultat : rgb(0, 255, 0)

Exemple 3 : #1a2b3c (Bleu canard foncé)

• 1A → (1 × 16) + 10 = 26
• 2B → (2 × 16) + 11 = 43
• 3C → (3 × 16) + 12 = 60
• Résultat : rgb(26, 43, 60)

Exemple 4 : #abcdef (Bleu-gris clair)

• AB → (10 × 16) + 11 = 171
• CD → (12 × 16) + 13 = 205
• EF → (14 × 16) + 15 = 239
• Résultat : rgb(171, 205, 239)

RGB vers HEX : La conversion inverse

Pour convertir du RGB vers HEX, on inverse le processus :

1. Convertir chaque valeur décimale (0–255) en son équivalent hexadécimal à deux chiffres.
2. Concaténer les trois paires hexadécimales avec un préfixe #.

Formule

paire_hex = decimal_vers_hex(valeur)

Divisez le nombre décimal par 16. Le quotient est le premier chiffre hexadécimal, et le reste est le second.

Exemple : Convertir rgb(52, 152, 219) en HEX

• 52 ÷ 16 = 3 reste 4 → 34
• 152 ÷ 16 = 9 reste 8 → 98
• 219 ÷ 16 = 13 reste 11 → db
• Résultat : #3498db

Valeurs de couleurs courantes

Voici un tableau de référence des couleurs populaires dans les deux formats :

Couleur	HEX	RGB
Rouge	#ff0000	rgb(255, 0, 0)
Vert	#00ff00	rgb(0, 255, 0)
Bleu	#0000ff	rgb(0, 0, 255)
Blanc	#ffffff	rgb(255, 255, 255)
Noir	#000000	rgb(0, 0, 0)
Jaune	#ffff00	rgb(255, 255, 0)
Cyan	#00ffff	rgb(0, 255, 255)
Magenta	#ff00ff	rgb(255, 0, 255)
Orange	#ff8c00	rgb(255, 140, 0)
Violet	#800080	rgb(128, 0, 128)
Gris	#808080	rgb(128, 128, 128)
Corail	#ff7f50	rgb(255, 127, 80)

Cas d'utilisation en développement web

Styles CSS

Les deux formats fonctionnent directement en CSS :

/* Format HEX */
.header { background-color: #3498db; }

/* Format RGB */
.header { background-color: rgb(52, 152, 219); }

/* Avec transparence */
.overlay { background-color: rgba(52, 152, 219, 0.5); }
.overlay { background-color: #3498db80; }

Styles HTML en ligne

<div style="color: #e74c3c;">Message d'erreur</div>
<div style="color: rgb(231, 76, 60);">Message d'erreur</div>

Couleurs dynamiques en JavaScript

// Générer une couleur aléatoire
const randomHex = '#' + Math.floor(Math.random()*16777215).toString(16);

// Convertir HEX en RGB en JavaScript
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

Outils de design

Des outils comme Figma, Adobe Photoshop et Canva affichent généralement les couleurs en HEX par défaut mais permettent de passer en RGB. Lorsque vous copiez des valeurs de couleur depuis ces outils, vous pouvez avoir besoin de convertir entre les formats pour votre code.

Pour des conversions rapides, le Convertisseur de Couleur gère les formats HEX, RGB et HSL instantanément. Si vous devez convertir entre d'autres systèmes numériques, le Convertisseur de Base Numérique est également utile.

Essayez notre convertisseur de couleur gratuit

Besoin de convertir des couleurs rapidement ? Notre Convertisseur de Couleur supporte les formats HEX, RGB et HSL avec un aperçu en direct de la couleur. Collez simplement votre valeur et obtenez tous les formats instantanément — sans inscription.

Vous pouvez aussi explorer notre Convertisseur d'Unités pour d'autres conversions du quotidien.

Conclusion

HEX et RGB sont les deux faces d'une même pièce — tous deux décrivent exactement les mêmes couleurs avec des systèmes numériques différents. HEX utilise la base 16 pour une notation compacte, tandis que RGB utilise des valeurs décimales familières. Comprendre la conversion entre les deux vous aide à travailler plus efficacement en CSS, JavaScript et dans les outils de design.

Pour en savoir plus sur la modélisation numérique des couleurs, consultez notre guide sur Qu'est-ce qu'un espace colorimétrique ?.

FAQ

La conversion HEX vers RGB est-elle sans perte ?

Non, il n'y a aucune perte. HEX et RGB représentent exactement les mêmes valeurs dans des systèmes numériques différents. La conversion entre les deux est parfaitement réversible sans aucune perte de données.

Le HEX peut-il représenter plus de couleurs que le RGB ?

Non. Les deux formats peuvent représenter exactement 16 777 216 couleurs (256 × 256 × 256). Ils couvrent le même espace colorimétrique — simplement écrit différemment.

Pourquoi les développeurs web préfèrent-ils le HEX ?

Le HEX est plus compact (#f00 vs rgb(255, 0, 0)) et c'est le format traditionnel en HTML et CSS. De nombreux designers le trouvent aussi plus facile à copier depuis les outils de conception.

Comment convertir un HEX à 3 chiffres en RGB ?

Développez chaque chiffre en le doublant : #f00 devient #ff0000, puis convertissez normalement. Donc #f00 → rgb(255, 0, 0).

Le RGB supporte-t-il la transparence ?

Oui — utilisez rgba(R, V, B, A) où A est le canal alpha de 0 (totalement transparent) à 1 (totalement opaque). Le HEX supporte aussi la transparence avec des codes à 8 chiffres : #RRVVBBAА.

Quel est le code HEX du blanc ?

Le blanc est #ffffff en HEX, ce qui équivaut à rgb(255, 255, 255) — tous les canaux à leur intensité maximale.

Peut-on utiliser le HEX dans les propriétés personnalisées CSS ?

Oui. Les valeurs HEX fonctionnent dans les variables CSS comme n'importe quelle autre valeur :

:root { --primary: #3498db; }

Quelle est la différence entre HEX et HSL ?

HEX et RGB définissent les couleurs par l'intensité de chaque canal, tandis que HSL (Teinte, Saturation, Luminosité) définit les couleurs par leurs propriétés visuelles. Le HSL est souvent plus intuitif pour ajuster les couleurs — par exemple, rendre quelque chose de plus clair ou de plus saturé. Utilisez notre Convertisseur de Couleur pour basculer entre les trois formats.