Convertir RGB en HEX Red Green Blue ↔ Hexadecimal Gratuit En ligne Sûr
Saisissez une valeur en RGB et lisez-la aussitôt en HEX. 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 RGB en HEX
Un éditeur d'images, un sélecteur de couleurs du système d'exploitation ou une ligne de code vous donne une couleur sous forme de trois nombres : 90, 70, 50. Une feuille de style, un fichier de jetons de conception ou un message à un collègue la veut sous forme d'un seul code court : #5A4632. L'étape entre les deux, c'est ce que fait cette page. Convertir du RGB en HEX, c'est écrire les trois mêmes nombres en base seize, deux chiffres chacun, et placer un dièse devant. C'est facile pour une seule couleur et fastidieux pour vingt, et facile à rater quand un nombre demande un zéro initial ou qu'un chiffre est une lettre.
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. La page le fait dans votre navigateur, et rien n'est envoyé. Vous trouverez plus bas comment chaque nombre devient deux chiffres hexadécimaux, comment la transparence est reprise, les limites du sRGB, les endroits où l'on a besoin de convertir du RGB en HEX, et quelques habitudes qui gardent les couleurs cohérentes dans un projet.
Comment fonctionne la conversion
Chaque nombre devient deux chiffres hexadécimaux
Prenez rgb(90, 70, 50). Divisez chaque nombre par seize : 90 vaut 5 fois 16 plus 10, et 10 est le chiffre A ; 90 devient donc 5A. 70 vaut 4 fois 16 plus 6, donc 46. 50 vaut 3 fois 16 plus 2, donc 32. Réunissez les trois paires et ajoutez le dièse : #5A4632. La page le fait pour vous au fil de la saisie, et affiche la phrase rgb(90, 70, 50) = #5A4632 pour que vous puissiez la vérifier.
Zéros initiaux
Chaque paire doit avoir deux chiffres. Un nombre inférieur à 16 demande un zéro devant : 7 devient 07 et 0 devient 00. Ainsi rgb(0, 7, 255) est #0007FF, et non #07FF, qui signifierait tout autre chose. Oublier le zéro est l'erreur la plus fréquente quand on fait la conversion à la main.
La plage
Chaque nombre doit se situer entre 0 et 255. Une valeur supérieure à 255 ne peut pas s'écrire en deux chiffres hexadécimaux, et une valeur négative n'a pas de sens. Si un calcul de votre code a produit 270 ou −5, ramenez-le d'abord dans la plage. Le convertisseur fait de même, afin de ne jamais produire un code invalide.
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, de 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 RGB en HEX et reconvertissez, et vous retrouvez les nombres de départ.
Elle reprend la transparence
Une quatrième valeur pour la transparence est reprise elle aussi : #RRGGBBAA devient rgba(), et inversement. Une transparence de 0,5 devient la paire 80, puisque la moitié de 255 fait environ 128, soit 80 en hexadécimal. Ainsi rgba(90, 70, 50, 0.5) est #5A463280. L'hexadécimal à huit chiffres est accepté 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 qui en sort, ce pour quoi existent les notations CSS plus récentes, lab(), oklch() et color(). Si vous partez d'une couleur dans un outil à large gamut, les trois nombres que vous copiez sont déjà la version sRGB, et l'hexadécimal leur est fidèle.
Elle ne conserve pas la forme abrégée
Là où un code pourrait s'écrire en trois chiffres, comme #AABBCC en #ABC, le convertisseur donne la forme longue. La forme longue est toujours valide et désigne la même couleur ; la forme courte n'est qu'une commodité pour le lecteur.
Couleurs courantes et leurs codes
Quelques-unes à retenir
rgb(255, 255, 255) est #FFFFFF, le blanc : les trois lumières à pleine puissance. rgb(0, 0, 0) est #000000, le noir : aucune lumière. rgb(255, 0, 0) est #FF0000, le rouge pur ; rgb(0, 255, 0) est #00FF00 et rgb(0, 0, 255) est #0000FF. Toute couleur à trois nombres égaux est un gris, et son code a trois paires égales : rgb(128, 128, 128) est #808080.
L'habitude du « web-safe »
D'anciens guides parlaient de couleurs « web-safe », dont les paires n'étaient que 00, 33, 66, 99, CC ou FF. Elles datent de l'époque des écrans à 256 couleurs et n'ont aucune raison de survivre. Utilisez la valeur que vous voulez ; l'écran peut toutes les afficher.
Comment convertir du RGB en HEX ici
Saisissez les trois nombres
Entrez la couleur dans le premier champ sous la forme rgb(90, 70, 50), ou avec les nombres séparés par des virgules ou des espaces. Les pourcentages ne sont pas nécessaires ; utilisez des nombres de 0 à 255.
Lisez le code hexadécimal
La réponse apparaît aussitôt dans l'autre champ, commençant par un dièse, en majuscules. Si vous avez donné une quatrième valeur pour la transparence, le code a huit chiffres.
Copiez-le dans votre travail
Collez le code dans la feuille de style, le fichier de jetons ou le message. Ajoutez-le à la note de votre palette pour que la prochaine conversion soit une simple consultation.
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'aucun des deux n'est lisible par un humain : il donne la teinte sous forme d'angle sur un cercle chromatique, avec la saturation et la luminosité en pourcentages, de sorte qu'une graphiste peut éclaircir quelque chose sans recalculer trois valeurs. Le CMYK appartient à un monde tout à fait différent, l'encre plutôt que la lumière. Il est soustractif, construit à partir de quatre plaques d'impression, et il ne peut pas atteindre toutes les couleurs qu'un écran atteint, car un écran émet de la lumière tandis que le papier ne fait que la réfléchir. Voir Convertir HEX en HSL et Convertir RGB en CMYK.
Où on les rencontre
Dans la transmission d'une conception
Une graphiste travaille dans un éditeur qui affiche des valeurs RGB ou un sélecteur ; le développeur a besoin de l'hexadécimal pour la feuille de style. Convertir du RGB en HEX est l'étape intermédiaire, et on la fait pour chaque couleur d'une palette.
Dans les scripts qui calculent des couleurs
Un script qui mélange deux couleurs ou en assombrit une travaille avec des nombres et finit avec trois d'entre eux. Pour utiliser le résultat dans une feuille de style, ou l'afficher, il doit être écrit sous forme de code hexadécimal. Le faire à la main dans le code, c'est quelques lignes ; vérifier le résultat avec un convertisseur est plus rapide.
Dans la visualisation de données
Les bibliothèques de graphiques acceptent les couleurs sous forme de chaînes hexadécimales. Les palettes générées par des méthodes numériques sortent sous forme de triplets RGB. Une étape de conversion transforme l'un en l'autre.
Dans les documents et les présentations
Les logiciels bureautiques affichent les couleurs sous forme de nombres RGB ; les éditeurs web veulent de l'hexadécimal. Quand une couleur de marque doit apparaître dans les deux, la conversion les garde identiques.
Pièges quand vous convertissez du RGB en HEX
Oublier le zéro initial
Écrire 7 comme 7 et non 07 décale tous les chiffres suivants. Utilisez toujours deux chiffres par paire.
Confondre le pourcentage avec 0 à 255
rgb(35%, 27%, 20%) est une autre écriture des nombres, 100 pour cent valant 255. Si votre source utilise des pourcentages, convertissez-les d'abord en 0 à 255 : multipliez par 2,55.
Erreurs d'arrondi dans les couleurs calculées
Un script qui produit 127,5 doit décider si c'est 127 ou 128. La différence est invisible, mais elle produit deux codes pour ce que vous pensiez être une seule couleur. Arrondissez partout de la même façon.
Prendre la couleur sur une capture d'écran
Une couleur lue sur une capture d'écran est passée par la gestion des couleurs de l'écran et peut-être par une compression. Elle peut différer d'un ou deux crans de la source. Utilisez le fichier de conception quand vous le pouvez.
Questions que l'on se pose avant de convertir
Que donne rgb(255, 0, 0) en hexadécimal ?
#FF0000, le rouge pur.
Que donne rgb(0, 0, 0) en hexadécimal ?
#000000, le noir.
Puis-je utiliser des minuscules dans le code hexadécimal ?
Oui. #5a4632 et #5A4632 sont la même couleur. La page écrit des majuscules.
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 HEX en RGB, qui lit les trois paires comme des nombres.
Habitudes qui gardent des couleurs cohérentes dans un projet
Définissez chaque couleur une fois
Placez votre palette dans des propriétés personnalisées, comme --brand: #5A4632, et désignez les couleurs par leur nom. Quand vous convertissez du RGB en HEX pour une nouvelle couleur, vous ajoutez une ligne, et chaque usage suit.
Choisissez une casse
Choisissez majuscules ou minuscules pour les codes hexadécimaux et tenez-vous-y. La recherche d'une couleur dans le code est alors fiable.
Consignez la source
À côté de chaque couleur, notez d'où elle vient : la charte de la marque, un logo, une image échantillonnée. Quand la question se pose de savoir si une couleur est correcte, vous savez où vérifier.
Testez le contraste
Pour du texte sur fond coloré, vérifiez le rapport de contraste avec un outil. Les nombres de la forme RGB entrent directement dans la formule, et la forme hexadécimale est ce que vous saisissez dans la plupart des vérificateurs.
Pourquoi 256 paliers, et ce qui se cache derrière les nombres
Huit bits pour chaque lumière
Chacun des trois nombres est stocké sur huit bits, ce qui permet 256 valeurs de 0 à 255. Trois d'entre eux ensemble donnent 256 × 256 × 256, soit environ 16,7 millions de combinaisons, plus que l'œil ne peut en distinguer dans la plupart des conditions. C'est la raison pour laquelle les codes hexadécimaux font exactement six chiffres : deux pour chaque lumière, ni plus ni moins. Quand vous convertissez du RGB en HEX, vous écrivez trois octets sous la forme la plus compacte sur laquelle les gens ont pu s'accorder.
Pourquoi des pas égaux ne paraissent pas égaux
Les nombres ne sont pas proportionnels à la lumière qui atteint votre œil. Les écrans appliquent une courbe, proche d'une puissance de 2,2, de sorte que les tons sombres reçoivent plus des 256 paliers que les tons clairs, ce qui convient à l'œil. Un pas de 10 à 20 paraît un plus grand changement qu'un pas de 240 à 250. Pour vous, cela signifie que faire la moyenne de deux couleurs en faisant la moyenne de leurs nombres ne donne pas la couleur que vous verriez en mélangeant les lumières, un fait qui compte quand vous calculez des dégradés et des mélanges dans le code.
Les gris et la diagonale
Tous les gris se trouvent sur la ligne où les trois nombres sont égaux. Il y en a 256, du noir à 0 au blanc à 255. Si vous convertissez du RGB en HEX et que les trois paires sont identiques, vous savez aussitôt que la couleur n'a pas de teinte. Un presque-gris dont les paires diffèrent d'un cran ou deux a une légère dominante, que les graphistes utilisent souvent pour donner à une couleur neutre un soupçon de chaleur ou de fraîcheur.
Construire et vérifier une palette
D'une poignée de couleurs choisies à une palette
Une palette typique comprend une couleur principale, un accent, un neutre pour le texte, un neutre plus clair pour les surfaces et une ou deux couleurs de signalisation pour la réussite et l'erreur. Choisissez chacune dans votre outil de conception, lisez ses nombres RGB et convertissez le RGB en HEX pour la feuille de style. Écrivez-les sous forme de propriétés personnalisées avec des noms qui décrivent leur rôle, et la palette est prête à servir dans chaque composant.
Contraste entre le texte et l'arrière-plan
Un texte lisible demande assez de différence de luminosité entre les lettres et leur arrière-plan. Les directives d'accessibilité définissent un rapport de contraste calculé à partir des valeurs de rouge, de vert et de bleu des deux couleurs, et demandent au moins 4,5 pour 1 pour le texte normal. Les vérificateurs acceptent les codes hexadécimaux ; les codes que vous produisez ici peuvent donc y entrer directement. Vérifiez chaque association que vous prévoyez d'utiliser, pas seulement la couleur principale sur blanc.
Convertir une liste
Quand vous avez beaucoup de couleurs à convertir, traitez-les une à une et collez chaque résultat dans un tableau avec son nom et son usage. Cela prend une minute par couleur, et le tableau devient la référence de tout le projet. Si une couleur est ajustée plus tard, seule sa ligne doit changer.
Garder l'hexadécimal et le RGB en phase
Si votre projet stocke certaines couleurs en hexadécimal et d'autres en RGB, il est facile qu'elles divergent quand quelqu'un modifie l'une et oublie l'autre. Choisissez-en une comme original, généralement l'hexadécimal, et dérivez l'autre avec le convertisseur chaque fois que vous en avez besoin.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir en arrière, utilisez Convertir HEX en RGB. Pour les couleurs décrites par leur teinte, Convertir HEX en HSL et Convertir HSL en HEX sont à portée de main, et pour l'impression, Convertir RGB en CMYK, Convertir CMYK en RGB et Convertir CMYK en HEX. Pour les tailles de la même feuille de style, Convertir px en rem fait pour les longueurs ce que cette page fait pour les couleurs.
Un exemple détaillé
Supposons qu'un sélecteur de couleurs dans un éditeur d'images vous indique que l'accent d'une photographie est rgb(214, 98, 56). Vous saisissez les trois nombres et lisez #D66238. Dans la feuille de style, vous écrivez --accent: #D66238 et l'utilisez pour les boutons et les liens. Un collègue demande quelle est la couleur dans la charte de la marque, et vous envoyez le code. Plus tard, vous avez besoin d'une version translucide pour une bannière, et vous reconvertissez avec Convertir HEX en RGB pour construire rgba(214, 98, 56, 0.15). Les deux conversions sont exactes ; la bannière a donc la même teinte que le bouton.
Une courte liste de contrôle
Avant de convertir
Vérifiez que chaque nombre est compris entre 0 et 255. Décidez si vous avez besoin de transparence.
Pendant la conversion
Saisissez les trois nombres, lisez le code et copiez-le avec son dièse.
Après la conversion
Testez la couleur en contexte, sur le vrai arrière-plan, et vérifiez le contraste de tout texte qui s'y trouve.
Erreurs courantes
Omettre un zéro initial
Chaque paire a deux chiffres. 7 s'écrit 07.
Écrire des nombres supérieurs à 255
Ils ne peuvent pas s'écrire en deux chiffres. Ramenez-les d'abord dans la plage.
Prendre l'écran pour la vérité
Les nombres sont exacts. L'aspect dépend de l'écran.
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 RGB en HEX.
Résumé
Pour convertir du RGB en HEX ici, saisissez les trois nombres et lisez aussitôt le code hexadécimal. La conversion conserve la couleur exactement : l'hexadécimal et rgb() sont deux écritures des trois mêmes nombres, de 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 reprise elle aussi, puisque rgba() devient #RRGGBBAA, et inversement. Les deux écritures décrivent le sRGB, elles ne peuvent donc pas décrire les couleurs qui en sortent. Chaque paire a deux chiffres, si bien qu'un nombre inférieur à 16 reçoit un zéro initial. Rien n'est envoyé.