1. Services|
2. Références|
3. Articles|
4. Didacticiels|
5. Ressources|
6. Jobs|
7. Contact|
8. Termes|
9. Aide|
10. Sitemap|

Citation du jour

Nos autres articles

Paneb au pays des couleurs {{—}} Partie 3

La roue chromatique

Comme vous savez le faire maintenant avec le plus pur PHP, vous pouvez créer des dégradés. Vous savez que créer un dégradé entre deux couleurs, c'est faire varier les pigments progressivement : plus votre progression est lente, plus fin sera le dégradé.

Lors de notre blog précédent, nous avons même généré un triple dégradé de la manière suivante :

Et, pour rappel, voilà le code qui avait servi à créer le triple dégradé :

<?php
    $aRgb1 = array( 'r' => 255,'g' =>   0,'b' => 0 );
    $aRgb2 = array( 'r' => 255,'g' => 255,'b' => 0 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,40 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $n = count( $aRgbs );

    $aRgb1 = array( 'r' => $aRgbs[$n-1]['r'],'g' => $aRgbs[$n-1]['g'],'b' => $aRgbs[$n-1]['b'] );
    $aRgb2 = array( 'r' => 255,'g' => 0,'b' => 255 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,40 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb1 = array( 'r' => 255,'g' => 0,'b' => 255 );
    $aRgb2 = array( 'r' => 255,'g' => 0,'b' =>   0 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,40 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }
?>

Si nous créons suffisamment de nuances de dégradés … on en vient à faire le tour de toutes les couleurs.

On passe effectivement du rouge au vert, du vert au bleu, et du bleu au rouge : la boucle est bouclée. Programmons cela en pur PHP :

Voici le code :

<?php
    $aRgb1 = array( 'r' => 255,'g' =>   0,'b' => 0 );
    $aRgb2 = array( 'r' =>   0,'g' => 255,'b' => 0 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,40 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb1 = array( 'r' =>   0,'g' =>   0,'b' => 255 );
    $aRgbs = COLOR_blend( $aRgb2,$aRgb1,40 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb2 = array( 'r' => 255,'g' =>   0,'b' =>   0 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,40 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }
?>

Cela correspond aux trois couleurs primaires (nous verrons plus tard pourquoi on les appelle comme cela) : le rouge, le vert et le bleu.

Et ce que nous avons fait avec le dégradé … c'est simplement de créer les nuances intermédiaires entre ces trois couleurs de base.

Mais … vous le constatez il y a place pour créer d'autres couleurs : les couleurs complémentaires.

1. Rouge : rgb(255,0,0)
2. Jaune : rgb(255,255,0)
3. Vert : rgb(0,255,0)
4. Cyan : rgb(0,255,255)
5. Bleu : rgb(0,0,255)
6. Magenta : rgb(255,0,255)

1. Entre le rouge et le jaune : c'est la quantité de vert qui augmente
2. Entre le jaune et le vert : c'est la quantité de rouge qui diminue
3. Entre le vert et le cyan : c'est la quantité de bleu qui augmente
4. Entre le cyan et le bleu : c'est la quantité de vert qui diminue
5. Entre le bleu et le magenta : c'est la quantité de rouge qui augmente
6. Entre le magenta et le rouge : c'est la quantité de bleu qui diminue

Formulé autrement :

Le jaune c'est un mélange de rouge et de vert (rgb(255,255,0)), le cyan c'est un mélange de vert et de bleu (rgb(0,255,255)) … et le magenta c'est un mélange de bleu et de rouge (rgb(255,0,255)).

Ou encore ...

1. jaune = rouge + vert = complémentaire du bleu
2. cyan = vert + bleu = complémentaire du rouge
3. magenta = bleu + rouge = complémentaire du vert

Une couleur complémentaire, c'est une couleur qui se trouve parfaitement opposée à une couleur primaire. C'est son point nadir.

Fort de cette connaissance, on peut créer les nuances intermédiaires entre les 3 couleurs primaires et leurs couleurs complémentaires. Attention … cela fait un sextuple dégradé. Allez … voilà cela en PHP :

On passe effectivement du rouge au jaune, du jaune au vert, du vert au cyan, du cyan au bleu, du bleu au magenta, et enfin du magenta au rouge … pour donc revenir à l'origine.

Puisque nous en avons fait une boucle, pourquoi ne pas représenter cela sous la forme d'une roue ?

Avant de vous parler de ces nouveaux modes, voyons le code PHP qui nous a permis de créer toutes les nuances de la roue chromatique  :

<?php
    $aRgb1 = array( 'r' => 255,'g' =>   0,'b' => 0 );
    $aRgb2 = array( 'r' => 255,'g' => 255,'b' => 0 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,20 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb1 = array( 'r' => 0,'g' => 255,'b' => 0 );
    $aRgbs = COLOR_blend( $aRgb2,$aRgb1,20 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb2 = array( 'r' => 0,'g' => 255,'b' => 255 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,20 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb1 = array( 'r' => 0,'g' => 0,'b' => 255 );
    $aRgbs = COLOR_blend( $aRgb2,$aRgb1,20 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb2 = array( 'r' => 255,'g' => 0,'b' => 255 );
    $aRgbs = COLOR_blend( $aRgb1,$aRgb2,20 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }

    $aRgb1 = array( 'r' => 255,'g' => 0,'b' => 0 );
    $aRgbs = COLOR_blend( $aRgb2,$aRgb1,20 );

    foreach( $aRgbs as $aRgb )
    {
        echo "<p style=\"margin:0;height:2px;background:rgb({$aRgb['r']},{$aRgb['g']},{$aRgb['b']});\">& ?lt;/p>\n";
    }
?>

Si on retournait les nuances pour les afficher non plus en dégradé vertical comme nous l'avons fait plus haut mais plutôt comme une progression horizontale on arriverait à la représentation suivante :

Et ceci est très intéressant car cette progression de couleurs suit parfaitement ce que les instruments de physique mesurent dans les ondes électromagnétiques. À vrai dire … il faudrait simplement éviter de reproduire le rouge à la gauche du spectre (car ce n'était qu'un effet visuel particulier utile à la roue chromatique) pour que nous retrouvions, alignées par longueur d'onde, les ondes électromagnétiques.

Ondes électromagnétiques

Si vous nous le permettez, nous allons faire une petite transition par les notions de physique pour que vous compreniez pourquoi la roue chromatique est ainsi composée.

En réalité la couleur est affaire de lumière et de matière. Quand la lumière frappe un objet elle est réfléchie depuis cet objet vers notre oeil. Mais l'objet lui-même n'est pas neutre dans la réflexion de la lumière : l'objet absorbe certaines longueurs d'onde et renvoit les autres. Un objet qui nous apparait noir est en réalité un objet qui a "mangé" toutes les ondes visibles.

La lumière est une onde électromagnétique. Certaines de ces ondes vous sont connues ou, à tout le moins, vous en avez entendu parler : les rayons X, l'ultraviolet, l'infrarouge, etc.

Comme vous pouvez le constater rien que par les noms qu'on leur donne, certaines ondes électromagnétiques sont proches de la question de couleur  : ultraviolet et infrarouge par exemple. C'est qu'en fait, ce sont deux ondes électromagnétiques qui bordent ce que nous appelons le spectre visible de la lumière (vous verrez cela plus loin)  : ce sont les frontières de ce que nous voyons !

Une onde électromagnétique est mesurée en Angstroms : c'est la longueur d'onde. Nous, humains, nous ne distinguons qu'une partie des ondes électromagnétiques, celles entre 4000 et 7000 Angstroms. Ce sont les couleurs, la forme visible du spectre des ondes.

Les ondes proches de 4000 Angstroms sont dans les violets; celles proches de 7000 sont rouges.

4000 Angstroms		7000 Angstroms

Nous avons donc d'un côté du spectre le violet, et de l'autre le rouge. Entre ces deux extrémités on passe par des couleurs intermédiaires : bleu, vert, jaune, orange.

Encore à gauche du violet on trouve l'ultraviolet (au-dessus du violet); à droite du rouge on trouve l'infrarouge (en-dessous du rouge).

Nous imaginons volontiers que la ressemblance avec les dégradés de couleurs n'est pas passée inaperçue. Et puisque les dégradés ont également été mis sur la roue chromatique, vous voyez donc l'équivalence parfaite entre ces trois notions.

L'oeil humain

L'oeil humain possède, sur la rétine, des photorécepteurs. On les appelle les cônes. Nous en possédons de trois types et chaque type est sensible à certaines couleurs : les rouges, les verts et les bleus. Si si ! D'ailleurs, être daltonien, ce n'est guère plus que souffrir d'une petite anomalie des cônes.

Puisque notre oeil {{—}} c'est quand même lui qui nous fait voir … associés aux neurones visuels {{—}} est sensible à ces trois couleurs, on a pris l'habitude de réfléchir en ces trois couleurs de base : rouge, vert, bleu … red, green, blue en anglais, ou encore rgb en abrégé ! On les appelle les couleurs primaires.

Les couleurs qui sont exactement en regard les unes des autres (c'est-à-dire de l'autre côté de la roue) sont dites couleurs complémentaires. C'est une part importante de la théorie des couleurs si chère aux artistes (peintres, graphistes, photographes, décorateurs, ...). Sur la roue ce sont les couleurs qui s'opposent l'une à l'autre, cad à exactement 180° l'une de l'autre.

D'autres formules existent pour trouver des couleurs complémentaires (disons plutôt harmonieuses) : on peut ainsi, sur la roue chromatique, essayer de trouver des points de correspondance en triangle, en carré, en rectangle, en pentagone, etc. Nous en parlerons plus tard mais voici déjà à quoi cela ressemble  :

 … en triangle  :

 … en pentagone :

Dans un autre voyage de Paneb au pays des couleurs … nous vous inviterons à faire le tour de notre mappemonde  : La Roue Chromatique … notre petit astrolabe ! Il faudra bien en arriver aux notions de saturation et de luminosité.