Comment les ordinateurs créent les couleurs : RGB, HEX et binaire
#FF0000. #00FF00. #0000FF. Des notations que vous avez sûrement croisées dans une maquette ou un fichier de code. On dirait des codes secrets, presque des codes de jeu vidéo. En réalité, ce sont des noms de couleurs.
De haut en bas : rouge, vert, bleu. Ce sont les noms que l’ordinateur utilise pour désigner les couleurs. Voici d’où vient cette notation.
RGB — trois lettres pour composer une couleur
Red, Green, Blue. Les trois couleurs primaires de la lumière. Toutes les couleurs visibles naissent de leurs proportions.
On voit du RGB tous les jours
Partout où il y a un écran, il y a presque toujours du RGB.
- Moniteur / TV — chaque pixel est composé de trois points rouge, vert et bleu
- Écran de téléphone — même structure, pixels plus petits
- Rétroéclairage de clavier gaming — trois DEL R, G, B par touche
- Éclairage de boîtier PC — les bandeaux RGB transmettent directement le signal RGB
En zoomant suffisamment sur un écran, on le voit. Rouge, vert, bleu. Rien d’autre. Des millions de minuscules points RGB assemblés forment l’image qu’on regarde.
La couleur se compose par mélange
Chaque canal RGB prend une intensité de 0 à 255.
RGB(255, 0, 0)— rouge au maximum → rouge purRGB(0, 255, 0)— vert au maximum → vert purRGB(255, 255, 0)— rouge + vert → jauneRGB(0, 0, 0)— tout éteint → noirRGB(255, 255, 255)— tout au maximum → blanc
Mélanger rouge et vert pour obtenir du jaune peut sembler contre-intuitif, mais c’est de la synthèse additive de la lumière. Ce n’est pas la même règle que pour les peintures en cours d’arts plastiques (rouge + vert = brun). La lumière s’éclaircit à mesure qu’on l’ajoute, et la somme de toutes les couleurs donne du blanc.
Déplacez les trois curseurs pour voir ça en action.
Le nombre à 8 chiffres à droite est la représentation binaire de ce canal. Bougez le curseur et ce nombre change en temps réel. Comment 0 et 1 peuvent-ils produire 256 valeurs ? C’est ce qu’on voit ensuite.
Pourquoi de 0 à 255 exactement ?
L’ordinateur ne manipule que des 0 et des 1. Un emplacement contenant un 0 ou un 1 s’appelle un bit. À chaque bit ajouté, le nombre de valeurs représentables double.
8 bits = 1 octet. Une couleur comporte trois canaux RGB, soit 3 octets = 24 bits. 24 bits permettent d’exprimer environ 16,7 millions de couleurs — bien assez pour l’œil humain, ce qui a fait de l’octet le standard pour un canal.
Lire le binaire directement
Chaque position a une valeur fixe. De gauche à droite : 128, 64, 32, 16, 8, 4, 2, 1 — les puissances de 2.
En additionnant les valeurs des positions marquées 1, on obtient le nombre décimal correspondant.
La valeur maximale sur 8 bits est donc 255. C’est précisément pourquoi chaque canal RGB couvre la plage 0 à 255.
HEX — les mêmes nombres, écrits plus court
RGB(255, 255, 255). Seize caractères. C’est long à écrire dans une ligne CSS ou dans un champ de design. D’où l’apparition d’une notation plus concise.
C’est quoi l’hexadécimal ?
L’hexadécimal est un système de numération où un seul caractère représente de 0 à 15. Nos chiffres habituels ne vont que de 0 à 9 — il en manque six. On les emprunte à l’alphabet.
Trois règles à retenir.
- 0–9 restent tels quels
- À partir de 10, on passe à A
- F est la valeur maximale sur un caractère (= 15)
Pourquoi l’hexadécimal ?
4 bits en binaire (0000 à 1111) représentent exactement 16 valeurs.
4 bits en binaire = 1 chiffre hexadécimal. Quatre chiffres se réduisent à un seul. Comme un canal RGB fait 8 bits, il tient exactement en deux chiffres hexadécimaux.
Convertir RGB en HEX
On prend RGB(255, 87, 51).
Une notation de 14 caractères se ramène à 7 caractères.
Deviner la couleur depuis un code HEX
À l’inverse, un code HEX donne déjà une idée de la couleur.
#FF5733— R au max (FF), G à mi-chemin (57), B faible (33) → orange à dominante rouge#3576E0— R faible (35), G moyen (76), B fort (E0) → bleu légèrement violacé#29A85A— R faible (29), G fort (A8), B faible (5A) → vert frais
Reconnaître en trois chiffres si une couleur est dans les oranges ou dans les bleus permet aux designers et aux développeurs de parler le même langage.
En une ligne
- RGB — trois canaux rouge, vert et bleu, chacun de 0 à 255
- Binaire 8 bits — la raison pour laquelle un canal exprime 256 valeurs
- HEX — la même valeur écrite en deux caractères seulement
Dès que ces trois concepts se connectent, un code couleur n’est plus du charabia. Les trois chiffres RGB sont exactement les six caractères du code HEX.
L’étape suivante consiste à transformer ces nombres en langage de designer. Des demandes comme « un peu plus clair », « moins saturé » ou « le même rendu sur papier » sont difficiles à gérer avec RGB et HEX seuls. Comment HSL, CMYK et OKLCH résolvent ce problème est développé dans Le RGB ne suffit pas : les notations de couleur HSL, CMYK et OKLCH.