Rouge, vert, bleu : 16 millions de couleurs avec trois nombres
Sur un écran, chaque pixel est formé de trois sous-pixels : un rouge, un vert, un bleu. En réglant l'intensité de chacun, on fabrique toutes les couleurs. À distance normale, l'œil ne distingue pas les sous-pixels : il voit une couleur unique.
CoursLe triplet (R, V, B)
Les trois sous-pixels de quelques couleurs. Sous chaque couleur, le triplet (R, V, B).
L'intensité de chaque sous-pixel est un nombre entier de 0 à 255, soit 256 valeurs (un octet = 8 bits).
Une couleur est donc un triplet \((R\,;V\,;B)\) : la quantité de rouge, de vert et de bleu.
En tout : \(256 \times 256 \times 256 = 256^3\) couleurs possibles.
Couleur
Triplet (R, V, B)
noir
(0, 0, 0)
blanc
(255, 255, 255)
rouge · vert · bleu
(255, 0, 0) · (0, 255, 0) · (0, 0, 255)
jaune
(255, 255, 0)
rose (magenta)
(255, 0, 255)
turquoise (cyan)
(0, 255, 255)
gris
R = V = B, par exemple (128, 128, 128)
Mélanger les couleurs
Le mélangeur RVB permet de régler les trois curseurs et de voir la couleur obtenue, son triplet et son code hexadécimal.
Sur le Web, une couleur s'écrit souvent #RRVVBB. Chaque nombre de 0 à 255 est écrit avec deux chiffres hexadécimaux (en base 16) : FF vaut 255, 80 vaut 128, 00 vaut 0.
Par exemple, le turquoise (0, 255, 255) s'écrit #00FFFF.
ExercicesExplorer les couleurs
EX 10Je m'entraîne🌶️prise en main
Exercice 10 — Combien de couleurs ?
Chaque sous-pixel a 256 nuances. Combien de couleurs différentes peuvent être fabriquées avec les trois sous-pixels ?
Un triplet utilise 3 octets, c'est-à-dire combien de bits ? Retrouve le résultat de la question 1 avec une puissance de 2.
Indice
Pour chaque nuance de rouge, il y a 256 nuances de vert, et pour chacune de celles-ci, 256 nuances de bleu.
📝 réponses dans ton compte rendu, exercice 10
EX 11Je m'entraîne🌶️prise en main
Exercice 11 — Noir, blanc et gris
Avec quelles valeurs de R, V, B obtient-on du noir ?
Avec quelles valeurs obtient-on du blanc ?
Donne trois triplets qui donnent des gris. Que remarques-tu ?
Indice
Avec le mélangeur, place les trois curseurs à la même valeur.
📝 réponses dans ton compte rendu, exercice 11
EX 12Je m'entraîne🌶️prise en main
Exercice 12 — Les couleurs de base
Quel triplet donne le rouge pur ? le vert pur ? le bleu pur ?
Trouve, avec le mélangeur, les triplets du jaune, du rose (magenta) et du turquoise (cyan).
Indice
Pour le jaune, quels sous-pixels faut-il allumer ? Fais des essais avec les curseurs.
📝 réponses dans ton compte rendu, exercice 12
EX 13Je m'entraîne🌶️🌶️application
Exercice 13 — Prévoir la couleur
Pour chaque triplet, prévois la couleur, puis vérifie avec le mélangeur.
(120, 0, 0)
(255, 128, 128)
(0, 0, 120)
(255, 128, 0)
Indice
Baisser une valeur assombrit la couleur. Ajouter un peu des deux autres l'éclaircit et la rend pâle.
📝 réponses dans ton compte rendu, exercice 13
EX 14Je m'entraîne🌶️🌶️application
Exercice 14 — L'échiquier à ombre
Ouvre la loupe à pixels, puis choisis l'image « Échiquier à ombre ». Elle contient deux cases repérées par les lettres A et B.
À première vue, ces deux cases A et B ont-elles la même couleur ? Laquelle te semble la plus claire ?
Clique au centre de chaque case avec la loupe et note les triplets (R, V, B).
Que constates-tu ? Comment expliques-tu la différence avec ton impression ?
Indice
Clique au centre des cases, pas sur les lettres.
📝 réponses dans ton compte rendu, exercice 14
EX 15Je m'entraîne🌶️🌶️🌶️plusieurs étapes
Exercice 15 — Du triplet au code hexadécimal
Pour convertir un nombre de 0 à 255 en hexadécimal, on le divise par 16 : le quotient et le reste sont les deux chiffres (les valeurs 10 à 15 s'écrivent A, B, C, D, E, F).
Convertis 128 puis 255 en hexadécimal. En déduis le code de l'orange (255, 128, 0).
Le code #3399FF est celui d'un bleu clair. Retrouve son triplet (R, V, B). Astuce : 33 vaut \(3 \times 16 + 3\).
Indice 1
\(128 = 8 \times 16 + 0\).
Indice 2
\(255 = 15 \times 16 + 15\), et 15 s'écrit F.
📝 réponses dans ton compte rendu, exercice 15
EX 16Je m'entraîne🌶️🌶️application
Exercice 16 — Du pixel coloré au gris
Pour transformer un pixel en niveau de gris, on lui donne la même valeur sur les trois canaux. Deux calculs sont possibles pour un pixel \((R\,;V\,;B)\) :
la moyenne : \(\dfrac{R + V + B}{3}\) ;
la moyenne pondérée, qui tient compte de la sensibilité de l'œil : \(0{,}299\,R + 0{,}587\,V + 0{,}114\,B\).
Calcule les deux valeurs de gris pour le pixel (200, 100, 50). Arrondis à l'entier.
Calcule les deux valeurs pour le vert pur (0, 255, 0) et le bleu pur (0, 0, 255). Que remarques-tu ?
Indice
Fais les multiplications une par une avant d'additionner.
📝 réponses dans ton compte rendu, exercice 16
À retenirSynthèse
Ce que je sais faire
Décrire une couleur par un triplet (R, V, B) de nombres entre 0 et 255.
Retrouver noir, blanc, gris, couleurs de base et mélanges.
Calculer le nombre de couleurs possibles : \(256^3 = 16\,777\,216\).
Convertir un nombre de 0 à 255 en hexadécimal, et l'inverse.