Articles web

Nos articles concernant les techniques web sont centrés sur des solutions pratiques qui mettent en œuvre, le plus souvent, notre framework web : Vae Soli!

Des articles généraux sont également fournis dans le respect des standards du web.

Tous nos articles web sont disponibles sous le couvert de la licence Icône Creative Commons Creative Commons — Paternité - pas de modification.

2009-04-29 à 14:13:09

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

Dans un ancien blog {{—}} qu'il serait utile de remettre en chantier {{—}} nous décrivions comment, sur base d'une couleur de départ et en tenant compte d'un nombre donné d'étapes , on générait des mosaïques de couleurs en en faisant varier luminosité et saturation.

C'est un petit ensemble de fonctions disponibles dans Vae Soli! qui permet ces petites fééries, des fonctions bien pratiques lorsqu'il s'agit de créer des variations chromatiques notamment pour agrémenter des pages web par des couleurs parfaitement complémentaires (du moins suivant la théorie des couleurs).

Commençons par le commencement

Permettez-nous de jeter les bases de la notion de couleur en (X)HTML. Allons-y pas à pas et voyons comment nous pouvons colorer textes et pages.

Un texte simple sans couleur prédéterminée : 

<html>
   <head>
      <title>Dompter les couleurs</title>
   </head>
   <body>
      <p>
         Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit. Fusce mauris neque, congue 
         vel, rutrum in, consectetuer at, metus. 
         Vestibulum luctus dapibus odio. Nullam justo. 
         Proin sit amet tortor. Nam ac sem. Maecenas id 
         mauris sit amet velit euismod fringilla. 
         Quisque metus metus, aliquet at, lacinia id, 
         condimentum eleifend, dolor. Curabitur mollis. 
         Cras ut sem. Fusce ac quam ac sem volutpat 
         pellentesque.
      </p>

      <p>
         Vivamus lobortis sollicitudin odio. Vestibulum 
         ante ipsum primis in faucibus orci luctus et 
         ultrices posuere cubilia Curae; Sed 
         sollicitudin. Suspendisse potenti. Etiam 
         tristique egestas augue. Quisque ullamcorper 
         leo a odio. Etiam lorem. Cum sociis natoque 
         penatibus et magnis dis parturient montes, 
         nascetur ridiculus mus. Vestibulum ante ipsum 
         primis in faucibus orci luctus et ultrices 
         posuere cubilia Curae.
      </p>
   </body>
</html>

Il vous suffit de sauver tout ce joyeux petit texte dans un fichier index.html pour que vous puissiez vous rendre compte de la monotonie dont elle est empreinte !

Voyons maintenant le même texte mais présenté en blanc sur fond noir … 

<html>
   <head>
      <title>Dompter les couleurs</title>
   </head>
   <body style="background-color:black;color:white;">
      <p>
         Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit. Fusce mauris neque, congue 
         vel, rutrum in, consectetuer at, metus. 
         Vestibulum luctus dapibus odio. Nullam justo. 
         Proin sit amet tortor. Nam ac sem. Maecenas id 
         mauris sit amet velit euismod fringilla. 
         Quisque metus metus, aliquet at, lacinia id, 
         condimentum eleifend, dolor. Curabitur mollis. 
         Cras ut sem. Fusce ac quam ac sem volutpat 
         pellentesque.
      </p>

      <p>
         Vivamus lobortis sollicitudin odio. Vestibulum 
         ante ipsum primis in faucibus orci luctus et 
         ultrices posuere cubilia Curae; Sed 
         sollicitudin. Suspendisse potenti. Etiam 
         tristique egestas augue. Quisque ullamcorper 
         leo a odio. Etiam lorem. Cum sociis natoque 
         penatibus et magnis dis parturient montes, 
         nascetur ridiculus mus. Vestibulum ante ipsum 
         primis in faucibus orci luctus et ultrices 
         posuere cubilia Curae.
      </p>
   </body>
</html>

Nous sommes de retour à l'époque des tableaux noirs : le fond du texte est cette fois-ci noir, et le texte est comme écrit à la craie blanche. Une fois de plus, sauvez ce bout de code (X)HTML dans un fichier index.html et regardez ce que donne le résultat.

Déjà cet exemple est très intéressant à plusieurs titres. Tout d'abord remarquez que nous avons défini les couleurs à utiliser sur l'ensemble de la page (au niveau de la balise <body>...</body>) … et que, de facto, cette définition s'est propagée à l'ensemble des paragraphes contenus dans la balise <body>. C'est une propriété intéressante de {{{CSS}}} : sa capacité à définir des styles à un niveau supérieur et de faire en sorte que les éléments inférieurs (ici, les paragraphes) en héritent automatiquement.

Si vous souhaitez qu'un des paragraphes soit affiché dans une autre couleur, il suffira de définir le style du paragraphe en question. Voyez à ce titre comment nous faisons en sorte que le deuxième paragraphe soit affiché en rouge : 

<html>
   <head>
      <title>Dompter les couleurs</title>
   </head>
   <body style="background-color:black;color:white;">
      <p>
         Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit. Fusce mauris neque, congue 
         vel, rutrum in, consectetuer at, metus. 
         Vestibulum luctus dapibus odio. Nullam justo. 
         Proin sit amet tortor. Nam ac sem. Maecenas id 
         mauris sit amet velit euismod fringilla. 
         Quisque metus metus, aliquet at, lacinia id, 
         condimentum eleifend, dolor. Curabitur mollis. 
         Cras ut sem. Fusce ac quam ac sem volutpat 
         pellentesque.
      </p>

      <p style="color:red;">
         Vivamus lobortis sollicitudin odio. Vestibulum 
         ante ipsum primis in faucibus orci luctus et 
         ultrices posuere cubilia Curae; Sed 
         sollicitudin. Suspendisse potenti. Etiam 
         tristique egestas augue. Quisque ullamcorper 
         leo a odio. Etiam lorem. Cum sociis natoque 
         penatibus et magnis dis parturient montes, 
         nascetur ridiculus mus. Vestibulum ante ipsum 
         primis in faucibus orci luctus et ultrices 
         posuere cubilia Curae.
      </p>
   </body>
</html>

Voyez-vous l'idée ? ce n'est guère plus difficile. MAIS … dans les exemples précédents, nous nous sommes contentés d'utliser des couleurs simples : du blanc, du noir, du rouge. Toute une série de couleurs prédéfinies portent ainsi un nom en (X)HTML : du blanc s'appelle du blanc, pardon white, du noir s'appelle black, etc. Voici les couleurs les plus courantes :

  • aqua
  • beige
  • bisque
  • black
  • blue
  • brown
  • chocolate
  • coral
  • crimson
  • cyan
  • darkblue
  • darkgrey
  • darkgreen
  • darksalmon
  • deeppink
  • fuchsia
  • gold
  • gray
  • green
  • greenyellow
  • hotpink
  • indigo
  • lavender
  • lime
  • magenta
  • navy
  • pink
  • plum
  • purple
  • red
  • salmon
  • silver
  • tan
  • teal
  • violet
  • white
  • yellow
 

Il en existe plus que cela, mais voilà déjà de quoi nous permettre de jouer.

Plus et davantage de couleurs

En fait les noms de couleurs sont une façon bien simple de mentionner les couleurs dont vous avez besoin. Cela marche bien, c'est assez intuitif (nous parions que vous savez exactement à quelle couleur vous attendre lorsqu'on parle de couleur black) … mais c'est quand même limité. On ne va pas s'amuser à inventer des noms pour toutes les nuances de rouge quand même !

Et bien non, effectivement … on ne pas pas s'amuser à de telles folies. Une couleur peut être parfaitement spécifiée en mentionnant ces trois pigmentations de base : la quantité de rouge, la quantité de vert, et la quantité de bleu. On parle de notation rgb: red, green, blue.

On peut définir la quantité de chaque pigment : de 0 à 255, du minimum au maximum. Quand on spécifie la couleur rouge (red) … en fait on dit que la quantité de pigment rouge doit être maximale (255, ou 100 %) et que les autres pigmentations sont au minimum : 0 ou 0 %.

Nous avons donc vu 2 notations pour les couleurs. Dans l'exemple qui suit : les deux paragraphes sont affichés en rouge mais la notation utilisée diffère … c'est que dans le cas du premier paragraphe nous avons utilisé le nom de la couleur (red), et dans le cas du deuxième paragraphe, nous avons favorisé l'approche de la pigmentation … mais les deux formes sont parfaitement équivalentes : 

<html>
   <head>
      <title>Dompter les couleurs</title>
   </head>
   <body>
      <p style="color:red;">
         Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit. Fusce mauris neque, congue 
         vel, rutrum in, consectetuer at, metus. 
         Vestibulum luctus dapibus odio. Nullam justo. 
         Proin sit amet tortor. Nam ac sem. Maecenas id 
         mauris sit amet velit euismod fringilla. 
         Quisque metus metus, aliquet at, lacinia id, 
         condimentum eleifend, dolor. Curabitur mollis. 
         Cras ut sem. Fusce ac quam ac sem volutpat 
         pellentesque.
      </p>

      <p style="color:rgb(255,0,0);">
         Vivamus lobortis sollicitudin odio. Vestibulum 
         ante ipsum primis in faucibus orci luctus et 
         ultrices posuere cubilia Curae; Sed 
         sollicitudin. Suspendisse potenti. Etiam 
         tristique egestas augue. Quisque ullamcorper 
         leo a odio. Etiam lorem. Cum sociis natoque 
         penatibus et magnis dis parturient montes, 
         nascetur ridiculus mus. Vestibulum ante ipsum 
         primis in faucibus orci luctus et ultrices 
         posuere cubilia Curae.
      </p>
   </body>
</html>

C'est la même chose !

L'approche de la notation par pigmentation est très souvent utilisée en {{{CSS}}}, ou même en pur HTML mais les informaticiens sont d'incurables fainéants (nous pouvons nous permettre de telles allégations … nous faisons partie de cette triste caste !) et écrire rgb(255,0,0) cela leur paraît trop {{—}} comment dire ? {{—}} verbeux : alors ils utilisent une autre notation encore qui s'est répandue très rapidement, à tel point de devenir devenir la notation la plus pratiquée de nos jours : la notation hexadecimale.

Mais bon Dieu … ke's ki on inventé encor' ?

Dégageons le terrain : cette notation n'est donc qu'une notation destinée à donner les poids de pigmentation : le rouge, le vert, et le bleu. Ca va ? C'est donc un substitut de la notation rgb(...).

Alors le système hexadecimal c'est quoi ? Commençons par notre système décimal ! Comme vous le savez, le système décimal c'est le système où les chiffres vont jusque 10. On parle de système en base 10 qui va donc du 0 au 9 : 0, 1, 2, 3, 4, 5, 6, 7, 8, et 9. On dispose de 10 signes pour marquer les chiffres.

Dans le système binaire, on ne dispose que de deux chiffres : 0 et 1.

Le système hexadécimal, lui, fonctionne sur une base 16 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F. Comptez : il y a bien 16 symboles. Dans ce système, A vaut 10, B vaut 11, C 12 et ainsi de suite jusqu'à F qui vaut 15.

Bon jusque là c'est simple (quoique ?!?) mais là où cela se complique c'est quand on se trouve en face d'un nombre comme "AC" … combien ça fait ? Et bien, attachez-vous, cela fait 172 en décimal. Comment cela ?

Bon … revenons à notre système décimal. Ça va vous paraître suréaliste, mais enfin ! Combien vaut 115 ? (je vous avais prévenu !)

Et bien cela fait 1 x 102 + 1 x 101 + 5 x 100. Pour savoir comment on arrive à cette formule, il vous faut commencer par la droite … et vous dire que le chiffre le plus à droite est en position 0. Chaque chiffre doit être multiplié par la base (ici 10) qui est exposée à la position du chiffre.

Photo : Le nombre 115 : le chiffre 5 est en position 0; le 1er chiffre 1 est en position 1 et le 2eme chiffre 1 est en position 2

Le nombre 115 : le chiffre 5 est en position 0; le 1er chiffre 1 est en position 1 et le 2eme chiffre 1 est en position 2 … comme vous le montre la petite illustration ci-dessus.

Pour peu que vous vous souveniez que a0 = 1, vous êtes sauvé (oui  … cela faudra peut-être qu'un jour je vous l'explique comme nous l'a expliqué Thierry Mouthuy, aujourd'hui au Centre de Physique des Particules de Marseille, CNRS ! Bonjour Thierry). Comptez par vous même : 10 au carré = 100 (1 x 102), ajoutez 10 (1 x 101) et puis 5 … (5 x 100) vous avez bien 115.

Oui … je sais que c'est un peu tordu … mais le détour est intéressant pour le fameux AC en hexadécimal car le raisonnement est en tous points identique … on y va ?

A = 10 (nous sommes d'accord là-dessus) et C = 12, alors le total de "AC" vaut 10 x 161 + 12 x 160 : 16 exposant 1 vaut 16, multiplié par 10 (la valeur de A) + 16 exposant 0 (cad 1) x 12 : cela donne donc 160 + 12, soit 172.

Photo : Le nombre hexadécimal AC : le chiffre C (donc 12) est en position 0; le 1er chiffre A (donc 10) est en position 1

Vous n'avez pas saisi ? C'est pas grave, faites tout simplement confiance à votre calculatrice Windows :

172 en mode décimal dans la calculatrice de Windows

 … et maintenant, demandez à Windows de convertir 172 en valeur hexadécimale :

172 en mode hexadécimal dans la calculatrice de Windows

Cela va mieux ? La calculette en mode scientifique fait des miracles n'est-ce pas ?

Pour pouvoir interpréter correctement cette notation, la notation hexadécimale doit être précédée du caractère #, dès lors ne vous étonnez pas de voir des couleurs exprimées comme tel : #FF00AA ou #ff00aa (majuscules ou minuscules sont identiques), #cc0099, etc.

Afin de vous éviter de perpétuels et indéracinables cauchemars (ce dont nous nous sentirions éternellement coupables) voilà une petite table bien pratique  : elle n'est pas exhaustive (car si vous y réfléchissez un peu, on a 256 nuances de rouge, qui peuvent être mêlées à 256 nuances de vert et encore 256 nuances de bleu, ce qui ne fait pas moins de 256 x 256 x 256, soit 16777216 couleurs différentes … rendre un tel tableau serait vraiment impossible).

Table des couleurs multi plate-formes
Couleur Couleur Couleur Couleur Couleur Couleur
000000 000033 000066 000099 0000cc 0000ff
003300 003333 003366 003399 0033cc 0033ff
006600 006633 006666 006699 0066cc 0066ff
009900 009933 009966 009999 0099cc 0099ff
00cc00 00cc33 00cc66 00cc99 00cccc 00ccff
00ff00 00ff33 00ff66 00ff99 00ffcc 00ffff
330000 330033 330066 330099 3300cc 3300ff
333300 333333 333366 333399 3333cc 3333ff
336600 336633 336666 336699 3366cc 3366ff
339900 339933 339966 339999 3399cc 3399ff
33cc00 33cc33 33cc66 33cc99 33cccc 33ccff
33ff00 33ff33 33ff66 33ff99 33ffcc 33ffff
660000 660033 660066 660099 6600cc 6600ff
663300 663333 663366 663399 6633cc 6633ff
666600 666633 666666 666699 6666cc 6666ff
669900 669933 669966 669999 6699cc 6699ff
66cc00 66cc33 66cc66 66cc99 66cccc 66ccff
66ff00 66ff33 66ff66 66ff99 66ffcc 66ffff
990000 990033 990066 990099 9900cc 9900ff
993300 993333 993366 993399 9933cc 9933ff
996600 996633 996666 996699 9966cc 9966ff
999900 999933 999966 999999 9999cc 9999ff
99cc00 99cc33 99cc66 99cc99 99cccc 99ccff
99ff00 99ff33 99ff66 99ff99 99ffcc 99ffff
cc0000 cc0033 cc0066 cc0099 cc00cc cc00ff
cc3300 cc3333 cc3366 cc3399 cc33cc cc33ff
cc6600 cc6633 cc6666 cc6699 cc66cc cc66ff
cc9900 cc9933 cc9966 cc9999 cc99cc cc99ff
cccc00 cccc33 cccc66 cccc99 cccccc ccccff
ccff00 ccff33 ccff66 ccff99 ccffcc ccffff
ff0000 ff0033 ff0066 ff0099 ff00cc ff00ff
ff3300 ff3333 ff3366 ff3399 ff33cc ff33ff
ff6600 ff6633 ff6666 ff6699 ff66cc ff66ff
ff9900 ff9933 ff9966 ff9999 ff99cc ff99ff
ffcc00 ffcc33 ffcc66 ffcc99 ffcccc ffccff
ffff00 ffff33 ffff66 ffff99 ffffcc ffffff

Avouez que nous vous gâtons ! Eh eh. Alors … revenons à nos moutons ! Ben oui, nos moutons et nos quelques fonctions destinées à gérer les couleurs.

Comme nous souhaitions commencer par quelque chose de simple, nous voulions tout simplement permettre de transformer des notations rgb en notations hexadécimales et inversement. Et donc … il faut là en venir au sujet principal  : la fonction COLOR_rgb2hex() de Vae Soli!.

COLOR_rgb2hex()

Commençons par le plus simple ! Nous avons une couleur RGB (Red, Green, Blue) et nous voulons la transformer en valeur hexadécimale. D'abord, sachez que la couleur en question est stockée dans un tableau à trois cellules. La première cellule s'appelle 'r', la deuxième 'g', et la dernière est appelée 'b'.

Mais comme nous souhaitons créer une fonction caméléon, nous allons accepter deux façons de l'invoquer : avec chaque pigment passé comme un paramètre séparé … 

COLOR_rgb2hex( 100,175,250 );   -> #64affa

ou … avec un tableau : 

$aRgb = array( 'r' => 100,
               'g' => 175,
               'b' => 250 );

COLOR_rgb2hex( $aRgb );         -> #64affa

Et de vérifier par vous-même que 100 en décimal donne bien 64 en hexadécimal, 175 vaut bien af et 250 est bien l'équivalent de fa. rgb(100,175,250) est donc bel et bien strictement équivalent à #64affa. Si si !

Voilà la fonction PHP qui s'occupe de la chose : 

function COLOR_rgb2hex( $r,$g = null,$b = null )
/*--------------------------------------------*/
{
    if ( is_array( $r ) && isset( $r['r'] ) )
    {
        $g = $r['g'];
        $b = $r['b'];
        $r = $r['r'];
    }

    return ( '#' . sprintf( '%02x',$r ) . 
                   sprintf( '%02x',$g ) . 
                   sprintf( '%02x',$b ) );
}

Et maintenant … l'inverse : on part de la notation hexadécimale et on en vient à la notation décimale, mode rgb !

COLOR_hex2rgb()

On passe une couleur hexadécimale à la fonction, et on attend un tableau de trois cellules : 

function COLOR_hex2rgb( $h )
/*------------------------*/
{
    return ( array( 'r' => hexdec( substr( $h, 1, 2 ) ),
                    'g' => hexdec( substr( $h, 3, 2 ) ),
                    'b' => hexdec( substr( $h, 5, 2 ) ) 
                  ) );
}

Voyons ce que cela donne : 

COLOR_hex2rgb( '#64affa' );     ->   rgb(100,175,250)

Oui … c'est exactement ce que nous en attendions. C'est la fonction inverse de COLOR_rgb2hex().

Voilà … nous n'irons pas plus loin pour cette fois-ci … mais bientôt nous allons effectivement jouer plus avant avec la saturation et la luminosité via les notions de hue, saturation et luminosity … le mode hsl. À bientôt.