Rouge, Vert, Bleu, de 0 à 255

Comprendre le codage des couleurs
mardi 1er novembre 2016
par  Nathalie CARRIÉ

Cela fait plusieurs années que je souhaite créer des activités autour du codage des couleurs en classe. En mathématiques, j’ai pu créer des activités autour de la dimension 3 (en 1re L et en 1re ES option Maths) et des activités de statistiques, d’algorithmique et de simulations en seconde.
Dans le cadre de l’enseignement d’exploration ICN en seconde (Informatique et Créativité Numérique), expliquer le codage de la couleur demande de mettre en place beaucoup de définitions : qu’est-ce qu’un bit, un octet, un pixel ? ... Et demande des savoirs préliminaires sur le système binaire et hexadécimal.
Afin de comprendre le codage des couleurs, les élèves ont à répondre à un certain nombre de questions, à partir d’un petit logiciel très simple de visualisation des couleurs, sous forme d’exposés courts de 5 à 10 mn.
Ce qui m’a permis d’imaginer le cours que je vais vous présenter.

Ce cours sera proposé aux élèves, comme synthèse du travail de chaque groupe. Ils devront ensuite créer une animation de leur choix avec des couleurs, en utilisant le logiciel de programmation visuelle Snap !

PNG - 221.8 ko

Voici le sommaire du cours que je compte faire construire par mes élèves. Il est ponctué de petits exercices de programmation à produire avec un langage au choix, par exemple Python, Scratch, Snap !, ou javascript (dans CarMetal). Les solutions proposées seront faites ici avec le langage Snap ! pour la possibilité qu’il nous laisse de créer nos propres fonctions.
Des idées de projets à mener par petits groupes d’élèves illustrent aussi ce cours.

Pour donner une idée, ce cours est prévu de se dérouler sur 4 séances d’1h30 : une séance d’introduction, de création des groupes et de répartition des exposés, puis 3 séances de pratique (les exposés ayant lieu en début de chaque séance).

  • Définitions préalables : bit, octet, pixel
    • Qu’est-ce qu’un bit ?
    • Qu’est-ce qu’un octet ?
    • Qu’est-ce qu’un pixel ?
  • Numérations de position : système décimal, système binaire et système hexadécimal
    • Le système décimal
    • Le système binaire
    • Le système hexadécimal
    • Exemples de conversion
    • Conversion binaire -> hexadécimal
  • Le codage RGB informatique des couleurs
    • Une couleur est un mélange additif des 3 couleurs Rouge-Vert-Bleu
    • Mais pourquoi 255 ?
      • Le codage des couleurs sur 3 octets
    • Exemple du pourpre et premiers calculs
    • Conversion d’un code (r,v,b) en pourcentages de rouge, de vert et de bleu contenus dans une couleur
    • Algorithme
      • Le problème
      • Les variables
      • L’algorithme
      • Le code Snap !
  • Manipulation du logiciel ColorToy ou du fichier CarMetal
  • Le triangle des couleurs
  • Prolongement possible : Statistiques, Simulations
  • Compléments Sur Internet
  • Êtes-vous synesthésique ?





Définitions préalables : bit, octet, pixel

Qu’est-ce qu’un bit ?

Le bit est l’unité la plus simple dans un système de numération, ne pouvant prendre que deux valeurs, désignées le plus souvent par les chiffres 0 et 1. Un bit ou élément binaire peut représenter aussi bien une alternative logique, exprimée par faux et vrai, qu’un chiffre du système binaire.
@Wikipédia

Qu’est-ce qu’un octet ?

Un octet est un regroupement de 8 bits codant une information. Dans ce système de codage, s’appuyant sur le système binaire, un octet permet de représenter 28, soit 256 valeurs différentes. Un ou plusieurs octets permettent ainsi de coder des valeurs numériques ou des caractères.

@Wikipédia

Les multiples de l’octet

PNG - 89.5 ko

Qu’est-ce qu’un pixel ?

Le pixel (souvent abrégé px) est l’unité de base permettant de mesurer la définition d’une image numérique matricielle. Son nom provient de la locution anglaise picture element, qui signifie « élément d’image ».

@Wikipédia

Numérations de position : système décimal, système binaire et système hexadécimal

Le système décimal

Notre système de numération est le système décimal. Il nécessite 10 symboles pour coder un nombre : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

PNG - 21.5 ko
 1257 = 1.10^3 + 2.10^2 + 5.10^1 + 7.10^0

Le système binaire

@Wikipédia

Enumération des premiers nombres en binaire

PNG - 65.9 ko

Tableau de groupements binaires

PNG - 27.6 ko

Exercice de programmation : Afficher les 20 premiers entiers en binaire.

Le système hexadécimal

@Wikipédia

PNG - 189.8 ko
PNG - 48.4 ko
 4D5_{16} = 4.16^2 + 13.16^1 + 5.16^0 = 1237_{10}

Exercice de programmation : Afficher les 20 premiers entiers en hexadécimal.

Exemples de conversions

PNG - 38.2 ko
 FF_{16} = 15.16^1 + 15.16^0 = 15.16 + 15 = 255_{10}

Conversion binaire -> hexadécimal

PNG - 54.8 ko

Exercices de programmation :
- Programmer un convertisseur binaire vers décimal,
- Programmer un convertisseur hexadécimal vers décimal,
- Programmer un convertisseur décimal vers binaire,
- Programmer un convertisseur décimal vers hexadécimal,
- Programmer un convertisseur binaire vers hexadécimal,

PNG - 169.4 ko

Le codage RGB informatique des couleurs

Une couleur est un mélange additif des 3 couleurs Rouge-Vert-Bleu

Le fonctionnement de l’oeil humain donne une perception des couleurs à trois dimensions. Donc un mélange additif de trois couleurs de base permet de rendre l’essentiel des impressions de couleurs de la vie courante. L’industrie audiovisuelle a normalisé l’utilisation d’un certain rouge, d’un certain vert clair et d’un certain bleu foncé pour les moniteurs. Pour autant, ce choix limite le rendu des couleurs, qui seront toujours un peu délavées par rapport à la réalité, en particulier les turquoises. Notre cerveau étant très doué pour s’adapter, nous ne le remarquons quasiment pas. Utiliser plus de couleurs de base permettrait un meilleur rendu, mais reviendrait plus cher. C’est pourquoi de nos jours tout le monde utilise ces trois couleurs-là, parfois qualifiées de primaires. [1]

Le codage RGB des couleurs est le codage informatique le plus proche de la réalité du mélange additif des couleurs.

Ce codage peut alors se faire sur 3 octets.
- RGB : Red-Green-Blue en anglais,
- RVB : Rouge-Vert-Bleu en français.

Chaque couleur est un mélange additif de ces trois couleurs souvent qualifiées de primaires. Sur un écran d’ordinateur, ce choix de couleurs primaires est issu de conventions technologiques définies par des normes.

PNG - 9.1 ko

- Le rouge est un nombre entier variant de 0 à 255
- Le vert est un nombre entier variant de 0 à 255
- Le bleu est un nombre entier variant de 0 à 255

Ainsi, une couleur va être repérée par un triplet (r,v,b) où chaque valeur est un nombre entier compris entre 0 et 255.

@Wikipédia

Première idée de projet : Créer une animation qui affiche une couleur que l’on pourra modifier en agissant sur 3 ascenseurs Rouge, Vert et Bleu (ou curseurs), comme sur l’image ci-dessus.

Mais pourquoi 255 ???

Le codage des couleurs sur 3 octets

Le codage d’un pixel peut se faire sur 32 bits, dont les 24 premiers bits sont utilisés pour coder la couleur.

Les 24 bits d’une couleur se décomposent donc en 3 fois 8 bits comme ceci :

  • 8 bits sont consacrés à la teinte rouge ;
  • 8 bits sont consacrés à la teinte vert ;
  • 8 bits sont consacrés à la teinte bleu.

@Wikipédia

Le codage RGB de la couleur s’opère donc à l’aide de 3 octets de 8 bits.

Représentation d’un octet pour lequel tous les bits sont à 1 :

1 1 1 1 1 1 1 1
2^7 2^6 2^5 2^4 2^3 2^2 2^1 2^0

2^7 + 2^6 + 2^5 + 2^4 + 2^3 + 2^2 + 2^1 + 2^0 = 255 = 2^8-1

255 est donc le plus grand nombre entier que l’on puisse coder sur 1 octet.

PNG - 21.1 ko

Exemple du pourpre et premiers calculs

PNG - 7.8 ko

9E0E40 est le code hexadécimal de la couleur obtenue par le mélange (158,14,64). C’est un pourpre.

PNG - 42.4 ko

Tout sur le pourpre sur pourpre.com

Le rouge vaut donc 158 pour une gamme allant de 0 (pas de rouge, soit 0% de rouge) à 255 (le rouge est à fond, soit 100% de rouge).
Ceci représente un taux de rouge de :
158/255*100=62\% (arrondi à l’unité).
On évalue de la même façon le taux de vert :
14/255*100=5\% et le taux de bleu :
64/255*100=25\%.

Ainsi, le pourpre est une couleur qui contient un taux de rouge de 62%, un taux de vert de 5% et un taux de bleu de 25%.

PNG - 27.3 ko

On peut maintenant calculer le pourcentage de chaque couleur contenue dans le pourpre :
Total des 3 taux obtenus = 61,96 + 5,49 + 25,10 = 92,55%
R = 67% , V = 6%, B= 27% (couleurs arrondies à l’unité).
La couleur pourpre peut donc être aussi repérée par ces 3 pourcentages dont le total vaut 100% :
pourpre = (67%, 6%, 27%)

Le pourpre contient 67% de rouge, 6% de vert et 27% de bleu. [2]

Exercice : Calculer les pourcentages [3] de Rouge, de Vert et de Bleu contenus dans cette couleur codée (55, 210, 122)

PNG - 9.1 ko

Conversion d’un code (r,v,b) en pourcentages [4] de rouge, de vert et de bleu contenus dans une couleur.

Si nous revenons au cas général de notre couleur codée RVB (r,v,b), le taux de rouge, de vert et de bleu dans les gammes de rouge, vert, bleu est représenté par le triplet :
                 ( r'=r/255*100, v'=v/255*100, b'=b/255*100 )
et le pourcentage de RVB avec total égal à 100% est : ( r'/(r'+v'+b'), v'/(r'+v'+b'), b'/(r'+v'+b') ).

Algorithme

- Le problème

Convertir un triplet (r,v,b) donné en décimal, en pourcentages de rouge, de vert et de bleu contenus dans la couleur.

- Les variables

r, v, b : nombres entiers compris entre 0 et 255
TauxDeRouge, TauxDeVert, TauxDeBleu : nombres réels
PourcentRouge, PourcentVert, PourcentBleu : nombres réels

- L’algorithme

       
Entrer r,v,b
TauxDeRouge <- r/255*100
TauxDeVert <- v/255*100
TauxDeBleu <- b/255*100
Afficher TauxDeRouge,TauxDeVert,TauxDeBleu
PourcentRouge <- TauxDeRouge / (TauxDeRouge+TauxDeVert+TauxDeBleu)
PourcentVert <- TauxDeVert / (TauxDeRouge+TauxDeVert+TauxDeBleu)
PourcentBleu <- TauxDeBleu / (TauxDeRouge+TauxDeVert+TauxDeBleu)
Afficher PourcentRouge,PourcentVert,PourcentBleu

- Algorithme à programmer avec Snap ! (ou Scratch)

Alonzo

- Le code Snap !

Idée de projet : Améliorer l’animation précédente et stocker les couleurs obtenues dans une liste de couleurs. En gros, établir l’historique des couleurs tirées au hasard par l’utilisateur.

Manipulation du logiciel ColorToy ou du fichier CarMetal

- Modifier les ascenseurs donnant les dosages respectifs de rouge, vert et bleu pour répondre aux questions suivantes :
— Comment obtenir du blanc, du noir ?
Noter le code de la couleur obtenue et le triplet de pourcentages RVB correspondant (total=100%).
— Comment obtenir du jaune, du cyan (turquoise), du magenta (rose) ?
Noter le code de la couleur obtenue et le triplet de pourcentages RVB correspondant (total=100%).

Les couleurs jaune, cyan, magenta sont appelées couleurs complémentaires.

PNG - 27.7 ko
PNG - 27.7 ko
PNG - 18.9 ko
PNG - 28.1 ko
PNG - 26.6 ko

Il existe de nombreux logiciels qui permettent de prélever une couleur à l’aide d’une pipette et qui donnent le code correspondant. Je citerai par exemple, sous Linux, gcolor2 et Colorzilla, une extension Firefox.

PNG - 39.4 ko

- Mettre le curseur du rouge à la moitié, celui du vert aussi et celui du bleu à 0% puis à 100%.
— Qu’obtient-­on comme couleur ?
Donner (R%,V%,B%) à chaque fois.
- Mettre le curseur du rouge à la moitié, celui du bleu aussi et celui du vert à 0% puis à 100%.
— Qu’obtient­-on comme couleur ?
Donner (R%,V%,B%) à chaque fois.
- Mettre le curseur du vert à la moitié, celui du bleu aussi et celui du rouge à 0% puis à 100%.
— Qu’obtient-­on comme couleur ?
Donner (R%,V%,B%) à chaque fois.

Le triangle des couleurs

Dessiner un grand triangle équilatéral ayant pour sommets les points R, V, et B (18 cm de côté). Placer alors sur ce triangle le jaune, le cyan, le magenta, les 6 dernières couleurs obtenues.
- Quel mélange doit-on faire pour obtenir du mauve, du violet, du orange, du vert fluo, du fushia ?
Placer sur votre grand triangle RVB ces 5 autres couleurs.

PNG - 43.3 ko

Exercice de programmation : Créer ce triangle ainsi que les points de couleur demandés avec au choix :
— Snap !
— Scratch
CarMetal / DGPad.

- Essayer d’obtenir un marron, un gris, la couleur de l’argile. Donner les codes (R%,V%,B%) (avec R%+V%+B%=100%) à chaque fois.
- Obtenez 5 autres couleurs que vous connaissez et qui n’ont pas été encore obtenues dans cette page.

PNG - 81.5 ko

Idée de projet : Créer un point animé dans ce triangle. Sa couleur sera une combinaison des couleurs des 3 sommets, sachant que si le point est en R, il sera Rouge, en V, il sera Vert, etc...
Le projet pourra être réalisé au choix avec Snap !, Scratch, ou CarMetal / DGPad.

- Connaissez-vous des pierres précieuses ou semi-précieuses qui portent le nom d’une couleur ?
Si oui, retrouvez le codage (R%,V%,B%) de ces couleurs à l’aide du logiciel ColorToy.

Prolongement possible : Statistiques, Simulations

Tirer au hasard 30 couleurs (r,v,b) et regrouper dans un tableau les triplets suivants :

(r,v,b) (r'=r/255*100, v'=v/255*100, b'=b/255*100) (R%=r'/(r'+v'+b'), V%=v'/(r'+v'+b'), B%=b'/(r'+v'+b'))
1 (158,14,64) (67%,6%,27%)
2 (55,210,122)
... ... ... ...
30 (255,255,0)

Regroupez tous vos résultats d’un même groupe pour calculer :

Couleur Rouge Vert Bleu
min
q1
médiane
q3
max

Donner alors le Rouge médian, le Rouge moyen, le Vert médian, le vert moyen, le bleu médian et le bleu moyen obtenus.

Idée de projet : Créer une animation qui tire au hasard 30 couleurs, les affiche dans un tableau de couleurs sous la forme de votre choix. Le logiciel créé doit ensuite effectuer lui-même les calculs statistiques demandés, et afficher les résultats obtenus.

Compléments Sur Internet

- Les couleurs du Web

- Un site Internet de référence sur les couleurs : Pourpre.com

- Le site de ColorToy ne répond plus...
(à substituer par le fichier CarMetal CouleursRVB.Ascenseurs.Pourcentages.zir au pied de cet article.)

- vidéos sur youtube : Mélange de 2 couleurs

Êtes-vous synesthésique ?

- Voyez-vous des lettres en couleur ? des chiffres en couleur ? des objets en couleur ? Si oui, lesquels ?
- voir la synesthésie sur Wikipédia



PNG - 9.5 ko

Ce document a été créé à l’attention des élèves de seconde, et à l’attention de toute personne curieuse de comprendre le codage RVB des couleurs en informatique.
Il est produit sous licence Creative Commons BY NC SA. pour l’IREM de la Réunion.


Pour terminer, je remercie Nicolas George, de la liste EDUC de l’April, pour ses remarques constructives concernant un certain nombre d’incohérences dites dans cet article à propos de la couleur.


[1Nicolas George, liste EDUC de l’April.

[2En fait, ce résultat est très approximatif car on néglige volontairement ici la correction gamma, notion beaucoup trop compliquée pour être détaillée ici. Ainsi, si l’on compare les couleurs #A04242 et #504242, le coefficient du rouge dans l’une est le double de l’autre, mais cela ne veut pas dire que l’intensité du rouge est double.

[3On néglige la correction gamma.

[4On néglige toujours la correction gamma.


Documents joints

CouleursRVB.Ascenseurs.Pourcentages.zir
CouleursRVB.Ascenseurs.Pourcentages.zir

Commentaires

Annonces

Prochains rendez-vous de l’IREM

Séminaire EDIM-IREM

- Mercredi 22 novembre 2017, 14h-18h, campus du Tampon, amphi 120 D
- Mercredi 7 février 2018, PTU, Saint-Denis, salle S23.6
- Mercredi 7 mars 2018, 14h-18h, campus du Tampon
- Mercredi 4 avril 2018, PTU, Saint-Denis, salle S23.6
- Mercredi 2 mai, 14h-18h, campus du Tampon
- Mardi 5 juin 2018, PTU, Saint-Denis, salle S23.6
- Mercredi 6 juin, 14h-18h, campus du Tampon

Fête de la science

Campus du Moufia, 16 et 17 novembre 2017.
Thème : « La recherche à l’heure du numérique »

Semaine des mathématiques

Du 26 au 31 mars 2018.
Thème : « Mathématiques et mouvement »


Brèves

Décès de Raymond Smullyan

mercredi 15 mars

Le logicien Raymon Smullyan est décédé en février 2017, à l’âge respectable de 97 ans : Il avait eu Alonzo Church comme professeur ! Pour en savoir plus, voir cet article

Travailler à plusieurs

lundi 19 décembre 2016

Les enseignements d’exploration au lycée imposent aux enseignants de travailler ensemble. Chantal Tuffery-Rochdi a analysé dans sa thèse les pratiques des enseignants de MPS (méthodes et pratiques scientifiques). Elle répond aux questions des Cahiers pédagogiques.

Un document sur Eduscol

mardi 19 mai 2015

Un document clarifiant bien la façon dont les mêmes concepts vivent en mathématiques et dans les sciences « exactes » les utilisant, publié par Eduscol en octobre 2014. Citons-les :
« Le document proposé ci-dessous s’adresse aux professeurs de mathématiques, physique-chimie et sciences de l’ingénieur intervenant dans le segment [Bac-3 ; Bac+3]. Il vise à les informer des différences de présentation et d’interprétation qui sont faites de certains concepts mathématiques dans les autres disciplines. Ces éclaircissements peuvent contribuer à harmoniser et à clarifier l’utilisation de ces notions auprès des élèves. »

Histoire de la comptabilité

vendredi 28 décembre 2012

Sur ce site (en anglais) dédié à la comptabilité, on trouve des informations intéressantes sur l’histoire et les pratiques de ce domaine, qui peuvent être utiles aux professeurs enseignant des mathématiques financières (et aussi aux autres...).

La CGE et la réforme des lycées

lundi 16 janvier 2012

La Conférence des Grandes Écoles publie 19 préconisations pour la réforme du lycée.

Sur le Web : Les 19 préconisations

Pratique des mathématiques en série STD2A

lundi 16 janvier 2012

Le site de l’IGEN offre des recommandations et des ressources pour enseigner les mathématiques en série STD2A. Les thèmes abordés (couleurs et nuances de gris, arcs et architecture, jeux vidéos, photo et tableur, perspectives parallèles...) sont de nature à donner aussi des idées d’activités aux enseignants des autres séries !

En cheminant avec Kakeya

lundi 16 janvier 2012

Un livre (à télécharger) de Vincent Borelli et Jean-Luc Rullière qui présente le calcul intégral et la dérivation en s’appuyant sur la question de Kakeya. Pour les lycéens, les étudiants et tous les esprits curieux qui souhaitent voir les mathématiques sous un jour différent.

Sur le Web : Livre à télécharger

Bicentenaire Galois

lundi 12 septembre 2011

À l’occasion du bicentenaire de la naissance d’Évariste Galois (1811-2011), l’Institut Henri Poincaré et la Société mathématique de France organisent un ensemble de manifestations et proposent un site contenant diverses ressources documentaires susceptibles d’intéresser les enseignants.

Statistiques

Dernière mise à jour

dimanche 10 décembre 2017

Publication

775 Articles
Aucun album photo
134 Brèves
11 Sites Web
132 Auteurs

Visites

504 aujourd'hui
1013 hier
2196757 depuis le début
40 visiteurs actuellement connectés