Comment convertir des codes couleur HEX en RGB
HEX et RGB sont deux façons d'écrire exactement les mêmes couleurs. Designers et développeurs jonglent constamment entre les deux — HEX dans les feuilles CSS, RGB dans les animations JavaScript, HSL dans les outils de design. Comprendre leur lien rend le travail sur les couleurs bien plus simple.
Comment fonctionne le HEX
Un code couleur HEX comme #FF5733 est un nombre hexadécimal à 6 chiffres représentant les canaux rouge, vert et bleu :
| Partie | Hex | Décimal | Canal |
|---|---|---|---|
| FF | FF | 255 | Rouge |
| 57 | 57 | 87 | Vert |
| 33 | 33 | 51 | Bleu |
Chaque canal va de 00 (0, aucune couleur) à FF (255, intensité maximale). Donc #FF5733 signifie rouge à fond, vert modéré, un peu de bleu — ce qui donne un rouge orangé chaud.
Comment convertir HEX en RGB
- Saisissez votre code HEX — tapez ou collez un code comme #FF5733, ou utilisez le sélecteur de couleur.
- Consultez les valeurs RGB — voyez les équivalents en rouge, vert et bleu (0-255 chacun).
- Copiez dans n'importe quel format — récupérez les valeurs en
rgb(255, 87, 51), canaux individuels ou autres formats comme HSL.
Codes couleur courants
| Couleur | HEX | RGB |
|---|---|---|
| Blanc | #FFFFFF | rgb(255, 255, 255) |
| Noir | #000000 | rgb(0, 0, 0) |
| Rouge | #FF0000 | rgb(255, 0, 0) |
| Vert | #00FF00 | rgb(0, 255, 0) |
| Bleu | #0000FF | rgb(0, 0, 255) |
| Jaune | #FFFF00 | rgb(255, 255, 0) |
Astuces
- Utilisez HEX en CSS —
color: #FF5733est plus propre et plus courant quecolor: rgb(255, 87, 51)dans les feuilles de style. - Utilisez RGB pour la transparence — quand il faut des couleurs semi-transparentes, utilisez
rgba(255, 87, 51, 0.5). Il n'y a pas de façon d'ajouter un alpha en HEX standard (même si le HEX à 8 chiffres existe, le support navigateur varie). - Raccourci à 3 chiffres —
#F00équivaut à#FF0000. Utilisez-le quand chaque paire a des chiffres identiques pour gagner en place. - Le sélecteur de couleur est plus rapide — si vous cherchez la bonne couleur, utilisez le sélecteur visuel plutôt que de deviner les valeurs HEX. Copiez le code une fois satisfait.
Questions fréquentes
Comment convertir HEX en RGB manuellement ?
Découpez le code hex en trois paires (par ex. #FF8800 devient FF, 88, 00). Convertissez chaque paire de la base 16 vers la base 10. FF = 255, 88 = 136, 00 = 0. Le résultat est rgb(255, 136, 0).
Et les codes HEX à 3 chiffres ?
Le HEX à 3 chiffres est un raccourci où chaque chiffre est doublé. #F80 équivaut à #FF8800. La plupart des convertisseurs gèrent les deux formats automatiquement.
Quand utiliser HEX ou RGB ?
HEX est plus compact et plus courant en CSS. RGB est préférable quand il faut manipuler les canaux individuellement en code ou utiliser rgba() pour la transparence. Les deux représentent les mêmes couleurs.
Que représente le symbole # dans un code HEX ?
Le dièse (#) est un préfixe qui indique que la valeur est un code couleur hexadécimal. Il ne fait pas partie de la valeur elle-même. Certains outils acceptent les codes avec ou sans dièse.