Convertisseur HEX vers RGB
Une couleur hexadécimale est faite de trois paires de chiffres, une par canal : séparez-les et convertissez chaque paire de la base 16 vers la base 10. FF5733 devient rgb(255, 87, 51), car FF vaut 255, 57 vaut 87 et 33 vaut 51. Le convertisseur affiche aussi hsl(11, 100%, 60%) et une variable CSS --color: #FF5733;, et fonctionne dans les deux sens.
Formats de couleur
Vérificateur de contraste
Couleur complémentaire
À propos de Convertisseur HEX vers RGB
Ce convertisseur lit une couleur dans une notation et l'écrit dans quatre. Tapez six chiffres hexadécimaux dans la case Couleur HEX et les tuiles R, V et B se mettent à jour à la frappe ; passez aux champs RVB, modifiez un canal et la chaîne hexadécimale est reconstruite ; passez au HSL et la teinte, la saturation et la luminosité pilotent les deux autres notations. Rien à valider, et le panneau Formats de couleur propose un bouton de copie pour chacune des quatre chaînes : #FF5733, rgb(255, 87, 51), hsl(11, 100%, 60%) et --color: #FF5733;.
Le calcul est une conversion de base, pas une approximation. Chaque canal tient sur un octet écrit en deux chiffres hexadécimaux : il va donc de 00 à FF, soit 0 à 255 en décimal. FF5733 se découpe en FF = 255, 57 = 87 et 33 = 51. Les valeurs sont bornées : un canal RVB au-dessus de 255 ou en dessous de 0 est ramené dans l'intervalle, et une chaîne hexadécimale de moins de six caractères est complétée par des zéros plutôt que refusée, si bien qu'un code en cours de saisie donne déjà une couleur.
Deux panneaux vont au-delà de la conversion. Le vérificateur de contraste calcule le rapport de la couleur courante face au blanc et au noir et affiche la note WCAG correspondante : FF5733 obtient 3.15:1 avec un texte blanc, soit AA Large seulement, et 6.66:1 avec un texte noir, soit AA. Le panneau de couleur complémentaire donne la teinte opposée sur la roue — #00A8CC pour FF5733, #FF00FF pour le vert pur.
Ce qu'il ne fait pas : il ne touche jamais au CMJN, car cette conversion dépend d'un profil d'encre et de papier qu'une page web ne peut pas connaître, et il ne traite que des couleurs opaques : RGBA et hexadécimal à huit chiffres sortent de son cadre. Tout s'exécute dans votre navigateur.
Cas d'utilisation
Comment utiliser
Tapez ou collez six chiffres hexadécimaux dans la case Couleur HEX. Le dièse est facultatif et les saisies courtes sont complétées par des zéros.
Lisez les tuiles R, V et B, qui se mettent à jour à la frappe, ainsi que l'échantillon qui montre la couleur elle-même.
Pour l'opération inverse, passez aux champs RVB et réglez R, V et B de 0 à 255 : la chaîne hexadécimale est reconstruite en dessous.
Utilisez les champs HSL — teinte de 0 à 360, saturation et luminosité de 0 à 100 — quand vous voulez décaler une couleur plutôt que la remplacer.
Ouvrez le panneau Formats de couleur et appuyez sur le bouton de copie de la ligne voulue : HEX, RGB, HSL ou la variable CSS.
Consultez le panneau de contraste pour le rapport face au blanc et au noir avec la note WCAG, et le panneau complémentaire pour la teinte opposée.
Astuces Pro
- La case hexadécimale accepte six caractères et complète les saisies courtes par des zéros au lieu de les refuser : FF devient FF0000 et affiche du rouge. Tapez les six chiffres avant de lire le résultat.
- Le dièse de tête est facultatif : le champ le retire et le panneau Formats de couleur le remet dans la ligne HEX, si bien que #FF5733 et FF5733 donnent la même réponse.
- Les champs RVB bornent sans prévenir : saisissez 300 dans R et la valeur devient 255 à l'application. Si un canal semble faux, vérifiez qu'il tenait bien entre 0 et 255.
- Lisez les deux contrastes, pas un seul. Une couleur peut passer sur du noir et échouer sur du blanc, comme FF5733 avec 6.66:1 et 3.15:1, et c'est le libellé posé dessus qui décide lequel compte.
- La ligne Variable CSS est prête à coller dans un bloc :root. Copiez-la, renommez --color en quelque chose de parlant, et la même valeur alimentera toutes les règles qui y font référence.
Dépannage
Un code hexadécimal court affiche la mauvaise couleur.
Le champ complète par des zéros tout ce qui fait moins de six caractères au lieu d'attendre : F00 est lu comme F00000 et non comme l'abréviation à trois chiffres du rouge. Tapez les six chiffres — FF0000 — et les tuiles R, V et B afficheront 255, 0, 0.
Une valeur RVB saisie a changé toute seule.
Chaque canal est borné à 0-255 au moment de l'application, car c'est toute l'étendue d'un octet. 300 devient 255, une valeur négative devient 0. Vérifiez le nombre voulu, et rappelez-vous que les pourcentages ne sont pas acceptés ici : passez par les champs HSL.
J'ai besoin de valeurs CMJN et je ne les trouve pas.
Ce convertisseur ne produit pas de CMJN, et aucun outil web ne peut le faire correctement : la conversion dépend du jeu d'encres, du papier et du profil colorimétrique de votre imprimeur. Emportez la valeur hexadécimale ou RVB obtenue ici dans votre logiciel de création et convertissez-la avec le bon profil.
Questions fréquemment posées
Découpez les six chiffres en trois paires et lisez chaque paire en base 16. FF5733 donne FF = 255, 57 = 87 et 33 = 51, soit rgb(255, 87, 51). Tapez le code dans la case Couleur HEX et les trois tuiles de canaux affichent immédiatement ces nombres, avec une chaîne rgb() copiable dans le panneau des formats.
rgb(0, 255, 0), du vert pur : les paires rouge et bleue valent 00 et la paire verte vaut FF, le maximum d'un octet. En HSL, la même couleur s'écrit hsl(120, 100%, 50%). Son contraste face au noir atteint 15.30:1, un AAA WCAG confortable, tandis qu'un texte blanc dessus ne dépasse pas 1.37:1.
C'est rgb(255, 0, 0), du rouge pur, puisque FF vaut 255 et que chaque 00 vaut zéro. L'outil donne aussi hsl(0, 100%, 50%) et la ligne de variable CSS. Le contraste est de 4.00:1 face au blanc et 5.25:1 face au noir : un texte blanc sur ce rouge n'atteint AA que pour les grandes tailles.
Un gris moyen : rgb(153, 153, 153), puisque 99 en hexadécimal vaut 153 et que les trois canaux sont égaux. Des canaux égaux donnent toujours un neutre, d'où le hsl(0, 0%, 60%) sans saturation. Il échoue face au texte blanc à 2.85:1 mais atteint AAA face au noir à 7.37:1.
Ils décrivent les mêmes trois canaux, écrits autrement : l'hexadécimal utilise deux chiffres en base 16 par canal, le RVB un nombre décimal de 0 à 255. Aucun des deux ne porte d'information supplémentaire, et c'est pourquoi ce convertisseur passe de l'un à l'autre exactement, sans le moindre arrondi.
Pour une couleur opaque, les deux sont équivalents et l'hexadécimal est plus court, d'où son usage courant dans les feuilles de style. Préférez rgb() quand vous composez une valeur à partir de canaux séparés, et souvenez-vous que le CSS accepte aussi un canal alpha dans les deux notations. Le HSL reste le meilleur choix pour dériver des variantes plus claires ou plus foncées.
R correspond aux deux premiers chiffres lus en base 16, V aux deux du milieu, B aux deux derniers. En JavaScript cela s'écrit parseInt(hex.slice(0,2), 16) et ainsi de suite ; en Python, int(hex[0:2], 16). Dans l'autre sens, chaque canal passe par toString(16) puis est complété à deux chiffres.
En Python : tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) avec h la chaîne de six caractères. En JavaScript : [0, 2, 4].map(i => parseInt(hex.substr(i, 2), 16)). Les deux donnent exactement les trois nombres affichés ici, la conversion étant exacte et sans arrondi.
Non, et méfiez-vous de tout outil web qui l'affirme. Le RVB est de la lumière et le CMJN de l'encre : la correspondance dépend de la presse, du papier et du profil colorimétrique utilisé. Convertissez ici pour obtenir un RVB ou un HSL exact, puis laissez votre logiciel de création gérer le CMJN avec le profil réel d'impression.
Pas dans ce convertisseur : il travaille sur de l'hexadécimal à six chiffres et du RVB opaque. Pour la transparence, reprenez la chaîne rgb() obtenue et ajoutez l'alpha vous-même, sous la forme rgba(255, 87, 51, 0.5), ou ajoutez deux chiffres hexadécimaux pour un code à huit chiffres. Les valeurs de canaux restent les mêmes.