Jouer avec les couleurs
Que signifie #1D9BF0 ? Pourquoi ce code donne-t-il du bleu ? Dans ce cours, on apprend à lire un code de couleur, puis à fabriquer ses propres couleurs par le calcul.
Rouge, vert, bleu
Un écran fabrique toutes les couleurs en mélangeant trois lumières : du rouge, du vert et du bleu. Chaque lumière a une intensité de 0 (éteinte) à 255 (au maximum).
rgb(rouge, vert, bleu) construit une couleur à partir de ces trois nombres :
t est une toile
dimension(t, 400, 90)
remplir(t, #FFFFFF)
cercle(t, 50, 45, 35, rgb(255, 0, 0)) // rouge
cercle(t, 130, 45, 35, rgb(0, 255, 0)) // vert
cercle(t, 210, 45, 35, rgb(0, 0, 255)) // bleu
cercle(t, 290, 45, 35, rgb(255, 255, 0)) // rouge + vert = jaune
cercle(t, 370, 45, 35, rgb(0, 0, 0)) // tout éteint = noir
affiche t
Rouge et vert au maximum donnent du jaune : c'est le mélange des lumières, différent de celui des peintures.
Question : Quelle couleur donne rgb(255, 255, 255) ? — Blanc. Les trois lumières au maximum donnent du blanc ; toutes éteintes, du noir.
Lire un code hexadécimal
Le code #1D9BF0 contient les mêmes trois nombres, écrits en hexadécimal (base 16), deux caractères par couleur :
1D : le rouge (29 sur 255) ;9B : le vert (155 sur 255) ;F0 : le bleu (240 sur 255).
Peu de rouge, un peu de vert, beaucoup de bleu : un bleu clair. Ces deux écritures désignent exactement la même couleur :
t est une toile
dimension(t, 200, 90)
remplir(t, #FFFFFF)
rectangle(t, 10, 10, 85, 70, #1D9BF0)
rectangle(t, 105, 10, 85, 70, rgb(29, 155, 240))
affiche t
L'intérêt de rgb, c'est que ses valeurs peuvent venir d'un calcul.
Un dégradé par le calcul
En faisant varier une composante avec une boucle, on obtient un dégradé :
t est une toile
dimension(t, 384, 80)
pour i de 0 à 15
rectangle(t, i * 24, 0, 24, 80, rgb(i * 17, 80, 255 - i * 17))
fin pour
affiche t
De gauche à droite, le rouge augmente (de 0 à 255) pendant que le bleu diminue : on passe du bleu au rouge en traversant le violet.
Pour remplir toute la toile d'un dégradé, dégradé le fait en une ligne :
t est une toile
dimension(t, 384, 80)
dégradé(t, [#1D9BF0, #7C4DFF, #F91880])
label(t, 20, 48, 'Un fond en dégradé', #FFFFFF, 18)
affiche t
Teinte, saturation, luminosité
Pour choisir une couleur, rgb n'est pas très intuitif. tls raisonne comme un peintre :
- la teinte, de 0 à 360 : la position sur le cercle des couleurs (0 rouge, 120 vert, 240 bleu) ;
- la saturation, de 0 à 100 : de gris à très vif ;
- la luminosité, de 0 à 100 : de noir à blanc, 50 donnant la couleur pure.
t est une toile
dimension(t, 360, 130)
remplir(t, #FFFFFF)
// l'arc-en-ciel : la teinte varie
pour i de 0 à 35
rectangle(t, i * 10, 0, 10, 60, tls(i * 10, 90, 50))
fin pour
// un camaïeu de bleus : la luminosité varie
pour i de 0 à 8
rectangle(t, i * 40, 70, 40, 60, tls(210, 80, 15 + i * 9))
fin pour
affiche t
Avec tls, éclaircir ou assombrir une couleur revient à changer un seul nombre.
La transparence
rgba ajoute un quatrième nombre, de 0 (invisible) à 1 (opaque). Les formes transparentes laissent voir ce qu'il y a dessous :
t est une toile
dimension(t, 260, 220)
remplir(t, #FFFFFF)
cercle(t, 100, 90, 70, rgba(255, 0, 0, 0.5))
cercle(t, 160, 90, 70, rgba(0, 200, 0, 0.5))
cercle(t, 130, 140, 70, rgba(0, 0, 255, 0.5))
affiche t
Là où les cercles se chevauchent, les couleurs se mélangent.
Dans le code, les nombres décimaux s'écrivent avec un point : 0.5. Et pense à l'espace après chaque virgule.
En résumé
- Une couleur = du rouge, du vert et du bleu, de 0 à 255 chacun.
#RRGGBB et rgb(r, v, b) désignent la même chose ; rgb accepte des calculs.tls(teinte, saturation, luminosité) est plus pratique pour choisir et nuancer.rgba(r, v, b, alpha) ajoute la transparence ; dégradé remplit le fond.
