Conversion d’un code hexadécimal en RGB: le fonctionnement exact
Cette page transforme un code hexadécimal (comme #4f46e5 ou #abc) en ses trois valeurs RGB (rouge, vert, bleu) comprises entre 0 et 255. Contrairement à un convertisseur générique, elle repose sur une conversion mathématique stricte de la base‑16 vers la base‑10, sans approximation ni arrondi. Les codes hexadécimaux sont en réalité une notation compacte des mêmes canaux de couleur que le RGB, mais écrite en hexadécimal. Cette page explicite ce lien en affichant instantanément les trois nombres entiers que les écrans et les logiciels de conception utilisent directement.
Pourquoi convertir un hexadécimal en RGB?
Les feuilles de style CSS acceptent les deux formats: color: #ff6600 et color: rgb(255,102,0). Le code hexadécimal est plus court à écrire, mais le RGB est souvent nécessaire pour des manipulations programmatiques: créer des dégradés, ajuster la luminosité ou passer les valeurs à une API Canvas. De plus, les logiciels de retouche d’image ou de conception demandent fréquemment les canaux numériques. Cette page fournit donc le pont entre ces deux représentations, sans aucune perte d’information.
Le mécanisme de conversion: de la base‑16 à la base‑10
Un code hexadécimal valide pour cette page se compose de six chiffres hexadécimaux (0‑9, A‑F) après le # optionnel. Chaque paire correspond à un canal: les deux premiers pour le rouge, les deux suivants pour le vert, les deux derniers pour le bleu. La conversion de chaque paire en décimal utilise la formule:
Valeur décimale = (premier chiffre × 16) + (deuxième chiffre)
Ainsi, pour #4f46e5:
- Rouge:
4f→(4 × 16) + 15 = 79 - Vert:
46→(4 × 16) + 6 = 70 - Bleu:
e5→(14 × 16) + 5 = 229
Le triplet RGB obtenu est donc (79, 70, 229). Cette conversion est exacte et réversible: si vous reconvertissez 79 en hexadécimal, vous retrouvez 4f. Aucun arrondi n’intervient.
Notation abrégée à trois chiffres: expansion automatique
Certains codes hexadécimaux s’écrivent sous une forme raccourcie à trois chiffres, par exemple #abc. Cette page accepte cette notation et l’étend automatiquement avant la conversion. Chaque chiffre est doublé: a devient aa, b devient bb, c devient cc. Ainsi #abc devient #aabbcc, soit un rouge de 0xAA = 170, un vert de 0xBB = 187, un bleu de 0xCC = 204.
| Format abrégé | Expansion complète | RGB résultant |
|---|---|---|
#abc |
#aabbcc |
(170,187,204) |
#f00 |
#ff0000 |
(255,0,0) |
#369 |
#336699 |
(51,102,153) |
Cette règle vient de la spécification CSS, où les codes à trois chiffres sont équivalents à ceux à six chiffres lorsque chaque paire est identique.
Règles strictes et cas limites
L’outil n’accepte que des codes hexadécimaux à six ou trois chiffres (avec ou sans #). Si vous entrez un code à huit chiffres (incluant un canal alpha), ou tout autre format invalide, le message d’erreur suivant s’affiche:
« Enter a hex color like #4f46e5 or #abc. »
Ce message est en anglais dans l’interface, mais l’article étant en français canadien, il faut le savoir. L’outil ne fait aucune conversion si le format n’est pas respecté. Les lettres peuvent être minuscules ou majuscules, peu importe (#AABBCC est équivalent à #aabbcc). Le # en tête est optionnel: vous pouvez taper 1E90FF sans le dièse.
Tous les calculs sont effectués localement dans votre navigateur. Aucune donnée n’est envoyée vers un serveur. Vous pouvez donc utiliser l’outil en toute confidentialité, même pour des couleurs faisant partie d’une charte graphique sensible.
Couleurs affichées simultanément: RGB, HSL, HSV, CMYK, LAB
Dès que vous saisissez un code hexadécimal valide (ou utilisez le sélecteur de couleur intégré), l’outil met à jour tous les champs de couleur: RGB, HSL (teinte, saturation, luminosité), HSV (teinte, saturation, valeur), CMYK (cyan, magenta, jaune, noir) et LAB (CIELAB). Cette mise à jour est instantanée et réciproque: si vous modifiez manuellement la valeur RGB, le champ hexadécimal se met à jour en conséquence.
Par exemple, pour #4f46e5, voici les valeurs correspondantes:
| Format | Valeur |
|---|---|
| RGB | (79, 70, 229) |
| HSL | (244°, 75%, 59%) |
| HSV | (244°, 69%, 90%) |
| CMYK | (65%, 69%, 0%, 10%) |
| LAB | (37, 47, -76) |
Notez que les valeurs LAB sont approximatives car la conversion depuis RGB vers LAB repose sur un espace colorimétrique et un illuminant définis (généralement D65 et sRGB). La conversion RGB vers hexadécimal, elle, reste exacte.
Pour qui cet outil est‑il conçu?
- Développeurs front‑end qui doivent passer d’un code CSS hexadécimal à des valeurs numériques RGB pour du code JavaScript, une toile Canvas ou des styles en ligne.
- Designers graphiques qui reçoivent des couleurs sous forme hexadécimale dans une charte et doivent les saisir dans Photoshop, Illustrator ou Sketch avec des curseurs RGB.
- Artistes numériques travaillant avec des jeux vidéo ou des applications interactives qui manipulent les canaux de couleur par programmation.
- Étudiants souhaitant comprendre le lien entre la notation hexadécimale et le modèle additif RVB des écrans.
Questions fréquentes (FAQ)
1. Pourquoi mon code #1234 est‑il rejeté?
Cette page n’accepte que les codes à trois ou six chiffres. Un code à quatre chiffres (comme #RGBA) n’est pas pris en charge. Si vous avez besoin de gérer l’alpha, utilisez plutôt la page dédiée aux codes hexadécimaux à huit chiffres.
2. Puis‑je utiliser des lettres minuscules ou majuscules?
Oui, #aabbcc et #AABBCC donnent le même résultat. L’outil n’est pas sensible à la casse.
3. Le dièse # est‑il obligatoire?
Non. Vous pouvez entrer ff6600 sans le # et la conversion se fera correctement.
4. Que se passe‑t‑il si j’entre #ggg?
La lettre g n’est pas un chiffre hexadécimal valide. L’outil affichera le message d’erreur indiquant d’entrer un code comme #4f46e5 ou #abc.
5. Les valeurs RGB sont‑elles toujours entières?
Oui. Puisque chaque paire hexadécimale est convertie exactement en un entier entre 0 et 255, il n’y a jamais de décimale.
6. Puis‑je convertir en sens inverse (RGB vers hexadécimal)?
Oui, en éditant directement le champ RGB, le champ hexadécimal se met à jour automatiquement. L’outil effectue la conversion dans les deux sens.
Liens avec la théorie des couleurs et l’accessibilité
Connaître les valeurs RGB d’une couleur permet de calculer sa luminance relative selon la formule WCAG:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
où R, G, B sont d’abord linéarisés (après correction gamma). Ce calcul de luminance sert à déterminer le contraste entre deux couleurs, essentiel pour l’accessibilité web. Par exemple, #4f46e5 donne une luminance d’environ 0,10 (valeur basse), ce qui signifie que du texte blanc sur ce fond aura un bon contraste.
Les codes hexadécimaux sont omniprésents sur le web parce qu’ils sont compacts et faciles à retenir (par exemple #ff0000 pour le rouge pur). Mais derrière cette concision se cachent toujours trois nombres qui définissent précisément la couleur perçue sur un écran. Cette page rend cette correspondance transparente et immédiate.