Faire un arc-en-ciel avec des maths et de la sélection de couleurs

Suite au dernier article, je sais que vous vous posez tous plusieurs questions de la plus haute importance, qui méritent des réponses précises, rapides, et qui ne tournent pas autour du pot.



 "@now@n se moque-t-elle de nous ?"

"Ce blāūg n'est-il plus bon qu'à jeter ?"

"L'argent des abonnés sera-t-il rendu ?"

Mais, surtout :

"Comment puis-je, avec les seuls petits logiciels de graphisme pourris que je possède, réaliser d'aussi beaux dégradés arc-en-ciel que ceux des tableaux de l'article précédent ?"

Spécimen.

Eh bien mes chers, je vais vous révéler mon secret, et ce secret tient en trois lettres :

TSL.

---

Le secret des arcs-en-ciel numériques

Prenons ce nuancier que connaissent tous ceux qui ont Windows :

Vous pouvez le trouver en cherchant des couleurs pour votre mise en forme dans la suite Office, dans Paint... Il est partout.

Pour fabriquer un dégradé régulier de type arc-en-ciel, vous voulez aligner un certain nombre de nuances qui se fondent bien les unes derrière les autres.

Ce "certain nombre de nuances", soit il est imposé (dans mon tableau spécimen, j'avais 26 nuances à attribuer), soit vous le décidez maintenant. Appelons-le N.

Le nuancier fabrique une couleur en lui considérant au moins trois coordonnées : sur l'exemple, vous voyez que la couleur blanche a pour coordonnées Rouge-Vert-Bleu, ou RVB, (255, 255, 255).

Une coordonnée, ça va de 0 minimum à 255 maximum, donc ça peut prendre 256 valeurs différentes.

Changer les coordonnées RVB est un peu ennuyeux pour fabriquer des arcs-en-ciel. Heureusement, ce ne sont pas les seules que le nuancier met à notre disposition : cliquons sur le petit menu déroulant.

Vous voyez l'option RVB, pour Rouge Vert Bleu, et l'option TSL, pour Teinte Saturation Luminosité.

Cliquons dessus sans peur et regardons ce qu'il s'y passe.

Cette fois-ci la couleur que j'ai choisie pour illustrer n'est pas du blanc mais le rouge le plus pétant disponible sur le nuancier.

En coordonnées RVB, c'est du (255, 0, 0) ; comme vous le voyez, en coordonnées TSL, c'est du (0, 255, 128).

Pour vulgariser très vite, la teinte est la position horizontale sur le nuancier : le 0 correspond à cette nuance de rouge à l'extrême-gauche et plus on augmente la teinte plus on se décale vers la droite.
(Ceci n'est pas un commentaire politique).

La saturation est le niveau de "pétance" de la couleur ; elle correspond à un déplacement vertical dans le nuancier. À 255, nous sommes tout en haut, là où les couleurs sont vives ; à 0, on tombe dans la zone grise en bas du nuancier.

La luminosité est un décalage vers le blanc ou vers le noir de la couleur. À 128, nous sommes pile au milieu (128 est la moitié de 256) : ni éclairci, ni assombri.

Notez que le nuancier de Paint ne fonctionne pas exactement pareil :

Pour lui, le TSL se calcule de 0 à 239 (ou 240, parce que what). Du coup, la saturation max est de 240, la luminosité "neutre" à 120. Sinon, même principe.

Les coordonnées TSL sont infiniment plus pratiques que les RVB pour fabriquer un nuancier bien régulier.

Si vous jouez sur la teinte, vous obtiendrez le premier dégradé que je vous ai posté là-haut, en tout début d'article. ↑

Si vous jouez sur la saturation, vous obtiendrez quelque chose de similaire au deuxième dégradé.

Si vous jouez sur la luminosité, vous obtiendrez le même genre de gradient que le troisième dégradé.

Vous vous souvenez de N, le nombre de nuances que vous voulez, qu'on a défini tout à l'heure ? On va en avoir besoin.

---

Passons à la pratique

Allons-y : fabriquons des arcs-en-ciel saturés à fond, avec une luminosité neutre, en augmentant la valeur de N. Je commence avec N = 3.

Version "256"

Je pars de TSL (0, 255, 128).

Je ne veux bouger que la valeur de T de 0 à 255. Je calcule 256/N : 256/3 = 85,3333 à l'infini. J'arrondis à l'inférieur ; mes trois valeurs de T seront 0, 85 et 170.

Version "240"

Je pars de TSL (0, 240, 120).

Je ne veux bouger que la valeur de T de 0 à 239. Je calcule 240/N : 240/3 = 80.
Même pas besoin d'arrondir : mes trois valeurs de T seront 0, 80 et 160.

Voici ce que ça donne avec différentes valeurs de N :

Notez que comme j'avais deux outils sous la main j'en ai profité pour utiliser l'échelle qui m'arrangeait :

256 est divisible par 2, 4, 8, 16 ; 240 est divisible par 2, 3, 4, 5, 6, 8, 10, 12, 15, 16.

---

Voilà !

Voilà, vous avez mon secret pour faire des arcs-en-ciel. Notez que généralement j'utilise une valeur de luminosité vers les 200 pour ajouter un effet pastel qui lie mieux les morceaux de l'arc-en-ciel entre eux.

J'espère que cet article vous aura été utile à quelque chose (même si je ne vois pas à quoi) et je vous souhaite une bonne journée.