HEX vers RGB : Le guide complet de conversion

Chaque couleur que vous voyez sur un écran est fondamentalement trois nombres : rouge, vert et bleu. La question est seulement comment ces nombres sont écrits. La notation HEX les compresse en une chaîne de six caractères familière aux designers et développeurs. La notation RGB les décompresse en trois valeurs explicites utilisées dans les fonctions CSS, les tokens de design et les pipelines de données.

Ce guide couvre le tableau complet — les mathématiques derrière l'encodage hexadécimal, le modèle RGB, une conversion manuelle étape par étape et les règles pratiques pour choisir entre HEX et RGB dans les workflows réels de CSS et de design.

Comment fonctionne l'encodage hexadécimal

L'hexadécimal est un système de numération en base 16 utilisant les chiffres 0–9 et les lettres A–F, où A=10, B=11, C=12, D=13, E=14, F=15. Une paire de deux caractères hex peut représenter des valeurs de 00 (0 en décimal) à FF (255 en décimal). C'est exactement la plage nécessaire pour un seul canal de couleur. Un code HEX de six caractères comme #3A7BD5 est trois paires : 3A (rouge), 7B (vert), D5 (bleu). Le préfixe # est une convention CSS. Les codes abrégés comme #FFF s'étendent à #FFFFFF — chaque chiffre est doublé.

Le modèle de couleur RGB

RGB signifie Rouge, Vert, Bleu — les trois canaux primaires du mélange de couleurs additif utilisé par chaque affichage numérique. Chaque canal va de 0 (aucun) à 255 (maximum). rgb(0, 0, 0) est le noir pur ; rgb(255, 255, 255) est le blanc pur. Le modèle est additif : mélanger le rouge et le vert maximum produit le jaune (rgb(255, 255, 0)). C'est l'opposé du mélange soustractif utilisé en peinture ou impression. CSS accepte également la syntaxe moderne sans virgules : color: rgb(58 123 213).

Conversion manuelle étape par étape

Pour convertir #3A7BD5 en RGB : divisez en paires 3A, 7B, D5. Convertissez chaque paire de hex en décimal. Pour 3A : 3 × 16 + 10 = 58. Pour 7B : 7 × 16 + 11 = 123. Pour D5 : 13 × 16 + 5 = 213. Résultat : rgb(58, 123, 213). Pour l'opération inverse, divisez chaque valeur décimale par 16, prenez le quotient comme premier chiffre hex et le reste comme second.

#3A7BD5

R = 3A → 3×16 + 10 = 58
G = 7B → 7×16 + 11 = 123
B = D5 → 13×16 + 5 = 213

Résultat : rgb(58, 123, 213)

HEX vs RGB en CSS : quand utiliser chacun

HEX est compact et universellement supporté. Utilisez-le pour les valeurs de couleur statiques en CSS, les systèmes de design et partout où la brièveté est importante. RGB est préférable lorsque vous devez manipuler la couleur en JavaScript ou avec calc() en CSS. Les propriétés personnalisées CSS fonctionnent aussi bien avec l'un ou l'autre : --brand: #3A7BD5 ou --brand: rgb(58 123 213).

Canal alpha : HEX8 vs rgba()

La transparence est ajoutée différemment dans chaque format. En HEX, ajoutez deux chiffres hex supplémentaires pour l'alpha : #3A7BD5FF est entièrement opaque, #3A7BD580 est à 50% transparent. En CSS, rgba() était l'approche traditionnelle : rgba(58, 123, 213, 0.5). Le CSS moderne permet également à rgb() d'accepter un alpha optionnel : rgb(58 123 213 / 0.5). HEX8 est supporté dans tous les navigateurs modernes mais peut être moins lisible.

Cas d'usage pratiques

Les tokens de design stockent généralement les couleurs en HEX pour la portabilité entre les outils (Figma, Storybook, Style Dictionary). Les variables CSS peuvent contenir l'un ou l'autre format. Lors du passage de couleurs à la Canvas API ou aux shaders WebGL, des valeurs RGB sont nécessaires — la chaîne HEX doit d'abord être analysée avec parseInt("3A", 16). Pour les animations CSS avec color-mix() ou les transitions @property, le format rgb() ou hsl() offre aux navigateurs plus de flexibilité d'interpolation.

Questions fréquentes