Codage couleur RGB

Votre ecran peut afficher 16.7 millions de couleurs differentes, et chacune est definie par seulement 3 nombres entre 0 et 255 ! Decouvrons comment le systeme RGB cree toutes les couleurs.

Difficulte:
25 min
+30 XP

Formules cles

Couleurs totales = 256 x 256 x 256 = 16 777 216
R+G+B=Blanc(synthese additive)
#FF0000
#00FF00
#0000FF

Objectifs du cours

  • Comprendre le principe de la synthese additive des couleurs
  • Maitriser le codage RGB avec les valeurs 0-255
  • Savoir convertir RGB en hexadecimal et inversement
  • Calculer le nombre de couleurs possibles

Erreurs courantes a eviter

  • Confondre synthese additive (RGB, ecrans) et soustractive (CMJ, impression)
  • Ne pas comprendre pourquoi R+V+B = blanc (et pas marron !)
  • Oublier que chaque composante va de 0 a 255 (et non 0 a 256)
  • Mal convertir en hexadecimal (oublier le # ou inverser les valeurs)

**Deux types de synthese des couleurs**

**Synthese additive (RGB)** - pour les ecrans : - On **ajoute** de la lumiere - Couleurs primaires : **Rouge, Vert, Bleu** - Toutes les couleurs melangees = **BLANC** - Absence de couleur = **NOIR**

**Synthese soustractive (CMJ/CMYK)** - pour l'impression : - On **soustrait** de la lumiere (filtrage) - Couleurs primaires : **Cyan, Magenta, Jaune** - Toutes les couleurs melangees = **NOIR** (theorique) - Absence de couleur = **BLANC** (papier)

**Pourquoi RGB pour les ecrans ?**

Les ecrans emettent de la lumiere. Chaque pixel est compose de **3 sous-pixels** : - Un sous-pixel **Rouge** - Un sous-pixel **Vert** - Un sous-pixel **Bleu**

En variant l'intensite de chaque sous-pixel, on cree toutes les couleurs.

**Les melanges primaires RGB**

| Melange | Resultat | Code RGB | |---------|----------|----------| | Rouge + Vert | **Jaune** | (255, 255, 0) | | Rouge + Bleu | **Magenta** | (255, 0, 255) | | Vert + Bleu | **Cyan** | (0, 255, 255) | | Rouge + Vert + Bleu | **Blanc** | (255, 255, 255) | | Rien | **Noir** | (0, 0, 0) |

**Pourquoi ca parait contre-intuitif ?**

En peinture, rouge + bleu = violet (sombre) Sur ecran, rouge + bleu = magenta (vif)

La difference : la peinture absorbe la lumiere, l'ecran l'emet !

Python - Manipulation des couleurs
# Demonstration de la synthese additive RGB

def rgb_vers_couleur(r, g, b):
    """Decrit une couleur RGB."""
    if r == g == b == 0:
        return "NOIR (absence de lumiere)"
    elif r == g == b == 255:
        return "BLANC (toutes les lumieres)"
    elif r == g == b:
        return f"GRIS (niveau {r})"
    elif r == 255 and g == 0 and b == 0:
        return "ROUGE pur"
    elif r == 0 and g == 255 and b == 0:
        return "VERT pur"
    elif r == 0 and g == 0 and b == 255:
        return "BLEU pur"
    elif r == 255 and g == 255 and b == 0:
        return "JAUNE (Rouge + Vert)"
    elif r == 255 and g == 0 and b == 255:
        return "MAGENTA (Rouge + Bleu)"
    elif r == 0 and g == 255 and b == 255:
        return "CYAN (Vert + Bleu)"
    else:
        return "Couleur composee"

print("=== SYNTHESE ADDITIVE RGB ===\n")
print("Rouge + Vert + Bleu = Blanc")
print("C'est contre-intuitif mais logique avec la lumiere !\n")

# Couleurs primaires et secondaires
couleurs = [
    (0, 0, 0, "Noir"),
    (255, 0, 0, "Rouge"),
    (0, 255, 0, "Vert"),
    (0, 0, 255, "Bleu"),
    (255, 255, 0, "Jaune = R+V"),
    (255, 0, 255, "Magenta = R+B"),
    (0, 255, 255, "Cyan = V+B"),
    (255, 255, 255, "Blanc = R+V+B"),
]

print(f"{'Couleur':<15} {'R':<5} {'G':<5} {'B':<5}")
print("-" * 35)
for r, g, b, nom in couleurs:
    print(f"{nom:<15} {r:<5} {g:<5} {b:<5}")

print("\n=== NIVEAUX DE GRIS ===\n")
print("Quand R = G = B, on obtient du gris")
print("Plus la valeur est elevee, plus le gris est clair\n")

for niveau in [0, 64, 128, 192, 255]:
    description = rgb_vers_couleur(niveau, niveau, niveau)
    print(f"RGB({niveau}, {niveau}, {niveau}) = {description}")

print("\n=== VARIATIONS D'UNE COULEUR ===\n")
print("Le rouge a differentes intensites:\n")

for intensite in [255, 200, 150, 100, 50]:
    pourcentage = round(intensite / 255 * 100)
    print(f"RGB({intensite}, 0, 0) = Rouge a {pourcentage}%")

Quiz de validation

1. Que se passe-t-il quand on melange Rouge + Vert + Bleu en synthese additive ?

2. Quelle est la plage de valeurs pour chaque composante RGB ?

3. Combien de couleurs differentes peut-on creer en RGB 24 bits ?

4. Quel est le code hexadecimal du rouge pur RGB(255, 0, 0) ?

5. Quelle couleur obtient-on avec RGB(255, 255, 0) ?

Pixel