Comment convertir des codes couleur HEX en RGB

HEX et RGB sont deux façons d'écrire exactement les memes couleurs. Designers et développeurs basculent constamment entre eux : HEX dans les feuilles de style CSS, RGB dans les animations JavaScript, HSL dans les outils de conception. Comprendre comment ils sont liés rend le travail des couleurs beaucoup plus facile. Un convertisseur gère l'arithmétique mentale pour que vous puissiez vous concentrer sur la bonne couleur, et non sur la division en base 16.

Comment fonctionnent les couleurs HEX

Un code couleur HEX comme #FF5733 est un nombre hexadécimal à 6 chiffres qui représente les canaux rouge, vert et bleu :

Chaque canal varie de 00 (0, aucune couleur) à FF (255, pleine intensité). Donc #FF5733 signifie pleine rouge, un peu de vert, un peu de bleu, ce qui vous donne un orange-rouge chaud.

Comment convertir HEX en RGB

1. Entrez votre code HEX : tapez ou collez un code couleur comme #FF5733 ou utilisez le sélecteur de couleur.
2. Voir les valeurs RGB : voir les valeurs équivalentes rouge, vert et bleu (0-255 chacune).
3. Copier dans n'importe quel format : récupérez les valeurs comme rgb(255, 87, 51), les canaux individuels, ou d'autres formats comme HSL.

Une brève histoire des codes couleur sur le Web

La couleur dans les premiers navigateurs Web (Mosaic 1993, Netscape 1994) utilisait uniquement des noms de couleurs : red, blue, green. La spécification HTML 3.2 (1997) a introduit les codes couleur hexadécimaux via l'attribut BGCOLOR, et CSS 1 (1996) les a rendus universels. Le choix de HEX sur décimal était pratique : un code HEX de 6 caractères est plus court que rgb(255, 87, 51) et plus facile à copier-coller depuis un sélecteur de couleur.

Le modèle de couleur RGB lui-meme est beaucoup plus ancien. James Clerk Maxwell a démontré en 1861 que toute couleur visible à l'œil humain peut etre créée en mélangeant la lumière rouge, verte et bleue. La télévision (années 1930) et les moniteurs d'ordinateur (années 1970) ont utilisé ce principe directement : chaque pixel est trois sous-pixels (un rouge, un vert, un bleu) à différentes luminosités.

CSS moderne (à partir de 2010) a ajouté beaucoup plus de formats de couleur : hsl() (teinte, saturation, luminosité), hwb() (teinte, blancheur, noirceur), lab() (perceptuellement uniforme), lch(), oklab(), oklch(), et color() pour les espaces colorimétriques arbitraires. Tous représentent les memes couleurs que HEX/RGB mais avec des modèles mentaux différents. HEX persiste parce qu'il est dense, copier-collable et facile à partager.

Conversion manuelle : comment le faire dans votre tete

Vous n'avez pas besoin d'un outil pour convertir des valeurs HEX simples. L'astuce est de connaitre les puissances de 16 :

• 0 = 0
• 5 = 5
• A = 10
• F = 15
• 10 (hex) = 16
• FF (hex) = 255

Pour une paire HEX comme 5A : le premier chiffre fois 16 plus le second chiffre. 5A = 5 × 16 + 10 = 90.

Pour des raccourcis :

• 00 = 0
• 33 = 51 (un pas de gris de 20% commun)
• 66 = 102
• 99 = 153
• CC = 204
• FF = 255

Les paires 33, 66, 99, CC (dans n'importe quelle combinaison) produisent la palette classique « web-safe » de 216 couleurs des années 1990. Elles apparaissent constamment dans les tableaux d'ambiance des designers encore aujourd'hui.

Codes couleur courants

HEX avec alpha (HEX à 8 chiffres)

CSS 4 (2017) a introduit le HEX à 8 chiffres avec un canal alpha. #FF5733CC est rgb(255, 87, 51) avec 80% d'opacité (CC en hex = 204, divisé par 255 = 0,80).

Le support du navigateur est universel dans les navigateurs modernes (Chrome 62+, Firefox 49+, Safari 9.1+, Edge 79+). Pour les nouveaux projets, le HEX à 8 chiffres est une alternative propre à rgba(). Pour les projets plus anciens, restez sur rgba() pour la compatibilité ascendante.

Un HEX court à 4 chiffres existe également : #F80C est le meme que #FF8800CC. Memes règles de raccourci que le HEX à 3 chiffres.

Cas d'utilisation pour chaque format

Utilisez HEX quand :

• Écrire des valeurs de couleur CSS dans les feuilles de style
• Partager une seule couleur avec des designers ou dans la documentation
• Stocker des couleurs de manière compacte dans des fichiers JSON ou de données
• Travailler avec des palettes de marque (les entreprises spécifient généralement les couleurs de marque en HEX)

Utilisez RGB quand :

• Animer des couleurs en JavaScript (analyser les canaux comme nombres, interpoler, reformater)
• Calculer les ratios de contraste de couleur (les formules WCAG fonctionnent sur RGB)
• Besoin de transparence partielle avec rgba() pour les navigateurs plus anciens
• Lecture de couleur depuis canvas ou données d'image (l'API Canvas renvoie RGB)

Utilisez HSL quand :

• Génération d'une palette de teintes (maintenir saturation et luminosité, varier la teinte)
• Création de variantes de mode sombre (maintenir la teinte, augmenter la luminosité)
• Faire du travail de théorie des couleurs (les couleurs complémentaires sont à 180° d'écart en teinte)

Utilisez OKLCH quand :

• Vous vous souciez de l'uniformité perceptuelle (interpoler en OKLCH évite le « milieu boueux » que vous obtenez en RGB)
• Construire un système de couleurs à partir de zéro dans des projets de 2024+

Pièges courants

• Oublier le préfixe # : CSS exige le hachage. color: FF5733 est invalide ; color: #FF5733 est correct.
• Mélanger majuscules et minuscules : #FF5733 et #ff5733 sont la meme couleur mais incohérents stylistiquement. Choisissez-en un (la plupart du code préfère les minuscules pour HEX) et tenez-vous-y.
• Confondre HEX avec hexadécimal en général : les codes couleur hex sont toujours 3, 4, 6, ou 8 chiffres. D'autres longueurs (5, 7) sont invalides. Les programmes peuvent silencieusement tronquer ou rembourrer.
• Mauvais ordre des octets en HEX à 8 chiffres : certaines bibliothèques utilisent ARGB (#CCFF5733, alpha en premier) au lieu de RGBA (#FF5733CC, alpha en dernier). CSS utilise RGBA. Adobe et certaines API Android utilisent ARGB.
• Supposer que RGB est sRGB : la plupart des couleurs HEX/RGB sont dans l'espace colorimétrique sRGB. Les écrans P3 (appareils Apple depuis 2016) peuvent afficher des couleurs plus larges, mais le HEX standard ne peut pas les décrire. Utilisez color(display-p3 ...) pour ceux-là.
• Arrondi de couleur lors de la conversion aller-retour : HEX-vers-RGB-vers-HEX est sans perte. HEX-vers-HSL-vers-HEX peut perdre 1-2 niveaux de précision en raison des mathématiques à virgule flottante.

Conseils

• Utilisez HEX en CSS : color: #FF5733 est plus propre et plus courant que color: rgb(255, 87, 51) dans les feuilles de style.
• Utilisez RGB pour la transparence : lorsque vous avez besoin de couleurs semi-transparentes, utilisez rgba(255, 87, 51, 0.5). Il n'y a aucun moyen d'ajouter l'alpha en HEX standard (bien que le HEX à 8 chiffres existe, le support du navigateur varie).
• Raccourci à 3 chiffres : #F00 est le meme que #FF0000. Utilisez-le quand chaque paire a des chiffres identiques pour économiser de l'espace.
• Le sélecteur de couleur est plus rapide : si vous essayez de trouver la bonne couleur, utilisez le sélecteur de couleur visuel au lieu de deviner les valeurs HEX. Copiez le code une fois que vous etes satisfait du résultat.
• Enregistrez les couleurs de marque comme propriétés personnalisées CSS : --brand-primary: #FF5733 vous permet de changer la valeur une fois et de mettre à jour partout. Plus facile que de chercher-remplacer des codes HEX dans les fichiers.
• Vérifiez le contraste après le choix : une belle couleur est inutile si le texte dessus est illisible. Associez ce convertisseur avec un vérificateur de contraste pour vérifier les ratios WCAG AA (4.5:1) ou AAA (7:1).

Confidentialité

Le convertisseur HEX-vers-RGB fonctionne entièrement dans votre navigateur. Les couleurs que vous entrez, vos palettes personnalisées et toutes les valeurs enregistrées restent sur votre appareil. Cela importe moins que pour les outils de conversion de fichiers (un code couleur n'est pas personnellement sensible), mais cela importe pour des raisons de confidentialité de conception : les couleurs avec lesquelles vous expérimentez peuvent révéler des orientations de marque non annoncées, des travaux de client sous NDA, ou un thème de produit en développement. Le calcul exclusivement basé sur le navigateur n'a aucune exposition.