Une couleur, ce sont trois nombres
Sur un écran, chaque couleur est un mélange de rouge, de vert et de bleu, avec trois nombres de 0 à 255. On y ajoute parfois un quatrième nombre, alpha, qui dit à quel point la couleur est transparente.
Savoir mélanger ces nombres permet de poser une ombre, un texte ou une vitre colorée sur une image.
À la fin de cette leçon
Remarque
Je peux mélanger deux couleurs avec un alpha et calculer la couleur obtenue.
Mots clés
| Mot | Ce que ça veut dire |
|---|---|
| RVB | rouge, vert, bleu : les trois canaux d’une couleur |
| Alpha | la part de la couleur de dessus, de 0 % à 100 % |
| Mélange | une couleur calculée à partir de deux autres |
| Canal | un des nombres de la couleur, calculé à part |
| Hexadécimal | l’écriture de la couleur en base 16, avec # |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Les écrans additionnent de la lumière
Un écran fabrique les couleurs avec de la lumière. Plus un canal est grand, plus il y a de cette lumière. Trois canaux à 0 donnent du noir, trois canaux à 255 du blanc.
Le rouge et le vert au maximum, sans bleu, donnent du jaune. Les trois canaux égaux donnent un gris.
Quelques couleurs et leurs trois nombres
| Couleur | Rouge | Vert | Bleu |
|---|---|---|---|
| Noir | 0 | 0 | 0 |
| Rouge | 255 | 0 | 0 |
| Jaune | 255 | 255 | 0 |
| Gris moyen | 128 | 128 | 128 |
| Blanc | 255 | 255 | 255 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Écrire deux couleurs en hexadécimal
docker exec jupyter python3 -c "print('#%02x%02x%02x' % (200,30,30), '#%02x%02x%02x' % (20,120,220))"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Alpha dit quelle part vient du dessus
Poser une couleur source sur un fond, c’est prendre une part de l’une et le reste de l’autre. Avec alpha à 25 %, on garde 25 % de la source et 75 % du fond.
Le calcul se fait canal par canal : résultat = alpha × source + (100 − alpha) × fond, le tout divisé par 100.
Exemple travaillé : alpha à 25 %
| Canal | Source | Fond | Calcul | Résultat |
|---|---|---|---|---|
| Rouge | 200 | 20 | (25 × 200 + 75 × 20) / 100 | 65 |
| Vert | 30 | 120 | (25 × 30 + 75 × 120) / 100 | 98 |
| Bleu | 30 | 220 | (25 × 30 + 75 × 220) / 100 | 173 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Mélanger deux couleurs avec alpha
# Mélange d'une couleur source sur un fond, canal par canal.
source = [200, 30, 30]
fond = [20, 120, 220]
alpha = 25 # en pourcent
resultat = []
for i in range(3):
valeur = (alpha * source[i] + (100 - alpha) * fond[i] + 50) // 100
resultat.append(valeur)
print(resultat)
# Mettez alpha à 100, puis à 0 : que devient le résultat ?
Une erreur fréquente
Attention
Beaucoup pensent que mélanger deux couleurs revient à les additionner. Ce n’est pas juste : 200 plus 20 dépasse déjà 200 et peut passer 255. On calcule une moyenne pondérée, qui reste toujours entre les deux valeurs.
Comparer avec le mélange de Pillow
docker exec jupyter python3 -c "from PIL import Image; a=Image.new('RGB',(1,1),(20,120,220)); b=Image.new('RGB',(1,1),(200,30,30)); print(Image.blend(a,b,0.25).getpixel((0,0)))"Affichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Un arrondi peut changer d’une unité
La commande affiche (65, 97, 172), alors que notre calcul donne (65, 98, 173). Pillow coupe la décimale au lieu d’arrondir, d’où un écart d’une unité sur deux canaux.
Aucune des deux réponses n’est fausse : c’est un choix d’arrondi. Dans le devoir, on arrondit au plus proche, avec + 50 avant la division entière par 100.