Couleurs

Avant de voir la représenter des images, il est nécessaire de s'intéresser à la représentation des couleurs.

Codage RGB

Il existe plusieurs façons de décrire les couleurs en informatique. Dans ce cours, nous nous intéresserons au système de codage RGB (pour Red Green Blue) noté parfois RVB en français (pour Rouge Vert Bleu). Le principe consiste à mélanger ou plus précisément à additionner une certaine quantité des trois couleurs primaires (rouge, vert et bleu) pour obtenir la couleur finale. Ce procédé s'appelle la synthèse additive.

Code RGB décimal

Chacune des trois couleurs primaires est représentée par un nombre compris entre 0 et 255 (c'est-à-dire 256 valeurs). Il faut donc 3 octets pour coder un pixel avec le code RGB décimal, ce qui prend rapidement beaucoup de place.

Exemple: Le rouge est représenté par (255, 0, 0).

Exercice 14

De quelle couleur s'agit-il ?

1. noirblancrougevertbleujaunemagentacyangris foncégris clair (255, 0, 0)

2. noirblancrougevertbleujaunemagentacyangris foncégris clair (0, 0, 0)

3. noirblancrougevertbleujaunemagentacyangris foncégris clair (0, 0, 255)

4. noirblancrougevertbleujaunemagentacyangris foncégris clair (64, 64, 64)

5. noirblancrougevertbleujaunemagentacyangris foncégris clair (255, 255, 0)

6. noirblancrougevertbleujaunemagentacyangris foncégris clair (0, 255, 0)

7. noirblancrougevertbleujaunemagentacyangris foncégris clair (255, 255, 255)

8. noirblancrougevertbleujaunemagentacyangris foncégris clair (204, 204, 204)

9. noirblancrougevertbleujaunemagentacyangris foncégris clair (255, 0, 255)

10. noirblancrougevertbleujaunemagentacyangris foncégris clair (0, 255, 255)

Code RGB hexadécimal

Une autre manière de représenter les couleurs est d'utiliser l'hexadécimal. Cette représentation est plus compacte, car il suffit de 2 chiffres hexadécimaux pour représenter 256 valeurs (de \(00_{16}\) à \(FF_{16}\)). Le code RGB hexadécimal débute toujours par #.

Exemple: Le rouge est représenté par #FF0000.

Tableau des couleurs principales

Couleur	Nom	Code hexadécimal	Code décimal (R,G,B)
	black	#000000	(0, 0, 0)
	white	#FFFFFF	(255, 255, 255)
	red	#FF0000	(255, 0, 0)
	lime	#00FF00	(0, 255, 0)
	blue	#0000FF	(0, 0, 255)
	yellow	#FFFF00	(255, 255, 0)
	cyan	#00FFFF	(0, 255, 255)
	magenta	#FF00FF	(255, 0, 255)
	silver	#C0C0C0	(192, 192, 192)
	gray	#808080	(128, 128, 128)

Si les trois valeurs sont identiques, nous obtiendrons du gris. Avec une valeur petite, le gris sera foncé et avec une valeur élevée, le gris sera clair.

Sur le site "Liste des couleurs", il y a les références de toutes les couleurs possibles.

Nombre de couleurs possibles

Avec 3 octets (24 bits), il est possible de représenter:

\[2^{24} = 16\,777\,216 \text{ couleurs différentes}\]

Sachant qu l'oeil humain peut différencier jusqu'à 10 millions de couleurs, cette représentation est largement suffisante.

Exercice 15

De quelle couleur s'agit-il ?

1. noirblancrougevertbleujaunemagentacyangris foncégris clair #FFFFFF

2. noirblancrougevertbleujaunemagentacyangris foncégris clair #00FF00

3. noirblancrougevertbleujaunemagentacyangris foncégris clair #00FFFF

4. noirblancrougevertbleujaunemagentacyangris foncégris clair #FF0000

5. noirblancrougevertbleujaunemagentacyangris foncégris clair #404040

6. noirblancrougevertbleujaunemagentacyangris foncégris clair #000000

7. noirblancrougevertbleujaunemagentacyangris foncégris clair #FFFF00

8. noirblancrougevertbleujaunemagentacyangris foncégris clair #0000FF

9. noirblancrougevertbleujaunemagentacyangris foncégris clair #FF00FF

10. noirblancrougevertbleujaunemagentacyangris foncégris clair #CCCCCC

Exercice 16

Combien d'octets au minimum faut-il pour représenter une image de 1920 × 1080 pixels

1. en noir et blanc?

2. en 4 niveaux de gris?

3. en 8 niveaux de gris?

4. en 64 niveaux de gris?

5. en couleur?

Solution

Nombre de pixels de l'image: \(1920 \cdot 1080 = 2\,073\,600\) pixels

Rappel: 8 bits = 1 octet

1. Chaque pixel nécessite 1 bit (un bit permet de représenter 2 états: noir et blanc).
   Nombre de bits: \(1 \cdot 2\,073\,600 = 2\,073\,600\) bits
   Nombre d'octets: \(2\,073\,600 : 8 = 259\,200 \text{ octets} = 259.2 \text{ ko}\)
   

2. Chaque pixel nécessite 2 bits (deux bits permettent de représenter \(2^2=4\) états: noir, gris foncé, gris clair et blanc).
   Nombre de bits: \(2 \cdot 2\,073\,600 = 4\,147\,200\) bits
   Nombre d'octets: \(4\,147\,200 : 8 = 518\,400 \text{ octets} = 518.4 \text{ ko}\)
   

3. Chaque pixel nécessite 3 bits (trois bits permettent de représenter \(2^3=8\) états).
   Nombre de bits: \(3 \cdot 2\,073\,600 = 6\,220\,800\) bits
   Nombre d'octets: \(6\,220\,800 : 8 = 777\,600 \text{ octets} = 777.6 \text{ ko}\)
   

4. Chaque pixel nécessite 6 bits (six bits permettent de représenter \(2^6=64\) états).
   Nombre de bits: \(6 \cdot 2\,073\,600 = 12\,441\,600\) bits
   Nombre d'octets: \(12\,441\,600 : 8 = 1\,555\,200 \text{ octets} \simeq 1.6 \text{ Mo}\)
   

5. Chaque pixel nécessite 3 octets (un pour R, un pour G, un pour B).
   Nombre d'octets: \(3 \cdot 2\,073\,600 = 6\,220\,800 \text{ octets} \simeq 6.2 \text{ Mo}\)

Exercice 17

from tdoc import svg

def creation_image(largeur, hauteur, couleur):
  global img
  img = svg.Image(largeur, hauteur, stroke='black', style='width: 100%; height: 100%')
  rectangle(0, 0, largeur, hauteur, couleur)

def rectangle(x, y, largeur, hauteur, remplissage, bord="transparent"):
  img.rect(x, y, largeur, hauteur, stroke=bord, fill=remplissage)

def triangle(point_1, point_2, point_3, remplissage, bord="transparent"):
  img.polygon(point_1, point_2, point_3, stroke=bord, fill=remplissage)

def cercle(centre_x, centre_y, rayon, remplissage, bord="transparent"):
  img.circle(centre_x, centre_y, rayon, stroke=bord, fill=remplissage)

def ellipse(centre_x, centre_y, rayon_x, rayon_y, remplissage, bord="transparent"):
  img.ellipse(centre_x, centre_y, rayon_x, rayon_y, stroke=bord, fill=remplissage)

def ligne(x1, y1, x2, y2, couleur, epaisseur):
  img.line(x1, y1, x2, y2, stroke=svg.Stroke(couleur, width=epaisseur))

def texte(x, y, texte, couleur, taille):
  font = f"font: bold italic {taille}px serif"
  img.text(x, y, texte, stroke='transparent', fill=couleur, style=font)

# Affiche l'image
render(img)

creation_image(520, 70, "white")

# variables pour la position de départ
x = 10
y = 10

# côté du carré
cote = 50

# variables pour les couleurs RGB
r = 255
g = 0
b = 0

for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote

1. Sans exécuter le code, que fait le programme ci-dessus? Comprenez-vous tout le code?

2. Modifiez le programme pour qu'il affiche un dégradé de rouge.

3. Modifiez le programme pour qu'il affiche un dégradé de bleu.

4. Modifiez le programme pour qu'il affiche un dégradé de vert.

5. Modifiez le programme pour qu'il affiche un dégradé de magenta.

6. Modifiez le programme pour qu'il affiche un dégradé de jaune.

7. Modifiez le programme pour qu'il affiche un dégradé de cyan.

8. Modifiez le programme pour qu'il affiche un dégradé de gris.

9. Modifiez le programme pour qu'il affiche un dégradé arc en ciel comme ci-dessous.

   

Solution

creation_image(220, 180, "white")

# variables pour la position de départ
x = 10
y = 10

# côté du carré
cote = 20

# variables pour les couleurs RGB
r = 255
g = 0
b = 0

for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  r -= 25

r = 255
g = 125
x = 10
y += cote
for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  r -= 25
  g -= 12

r = 255
g = 255
x = 10
y += cote
for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  r -= 25
  g -= 25

r = 0
g = 255
x = 10
y += cote
for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  g -= 25

g = 255
b = 125
x = 10
y += cote
for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  g -= 25
  b -= 12

g = 255
b = 255
x = 10
y += cote
for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  g -= 25
  b -= 25

g = 125
b = 255
x = 10
y += cote
for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  g -= 12
  b -= 25

g = 0
b = 255
x = 10
y += cote
for _ in range(10):
  # la couleur peut être donnée avec hexadécimal #FF0000 ou avec rgb(255 0 0)
  couleur = "rgb(" + str(r) + " " + str(g) + " " + str(b) + ")"
  rectangle(x, y, cote, cote, couleur)
  x += cote
  b -= 25