Passez facilement d’un code couleur HEX à une valeur RGB grâce à une méthode simple et vérifiable. Retrouvez aussi un tableau de conversion rapide et un outil gratuit pour éviter les erreurs.
Pour convertir un code HEX en RGB, on sépare les 6 caractères hexadécimaux en 3 paires, puis on transforme chaque paire en nombre décimal : rouge, vert, bleu. Par exemple, #2F80ED devient rgb(47, 128, 237). Dans l’autre sens, on convertit chaque valeur RGB comprise entre 0 et 255 en valeur hexadécimale sur 2 caractères.
Si vous voulez aller plus vite, vous pouvez utiliser notre convertisseur couleur gratuit : vous collez votre code HEX ou RGB, puis l’outil calcule automatiquement l’équivalence.
La conversion est utile quand vous travaillez sur une maquette, une charte graphique, une feuille CSS, un thème WordPress, une refonte de site ou une application web. On vous montre la méthode manuelle, les erreurs à éviter et un tableau pratique pour convertir les valeurs les plus courantes.
Sommaire
- Quelle est la différence entre HEX et RGB ?
- Comment convertir un code HEX en RGB ?
- Comment convertir une couleur RGB en HEX ?
- Quel tableau utiliser pour convertir HEX et RGB ?
- Quelles erreurs éviter lors d’une conversion couleur ?
- Pourquoi utiliser un convertisseur couleur en ligne ?
- Questions fréquentes
- Sources
Quelle est la différence entre HEX et RGB ?
HEX et RGB décrivent la même logique de couleur à l’écran : un mélange de rouge, de vert et de bleu. La différence se trouve dans l’écriture.
Un code HEX CSS s’écrit généralement avec un dièse suivi de 6 caractères, par exemple #FF5733. Les 2 premiers caractères indiquent le rouge, les 2 suivants le vert, les 2 derniers le bleu. Chaque paire utilise la numération hexadécimale, basée sur 16 symboles : 0 à 9, puis A à F.
Une valeur RGB s’écrit sous une forme plus lisible pour beaucoup d’utilisateurs : rgb(255, 87, 51). Ici, les 3 nombres correspondent aussi au rouge, au vert et au bleu. En CSS, chaque composante numérique RGB peut aller de 0 à 255.
À retenir : HEX et RGB ne changent pas la couleur, ils changent seulement la façon de l’écrire. #FF5733 et rgb(255, 87, 51) désignent la même couleur.
Comment convertir un code HEX en RGB ?
Pour passer de HEX en RGB, il faut lire le code par groupes de 2 caractères. Prenons l’exemple #2F80ED.
- Supprimez le dièse :
#2F80EDdevient 2F80ED. - Séparez le code en 3 paires : 2F, 80, ED.
- Associez chaque paire à un canal : rouge = 2F, vert = 80, bleu = ED.
- Convertissez chaque paire hexadécimale en décimal : 2F = 47, 80 = 128, ED = 237.
- Écrivez le résultat au format CSS : rgb(47, 128, 237).
La règle de calcul est simple : dans une paire HEX, le premier caractère vaut sa valeur multipliée par 16, le second caractère est ajouté tel quel. Les lettres ont les valeurs suivantes : A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
Pour 2F, on calcule donc : 2 × 16 + 15 = 47. Pour ED : 14 × 16 + 13 = 237. Vous obtenez bien rgb(47, 128, 237).
Comment convertir une couleur RGB en HEX ?
Pour convertir une couleur RGB en HEX, on fait l’opération inverse. Chaque valeur rouge, vert et bleu doit être transformée en hexadécimal sur 2 caractères.
Prenons rgb(255, 87, 51).
- Notez les 3 valeurs : rouge = 255, vert = 87, bleu = 51.
- Convertissez 255 en hexadécimal : FF.
- Convertissez 87 en hexadécimal : 57.
- Convertissez 51 en hexadécimal : 33.
- Ajoutez le dièse et rassemblez les valeurs :
#FF5733.
Si une valeur donne un seul caractère en hexadécimal, ajoutez un 0 devant. Par exemple, rgb(5, 10, 15) devient #050A0F, pas #5AF. Cette règle évite les ambiguïtés quand vous travaillez avec un code HEX sur 6 caractères.
Le format court existe aussi en CSS : #FFF équivaut à #FFFFFF, #000 équivaut à #000000, #F00 équivaut à #FF0000. Mais il n’est possible que lorsque chaque paire contient 2 caractères identiques.
Quel tableau utiliser pour convertir HEX et RGB ?
Ce tableau vous aide à convertir rapidement les valeurs hexadécimales les plus fréquentes. Il est particulièrement utile pour comprendre la logique de calcul avant d’utiliser un convertisseur automatique.
| HEX | Décimal RGB | Utilisation fréquente |
|---|---|---|
| 00 | 0 | Valeur minimale d’un canal |
| 0A | 10 | Valeur faible |
| 10 | 16 | Base hexadécimale |
| 1F | 31 | Couleur très sombre |
| 33 | 51 | Palier courant dans les palettes web |
| 40 | 64 | Quart environ de l’intensité maximale |
| 57 | 87 | Exemple dans #FF5733 |
| 66 | 102 | Palier courant |
| 80 | 128 | Milieu de la plage 0 à 255 |
| 99 | 153 | Palier courant |
| CC | 204 | Couleur claire |
| ED | 237 | Exemple dans #2F80ED |
| FF | 255 | Valeur maximale d’un canal |
Exemple d’utilisation du tableau : si vous voyez #336699, vous lisez 33, 66, 99. Le tableau donne 51, 102 et 153. Le résultat est donc rgb(51, 102, 153).
Pour une conversion ponctuelle, ce tableau suffit. Pour une série de couleurs, une palette complète ou des variantes avec transparence, notre outil gratuit de conversion HEX RGB est plus confortable.
Quelles erreurs éviter lors d’une conversion couleur ?
Les erreurs de conversion viennent souvent de détails très simples. Voici les plus courantes.
- Oublier le 0 devant une petite valeur : rgb(8, 8, 8) doit s’écrire
#080808, pas#888si vous voulez conserver le format complet. - Inverser l’ordre des canaux : en HEX comme en RGB, l’ordre est toujours rouge, vert, bleu.
- Confondre 100 et FF : en RGB, le maximum est 255. En HEX, le maximum sur une paire est FF.
- Utiliser une valeur RGB hors plage : une valeur comme rgb(300, 20, 20) n’est pas une écriture correcte pour une conversion classique.
- Penser que les majuscules changent la couleur :
#ff5733et#FF5733représentent la même couleur. - Réduire un code HEX trop vite :
#AABBCCpeut devenir#ABC, mais#ABCD12ne peut pas être réduit en#AD2.
Autre point important : la conversion ne valide pas le contraste. Deux couleurs peuvent être correctement converties, mais difficiles à lire ensemble. Pour un texte et son arrière plan, les règles WCAG indiquent notamment un ratio de contraste minimal de 4,5:1 pour du texte normal au niveau AA, avec des exceptions selon le cas d’usage.
Pourquoi utiliser un convertisseur couleur en ligne ?
La méthode manuelle est utile pour comprendre ce que vous faites. Mais au quotidien, un convertisseur évite les erreurs de saisie, surtout quand vous manipulez plusieurs couleurs à la fois.
Sur un projet web, une couleur peut passer par plusieurs mains : designer, développeur, intégrateur, chargé de communication, client. Certains outils affichent les couleurs en HEX, d’autres en RGB, parfois aussi en HSL. Une conversion fiable permet de garder une cohérence entre la maquette, le CSS et les supports de marque.
Besoin de convertir une couleur sans calcul ? Collez votre code dans le convertisseur couleur gratuit d’Osmova pour obtenir instantanément l’équivalence HEX, RGB et d’autres formats utiles.
On met aussi à disposition d’autres ressources pratiques sur notre page outils gratuits en ligne. Si votre besoin dépasse la conversion de couleurs et touche à la cohérence graphique d’un site, à son interface ou à son intégration, vous pouvez aussi consulter nos services de création de site internet et de refonte de site internet.
Questions fréquentes
HEX et RGB donnent ils exactement la même couleur ?
Oui, si les valeurs correspondent. #FF0000 et rgb(255, 0, 0) désignent le même rouge en CSS. La différence est seulement le format d’écriture.
Le dièse est il obligatoire dans un code HEX ?
En CSS, la notation hexadécimale d’une couleur s’écrit avec un dièse, par exemple #000000. Dans certains outils, vous pouvez coller 000000 sans dièse, mais le format CSS complet reste #000000.
Quand peut on utiliser un code HEX court ?
Vous pouvez utiliser un code court lorsque chaque paire contient 2 caractères identiques. #FFFFFF peut devenir #FFF, #336699 peut devenir #369, mais #2F80ED ne peut pas être raccourci.
Comment convertir une couleur avec transparence ?
La transparence ajoute un canal alpha. En RGB moderne, on peut l’écrire avec une valeur après une barre oblique, par exemple rgb(255 0 0 / 50%). En HEX, certains usages acceptent 8 caractères, avec les 2 derniers pour l’alpha.
Faut il utiliser HEX ou RGB dans un fichier CSS ?
Les deux sont valides. HEX est compact pour les couleurs fixes, tandis que RGB peut être plus lisible quand vous manipulez des variables, des effets de transparence ou des calculs de couleur.
