Convertir HEX en RGB Hexadecimal ↔ Red Green Blue Gratuit En ligne Sûr
Saisissez une valeur en HEX et lisez-la aussitôt en RGB. Le calcul se fait dans votre navigateur, rien n'est envoyé nulle part, et ce dont dépend le résultat est écrit plus bas plutôt que supposé.
Rien n'est envoyé
D'où viennent ces notations
L'hexadécimal et le RGB sont la même chose écrite deux fois. Une couleur d'écran, ce sont trois nombres — combien de lumière rouge, verte et bleue émettre —, chacun de 0 à 255, soit un octet ; l'hexadécimal écrit simplement ces octets en base seize, si bien que #FF8800 et rgb(255, 136, 0) sont le même ordre donné au même pixel. Le HSL fut inventé parce qu'aucun des deux n'est lisible par un humain : il donne la teinte comme un angle sur une roue chromatique, la saturation et la clarté en pourcentages, de sorte qu'un graphiste peut éclaircir quelque chose sans recalculer trois chiffres. Le CMJN appartient à un tout autre monde — l'encre, non la lumière. Il est soustractif, bâti sur quatre plaques d'impression, et il n'atteint pas toutes les couleurs d'un écran, car l'écran émet de la lumière tandis que le papier ne fait que la renvoyer.
Où vous les rencontrez
L'hexadécimal est ce que l'on tape dans une feuille de style et ce qu'un outil de création vous tend. Le RGB paraît partout où une couleur demande du calcul : dégradés, transparence, code qui calcule une nuance. On se tourne vers le HSL pour ajuster une palette à la main, car les changements voulus sont d'ordinaire des changements de l'un de ses trois nombres. Le CMJN est ce que réclame l'imprimeur, et la conversion vers lui est l'instant où une maquette cesse d'être lumière pour devenir encre.
Questions fréquentes
Pourquoi mon résultat CMJN diffère-t-il de celui de mon imprimeur ?
Parce qu'il n'existe pas une seule conversion correcte. Le calcul de cette page est le calcul simple, indépendant du périphérique : la bonne réponse quand on cherche un point de départ ou un équivalent approché. Un imprimeur convertit via un profil colorimétrique tenant compte de l'encre, du papier et de la presse ; la même couleur RGB donnera d'autres valeurs CMJN sur couché brillant que sur non couché. Pour ce qui doit correspondre exactement, demandez son profil à l'imprimeur plutôt que de vous fier à une formule.
Pourquoi certaines couleurs d'écran ne s'impriment-elles pas ?
Parce que les deux n'atteignent pas les mêmes couleurs. Un écran fait la couleur en ajoutant de la lumière et peut produire un cyan ou un vert vif et saturé que l'encre ne sait pas égaler ; le papier fait la couleur en absorbant la lumière, et le plus clair qu'il puisse être est le blanc de la page. L'ensemble des couleurs accessibles s'appelle le gamut, et là où les deux ne se recouvrent pas, une conversion doit choisir la couleur disponible la plus proche. C'est pourquoi une couleur éclatante à l'écran paraît souvent un peu terne à l'impression.
Le résultat est-il exact ?
Là où les deux unités se définissent l'une par l'autre en nombres entiers, oui — la page le dit au-dessus du chiffre, et le seul arrondi porte sur le nombre de décimales affichées. Là où le rapport n'a pas de décimale finie, la page affiche douze chiffres significatifs et qualifie la relation d'approchée plutôt que de prétendre le contraire.
Ce que je saisis quitte-t-il mon appareil ?
Non. Le calcul se fait dans votre navigateur ; rien n'est envoyé, et il n'y a d'ailleurs aucun serveur pour le recevoir. Une fois la page chargée, elle fonctionne réseau coupé.
Pourquoi on convertit du HEX en RGB
Un outil de conception vous donne une couleur sous la forme #5A4632. Une feuille de style, un script de canevas, une bibliothèque de graphiques ou un logiciel graphique la demande sous la forme rgb(90, 70, 50). C'est la même couleur, et le travail pour passer d'une écriture à l'autre revient sans cesse : une charte de marque énumère des codes hexadécimaux et votre code a besoin de nombres pour calculer une nuance plus claire ; un client envoie une couleur tirée d'un logo et vous devez remplir un rgba() avec de la transparence ; une bibliothèque n'accepte que trois valeurs séparées. Convertir du HEX en RGB est une petite tâche, et un convertisseur fiable vous évite de faire de l'arithmétique en base seize de tête et de vous tromper.
La conversion est exacte, ce qui n'est pas vrai de toutes les conversions de couleur. L'hexadécimal et rgb() sont deux écritures des trois mêmes nombres, les quantités de lumière rouge, verte et bleue qu'un écran doit émettre, chacune de 0 à 255. Rien n'est approximé, et un aller-retour redonne ce dont il est parti. Cette page le fait dans votre navigateur, et rien n'est envoyé. Vous trouverez plus bas comment les chiffres hexadécimaux se rapportent aux trois nombres, comment la transparence est reportée, ce que fait la forme abrégée, les limites du sRGB et les situations où développeurs et graphistes ont besoin de convertir du HEX en RGB.
Comment fonctionne la conversion
Trois paires de chiffres deviennent trois nombres
Une couleur hexadécimale est un dièse suivi de six chiffres hexadécimaux, lus par paires : la première paire est le rouge, la deuxième le vert, la troisième le bleu. Chaque paire est un nombre en base seize compris entre 00 et FF, soit 0 à 255 dans le système décimal que vous utilisez tous les jours. #5A4632 se découpe donc en 5A, 46 et 32. 5A vaut 5 × 16 + 10 = 90, 46 vaut 4 × 16 + 6 = 70, et 32 vaut 3 × 16 + 2 = 50. La couleur est rgb(90, 70, 50), l'exemple avec lequel la page démarre.
Pourquoi les chiffres vont de 0 à F
La base seize demande seize symboles ; après le 9 viennent donc les lettres A à F, qui valent 10 à 15. Une paire de tels chiffres donne 16 × 16 = 256 valeurs, exactement ce qu'un octet peut contenir. Une couleur d'écran, c'est trois octets, et l'hexadécimal n'est qu'une manière compacte de les écrire : six caractères au lieu de trois nombres avec des virgules et des parenthèses.
Majuscules et minuscules
#5a4632 et #5A4632 sont la même couleur. CSS accepte l'un comme l'autre, et ce convertisseur aussi. Choisissez une convention pour un projet et tenez-vous-y, car une casse mêlée rend la recherche dans une feuille de style plus difficile.
Ce que la conversion conserve et ce qu'elle ne peut pas
Elle conserve la couleur, exactement
L'hexadécimal et rgb() sont deux écritures des trois mêmes nombres, 0 à 255 pour le rouge, le vert et le bleu ; rien n'est donc approximé et un aller-retour redonne ce dont il est parti. Convertissez du HEX en RGB et retour, et vous retrouvez le même code qu'au départ, à l'exception possible des majuscules.
Elle reporte la transparence
Une quatrième valeur pour la transparence est reportée aussi : #RRGGBBAA devient rgba(), et inversement. La dernière paire est le canal alpha, de 00, totalement transparent, à FF, totalement opaque. #5A463280 est donc rgba(90, 70, 50, 0.5), puisque 80 en hexadécimal vaut 128, et que 128 sur 255 fait à peu près la moitié. Les huit chiffres sont acceptés par tous les navigateurs actuels.
Elle ne peut pas décrire les couleurs hors du sRGB
Les deux écritures décrivent le sRGB, l'espace colorimétrique qu'un écran utilise depuis trente ans. Elles ne peuvent pas décrire une couleur hors de cet espace, et c'est à cela que servent les notations CSS plus récentes, lab(), oklch() et color(). Les écrans modernes peuvent montrer des couleurs plus saturées que ce que contient le sRGB, et un graphiste qui a choisi une telle couleur dans un outil à large gamme la verra écrêtée au sRGB quand elle est écrite en hexadécimal.
La forme abrégée est développée, non conservée
La forme abrégée est développée plutôt que conservée : #abc revient en #AABBCC, la même couleur écrite en long. Chaque chiffre est doublé. Cela signifie que vous pouvez coller un code à trois chiffres et obtenir les bons nombres, mais que vous ne pouvez pas retrouver l'écriture courte à partir de la longue en la regardant, seulement en vérifiant que chaque paire se répète.
Couleurs courantes et leurs nombres
Quelques-unes à retenir
Le blanc est #FFFFFF, soit rgb(255, 255, 255) : les trois lumières à pleine puissance. Le noir est #000000, rgb(0, 0, 0) : aucune lumière du tout. Le rouge pur est #FF0000, le vert #00FF00 et le bleu #0000FF. Un gris moyen est n'importe quel code à trois paires égales, comme #808080, soit rgb(128, 128, 128). Des paires égales signifient toujours un gris, car des quantités égales des trois lumières ne donnent aucune teinte.
Lire un code d'un coup d'œil
Une fois que vous connaissez le principe, vous pouvez estimer une couleur à partir de ses chiffres hexadécimaux. Un code qui commence par une première paire élevée est rougeâtre, une paire centrale élevée verdâtre, une dernière paire élevée bleutée. #FF8800 est beaucoup de rouge, un peu de vert et pas de bleu, c'est-à-dire de l'orange. Vous n'avez pas besoin d'outil pour cela, mais vous en avez besoin pour les nombres exacts.
Comment convertir du HEX en RGB ici
Saisissez ou collez le code hexadécimal
Entrez la couleur dans le premier champ, avec ou sans dièse. Les formes à trois, six et huit chiffres sont acceptées.
Lisez la valeur RGB
La réponse apparaît aussitôt dans l'autre champ, sous la forme rgb(90, 70, 50), ou rgba() si le code portait de la transparence. La page affiche la phrase #5A4632 = rgb(90, 70, 50) pour que vous puissiez vérifier d'un coup d'œil.
Copiez-la dans votre code
Collez le résultat dans la feuille de style, le script ou l'outil qui l'a demandé. Si vous avez besoin des trois nombres séparément, ce sont ceux entre parenthèses.
D'où viennent ces notations
L'hexadécimal et le RGB sont la même chose écrite deux fois
Une couleur d'écran, ce sont trois nombres, la quantité de lumière rouge, verte et bleue à émettre, chacun de 0 à 255, soit un octet. L'hexadécimal écrit simplement ces octets en base seize ; #FF8800 et rgb(255, 136, 0) sont donc la même instruction adressée au même pixel.
HSL et CMYK
Le HSL a été inventé parce qu'aucune des deux n'est lisible pour un humain : il donne la teinte comme un angle autour d'un cercle chromatique, avec la saturation et la luminosité en pourcentages, si bien qu'un graphiste peut éclaircir quelque chose sans recalculer trois chiffres. Le CMYK appartient à un tout autre monde, celui de l'encre plutôt que de la lumière. Il est soustractif, construit à partir de quatre plaques d'impression, et ne peut pas atteindre toutes les couleurs qu'un écran peut montrer, parce qu'un écran émet de la lumière alors que le papier ne fait que la réfléchir. Pour ceux-là, voir Convertir HEX en HSL et Convertir HEX en CMYK.
Où vous les rencontrez
Dans les feuilles de style
L'hexadécimal est ce que vous tapez dans une feuille de style et ce que vous donne un outil de conception. Le RGB apparaît partout où une couleur demande de l'arithmétique : dégradés, transparence, code qui calcule une nuance. Connaître les deux écritures et savoir passer de l'une à l'autre fait partie du travail quotidien du développement front-end.
Dans les scripts et le dessin sur canevas
Le code de dessin veut souvent les trois nombres séparément, pour mélanger deux couleurs, en assombrir une d'une quantité fixe ou tester si un pixel correspond à une cible. Convertir du HEX en RGB vous donne directement les nombres.
Dans les outils graphiques et d'images
Les éditeurs d'images montrent généralement une couleur sous forme de trois nombres ou de code hexadécimal, et vous laissent saisir l'un ou l'autre. Passer de l'un à l'autre vous permet de reproduire une couleur d'une page web dans un programme qui veut des nombres.
Dans la documentation et les chartes de marque
Une charte de marque peut donner une couleur en hexadécimal pour le web, en RGB pour les écrans et en CMYK pour l'impression. Faire concorder les deux premières est affaire d'une conversion, et c'est le genre de vérification qui attrape une faute de frappe avant qu'elle soit imprimée sur mille dépliants.
Usages pratiques de la forme RGB
De la transparence sans seconde couleur
Avec rgba(90, 70, 50, 0.5), vous obtenez la couleur à demi-intensité, de sorte que ce qui se trouve derrière transparaît. C'est la manière standard de faire des surcouches, des ombres et des fonds teintés à partir d'une couleur de marque sans en inventer une nouvelle.
Calculer des nuances plus claires et plus sombres
Pour assombrir légèrement un état de survol, un script peut soustraire une quantité fixe à chacun des trois nombres. Faire de même sur une chaîne hexadécimale est malcommode ; sur du RGB, c'est de l'arithmétique simple. Si vous avez besoin d'un ajustement fondé sur la teinte, convertissez plutôt le HEX en HSL.
Vérifications de contraste
Les outils d'accessibilité calculent le contraste entre deux couleurs à partir de leurs valeurs de rouge, de vert et de bleu. Avec les nombres, vous pouvez faire le calcul vous-même ou les coller dans un vérificateur, pour confirmer que le texte sur un fond est lisible.
Pièges quand on convertit du HEX en RGB
Oublier la paire alpha
Un code à huit chiffres porte la transparence dans les deux derniers chiffres. Si vous les retirez, vous la perdez. Vérifiez la longueur du code avant de décider que le résultat est la couleur.
Confondre l'ordre
L'hexadécimal est rouge, vert, bleu. Quelques formats et certaines vieilles API graphiques utilisent bleu, vert, rouge. Si une couleur sort fausse dans un programme précis, vérifiez l'ordre de ses canaux.
Copier depuis une capture d'écran
Une couleur lue sur une capture d'écran est la couleur après la gestion des couleurs de l'écran et une éventuelle compression. Elle peut différer légèrement de la couleur du fichier source. Utilisez le fichier de conception quand vous le pouvez.
Supposer que les écrans s'accordent
Deux écrans montrent le même code de façon légèrement différente. Les nombres sont exacts ; ce que vous voyez dépend de l'affichage et de son profil.
Questions que l'on se pose avant de convertir
Que vaut #FF0000 en RGB ?
rgb(255, 0, 0), le rouge pur.
Que vaut #FFFFFF en RGB ?
rgb(255, 255, 255), le blanc.
Puis-je convertir un code à trois chiffres ?
Oui. Chaque chiffre est doublé : #09C devient #0099CC, soit rgb(0, 153, 204).
La conversion est-elle exacte ?
Oui. Ce sont deux écritures des trois mêmes nombres.
Ma couleur est-elle envoyée ?
Non. L'arithmétique s'exécute dans votre navigateur et rien n'est envoyé nulle part.
Comment revenir en arrière ?
Avec Convertir RGB en HEX, qui écrit les trois nombres sous forme de code hexadécimal.
Bien choisir quand vous convertissez du HEX en RGB
Savoir ce dont vous avez besoin ensuite
Si vous avez besoin de transparence, rgba() est la forme naturelle. Si vous devez ajuster la luminosité ou la teinte, le HSL est plus facile. Si la couleur part à l'impression, le CMYK est l'étape suivante, avec les réserves que porte la conversion. Voir Convertir RGB en CMYK.
Garder l'hexadécimal comme référence
Pour les couleurs d'une palette de marque, gardez le code hexadécimal comme référence. Il est court, sans ambiguïté et compris partout. Dérivez-en les autres formes quand vous en avez besoin.
Utiliser des propriétés personnalisées
En CSS, définissez les couleurs une fois, comme --brand: #5A4632, et référez-vous-y par leur nom. Si vous avez besoin des nombres pour rgba(), définissez aussi --brand-rgb: 90 70 50. La conversion est alors faite une seule fois.
Le CSS moderne et la forme RGB
Syntaxe séparée par des espaces
Le CSS actuel accepte rgb() avec des espaces et une barre oblique pour la transparence, comme dans rgb(90 70 50 / 50%). Les nombres sont les mêmes que dans la forme à virgules ; le résultat d'une conversion fonctionne donc dans les deux. Les navigateurs plus anciens et certains outils attendent les virgules ; la forme à virgules reste donc le choix sûr quand vous ne savez pas où la couleur sera utilisée.
Pourcentages et fractions
Le RGB peut aussi s'écrire avec des pourcentages, comme rgb(35% 27% 20%), où 100 pour cent vaut 255. La page donne des nombres entiers parce que c'est ce que stocke l'hexadécimal et ce qu'attendent la plupart des outils. Si vous avez besoin de pourcentages, divisez chaque nombre par 255 et multipliez par 100.
Propriétés personnalisées pour les trois nombres
Une astuce courante consiste à ne stocker que les trois nombres dans une propriété personnalisée, --brand-rgb: 90 70 50, et à l'utiliser sous la forme rgb(var(--brand-rgb) / 0.5). Une seule définition sert alors aux usages pleins comme translucides. Quand vous convertissez du HEX en RGB dans ce but, copiez seulement les nombres de la réponse.
Travailler la couleur en pratique
Vérifier par rapport à la charte de marque
Si une charte de marque donne à la fois l'hexadécimal et le rgb pour la même couleur, convertissez l'un et comparez avec l'autre. Un écart signifie généralement une faute de frappe dans la charte, et la trouver avant qu'elle soit utilisée sur chaque page vaut la minute que cela prend.
Tenir une palette sous forme de courte liste
La plupart des sites utilisent de cinq à huit couleurs. Écrivez-les dans une note sous les deux formes. Chaque fois que vous devez convertir du HEX en RGB pour un nouveau composant, vous pouvez la consulter au lieu de refaire le calcul, et la palette reste homogène.
Nommer les couleurs par rôle
Des noms comme principale, surface et alerte survivent mieux aux refontes que des noms comme vert ou brun. La conversion donne les nombres ; le nom dit à quoi ils servent.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir en arrière, utilisez Convertir RGB en HEX. Pour les couleurs décrites par la teinte, Convertir HEX en HSL et Convertir HSL en HEX sont à portée de main, et pour l'impression, Convertir HEX en CMYK, Convertir CMYK en HEX et Convertir CMYK en RGB. Pour les tailles de la même feuille de style, Convertir px en rem et Convertir px en em font pour les longueurs ce que cette page fait pour les couleurs.
Un exemple détaillé
Supposons que votre couleur de marque soit #1E7A5C et que vous vouliez une version translucide pour le fond d'une carte. Vous saisissez le code et lisez rgb(30, 122, 92). Dans la feuille de style, vous écrivez background: rgba(30, 122, 92, 0.12), une teinte très claire du même vert, et une bordure de rgba(30, 122, 92, 0.4). La carte s'installe confortablement sur une page blanche comme sur une page grise, parce que la transparence laisse passer la page. Quand la couleur de la marque change plus tard, vous remplacez les trois nombres dans une seule propriété personnalisée, et chaque teinte suit.
Une courte liste de contrôle
Avant de convertir
Vérifiez la longueur du code : trois, six ou huit chiffres. Décidez si vous avez besoin de transparence.
Pendant la conversion
Collez le code, lisez la valeur RGB et copiez-la avec ses parenthèses, ou seulement les trois nombres.
Après la conversion
Testez la couleur en contexte, sur le vrai fond, et vérifiez le contraste du texte qui s'y trouve.
Erreurs courantes
Omettre la paire de transparence
Huit chiffres signifient alpha. Gardez-la ou convertissez-la en rgba().
Confondre l'ordre des canaux
L'hexadécimal commence par le rouge. Certains outils attendent le bleu d'abord.
Prendre l'écran pour la vérité
Les nombres sont exacts. L'aspect dépend de l'affichage.
Vos couleurs restent sur votre appareil
Le calcul se fait en local. Vos valeurs sont utilisées par votre propre navigateur et rien n'est envoyé nulle part. Il n'y a rien à supprimer ensuite et aucun compte à créer. C'est la manière simple de convertir du HEX en RGB.
Résumé
Pour convertir du HEX en RGB ici, saisissez ou collez le code hexadécimal et lisez aussitôt la valeur RGB. La conversion conserve la couleur exactement : l'hexadécimal et rgb() sont deux écritures des trois mêmes nombres, 0 à 255 pour le rouge, le vert et le bleu ; rien n'est donc approximé et un aller-retour redonne ce dont il est parti. Une quatrième valeur pour la transparence est reportée aussi, puisque #RRGGBBAA devient rgba(), et inversement. Les deux écritures décrivent le sRGB et ne peuvent donc pas décrire les couleurs hors de cet espace, et la forme abrégée est développée plutôt que conservée : #abc revient en #AABBCC. Rien n'est envoyé.