Chaque couleur sur un écran est un mélange de lumière rouge, verte et bleue. Les concepteurs et les développeurs écrivent ce mélange dans deux notations courantes : HEX (#3b82f6) et RVB (rgb(59, 130, 246)). Ils décrivent les trois mêmes chaînes - seul le système numérique change. Ce guide explique ce qu'est un code couleur HEX, ce que signifie RVB, comment convertir manuellement HEX en RVB (y compris pourquoi FF est égal à 255), des exemples concrets, alpha/RGBA et un tableau rapide des couleurs courantes.
Réponse rapide
Une couleur HEX à six chiffres se divise en trois paires (RR, GG, BB). Convertissez chaque paire de l'hexadécimal (base 16) en décimal (0-255) pour obtenir RVB. Exemple : #FFFFFF → rgb(255, 255, 255). HEX à huit chiffres (#RRGGBBAA) ajoute un canal alpha pour l'opacité. Préférez un convertisseur lorsque vous avez besoin de vitesse ; apprenez les mathématiques lorsque vous devez déboguer CSS ou concevoir des jetons.
Qu'est-ce qu'un code couleur HEX ?
Les codes de couleur HEX (hexadécimaux) utilisent des chiffres en base 16 : 0-9 et A-F, où A = 10, B = 11, C = 12, D = 13, E = 14 et F = 15. Sur le Web, ils commencent généralement par # et se déclinent en plusieurs longueurs :
- #RGB - raccourci : chaque chiffre est doublé (#F0A → #FF00AA)
- #RRGGBB - le formulaire standard à six chiffres (deux chiffres par canal)
- #RRGGBBAA - huit chiffres : RVB plus alpha (opacité)
Chaque paire de chiffres correspond à un canal. Les deux premiers chiffres sont rouges, les deux suivants verts et les deux derniers bleus. Étant donné que deux chiffres hexadécimaux peuvent représenter 16 × 16 = 256 valeurs, chaque canal va de 00 (0) à FF (255) - la même plage que CSS utilise dans rgb().
HEX est populaire dans les outils de conception, les directives de marque et CSS car il est compact et facile à copier. La casse n'a pas d'importance : #3b82f6 et #3B82F6 sont de la même couleur.
Qu’est-ce que le RVB ?
RVB signifie rouge, vert et bleu. Dans CSS, vous l'écrivez sous la forme rgb(r, g, b) ou sous la forme moderne séparée par des espaces rgb(r g b), où chaque canal est un entier de 0 à 255 (ou un pourcentage). Le mélange des canaux à pleine puissance donne du blanc ; tous les zéros font du noir ; des mélanges inégaux créent toutes les autres couleurs sur un écran sRGB.
- RVB (255, 0, 0) - rouge pur
- rgb(0, 255, 0) - vert pur
- RVB (0, 0, 255) - bleu pur
- RVB (255, 255, 255) - blanc
- RVB (0, 0, 0) - noir
Il est souvent plus facile de raisonner sur RVB lorsque vous modifiez la luminosité ou l'opacité dans le code. HEX est souvent plus facile à coller à partir d'un guide de style. La conversion entre eux change simplement la façon dont vous écrivez les trois mêmes nombres.
Comment convertir manuellement HEX en RVB
Divisez les six chiffres hexadécimaux en trois paires, puis convertissez chaque paire de base 16 en décimal. La formule pour une valeur hexadécimale à deux chiffres XY est :
Formule
valeur = (premier chiffre × 16) + deuxième chiffre. Rappelez-vous A=10 … F=15. Donc FF = (15 × 16) + 15 = 240 + 15 = 255. C'est pourquoi #FF correspond à la pleine intensité d'un canal.
- Supprimez le premier # s’il est présent.
- Si vous avez 3 chiffres (#RGB), développez chaque chiffre en le doublant (#F0A → #FF00AA).
- Divisé en RR, GG et BB.
- Convertissez chaque paire avec (haut × 16) + bas.
- Écrivez RVB (R, V, B).
Exemple concret : #FFFFFF
Le blanc est le contrôle le plus simple. RR = FF, GG = FF, BB = FF. Chaque FF est converti en 255, donc #FFFFFF → rgb(255, 255, 255). Le noir est à l'opposé : #000000 → rgb(0, 0, 0).
Exemple concret : #1A2B3C
- Rouge 1A : (1 × 16) + 10 = 16 + 10 = 26
- Vert 2B : (2 × 16) + 11 = 32 + 11 = 43
- Bleu 3C : (3 × 16) + 12 = 48 + 12 = 60
- Résultat : #1A2B3C → rgb(26, 43, 60)
Dans l'autre sens (RVB vers HEX), chaque canal est limité à 0-255, divisé par 16 pour le quartet élevé, prend le reste pour le quartet faible et mappe 10-15 sur AF. Complétez les chiffres avec un zéro non significatif afin que chaque canal soit composé de deux caractères (#0A1B2C, pas #A1B2C).
Alpha, RGBA et HEX à huit chiffres
L'opacité est un quatrième canal appelé alpha. Dans CSS, rgba(r, g, b, a) utilise a de 0 (entièrement transparent) à 1 (entièrement opaque), ou vous pouvez utiliser la syntaxe rgb(r g b / a) moderne. HEX à huit chiffres code la même idée que #RRGGBBAA, où AA va de 00 (transparent) à FF (opaque).
- #FF000080 → rouge à environ 50 % d'opacité (128/255 ≈ 0,5) → rgba(255, 0, 0, 0,5)
- #00000000 → noir entièrement transparent (souvent utilisé comme « sans remplissage »)
- #3B82F6FF → identique à #3B82F6 avec une opacité complète explicite
Tous les anciens navigateurs ou exportations de conceptions ne traitaient pas les HEX à huit chiffres de la même manière, mais le CSS moderne le prend en charge. Lorsque vous avez besoin de superpositions translucides, d'ombres ou d'effets de verre, RGBA (ou HEX avec alpha) est le bon outil - un HEX solide à six chiffres ne peut pas exprimer la transparence.
Table de couleurs commune HEX et RVB
Ces couleurs de tous les jours sont utiles à mémoriser pour le débogage de CSS et les jetons de marque correspondant :
- #FFFFFF → RVB (255, 255, 255) - blanc
- #000000 → RVB (0, 0, 0) - noir
- #FF0000 → rgb(255, 0, 0) - rouge
- #00FF00 → rgb(0, 255, 0) - vert lime
- #0000FF → RVB (0, 0, 255) - bleu
- #FFFF00 → rgb(255, 255, 0) - jaune
- #FFA500 → RVB (255, 165, 0) - orange
- #808080 → RVB (128, 128, 128) - gris
- #1A2B3C → rgb(26, 43, 60) - bleu-gris foncé (d'après l'exemple ci-dessus)
- #3B82F6 → rgb(59, 130, 246) - un bleu "ciel" commun utilisé dans de nombreux kits d'interface utilisateur
Questions fréquemment posées
HEX est-il la même chose que RVB ?
Ils codent les mêmes intensités de rouge, de vert et de bleu pour les couleurs Web typiques. HEX écrit ces valeurs en hexadécimal ; RVB les écrit en décimal. La conversion de HEX en RVB (ou inversement) ne change pas la couleur - seulement la notation.
Pourquoi FF est-il égal à 255 ?
F vaut 15 en hexadécimal. Deux chiffres signifient (15 × 16) + 15 = 255, ce qui correspond à la valeur maximale du canal 8 bits. C'est pourquoi #FF0000 est entièrement rouge et #FFFFFF est blanc.
Que signifie une couleur HEX à 3 chiffres ?
Le raccourci #RGB se développe en répétant chaque chiffre : #0F8 devient #00FF88. Il s'agit d'une manière compacte d'écrire des couleurs où les deux chiffres de chaque canal sont identiques (#00, #FF, #88, etc.).
Quelle est la différence entre RVB et RGBA ?
RGBA ajoute un canal alpha (opacité). rgb(255, 0, 0) est rouge uni ; rgba(255, 0, 0, 0.5) est le même rouge à 50 % d'opacité. HEX à huit chiffres (#RRGGBBAA) est l'équivalent HEX de RGBA.
Dois-je utiliser HEX ou RVB dans CSS ?
Les deux sont valables. Utilisez HEX lorsque vous copiez à partir d'un système de conception ou que vous souhaitez un jeton court. Utilisez RVB/RGBA lorsque vous avez besoin d'opacité ou lorsque vous créez des couleurs à partir de variables et de mathématiques. De nombreuses équipes stockent une couleur de marque HEX et dérivent des canaux rgb() pour les astuces d'opacité CSS modernes (par exemple, rgb(var(--brand-rgb) / 0.2)).
Comment convertir rapidement HEX en RVB ?
Pour un apprentissage ponctuel, utilisez la méthode (chiffre × 16) + chiffre ci-dessus. Pour le travail quotidien, collez le code dans un convertisseur HEX vers RVB afin de pouvoir copier rgb()/rgba(), prévisualiser un échantillon et éviter les erreurs arithmétiques.
Convertisseur HEX vers RVB gratuit
Collez n'importe quelle couleur HEX dans le [Convertisseur HEX vers RVB] gratuit (/converter-tools/hex-to-rgb-converter) pour obtenir instantanément rgb()/rgba() - ainsi que le chemin RVB → HEX inversé, un échantillon en direct et des boutons de copie. Il s'exécute entièrement dans votre navigateur ; rien n'est téléchargé.