Le blog d'Olivier FAURAX

Est-ce que vous vous souvenez du web dans les années 90 ? Celui avec les GIFs animés pour la publicité, les couleurs criardes de la palette de Paint utilisées par les rares informaticiens qui savaient faire un site web ?

He bien, bienvenue en 2007 : on a toujours de la pub qui bouge (mais maintenant, il faut le plugin flash) et les informaticiens sont toujours aussi fort pour choisir leurs couleurs. Heureusement, Firefox 3 va les aider.

Qu'est-ce qu'une couleur, pour un ordinateur ?

C'est 3 nombres, compris entre 0 et 255. Ils représentent les valeurs de rouge, de vert et de bleu.

Si vous regardez une télé de très près (prenez une télé avec un tube cathodique), vous verrez 3 petits points rouge, vert et bleu, pour chaque pixel. Cela vient du fait qu'en mélangeant ces sources de lumière colorée, on obtient les autres couleurs (ex: avec de la lumière rouge et verte, on fait de la jaune). Attention ! C'est différent des mélanges faits avec de la peinture : on utilise de la lumière !

On utilise une valeur de 0 à 255 tout simplement parce que c'est ce qu'on peut mettre dans un octet (8 bits), unité chère aux informaticiens. C'est pour cela que ces couleurs sont dites 24bits (3*8 bits).

La notation est souvent : rgb(X, Y, Z), avec X,Y,Z entre 0 et 255 (rgb : Red Green Blue)
Note : il y a aussi une notation en hexadécimal (#xxyyzz) mais ça sort du sujet.

• rgb(0,0,255) : bleu pur
• rgb(255,255,0) : jaune
• rgb(255,255,100) : jaune plus clair
• rgb(255,255,255) : blanc
• rgb(0,0,0) : noir

Un bon informaticien est paresseux...

...parce s'il est vraiment bon, c'est l'ordinateur qui fait son boulot ;)

Comme les premiers sites web étaient fait par des informaticiens qui faisaient tout à la main, il devaient choisir leur couleur en donnant les 3 valeurs RGB.

• Je veux du bleu ! rgb(0,0,255)
• Je veux du bleu clair ! rgb(150,150,255)
• Je veux du vert ! rgb(0,255,0)
• Je veux du jaune ! rgb(255,255,0)

Pourquoi ces valeurs ? Tout simplement parce qu'elles donnent des chiffres ronds en RGB. Je me confesse, je fais ça également : la couleur de la colonne (à la date d'écriture de ce billet) est rgb(200,200,255).

Le problème, c'est que ces valeurs ne donnent par un résultat esthétique. Vous en doutez ? Testez le vert rgb(0,255,0) ! Sur ce blog, ça se voit pas trop, parce que je n'ai utilisé que des teintes de bleu.

Changeons de référentiel !

Il existe un autre triplet de couleur possible : HSL. Les couleurs HSL sont les mêmes que les couleurs RGB, mais les 3 valeurs sont différentes. En HSL, les valeurs sont la teinte (H), la saturation (S) et la lumière (L).

• H est compris entre 0 et 360 : c'est un angle sur le cercle des couleurs (0 : rouge, 120 : vert, 240 : bleu, avec bien sûr les intermédiaires)
• S est un pourcentage, qui représente la pureté de la couleur (0 : gris, 100 : couleur pleine)
• L est aussi un pourcentage, qui représente la luminosité de la couleur (0 : noir, 50 : couleur , 100 : blanc)

Ce qui veut dire qu'on peut avoir des couleurs jolies et cohérentes avec des valeurs rondes ! rgb(0,0,255) devient hsl(240,100,50) : si je veux une couleur plus claire, ça devient hsl(240,100,75), tout simplement !

Testez !

Voici un dégradé de bleu HSL/RGB

Firefox 3 : encore plus !

Firefox supporte déjà les couleurs RGB et les couleurs HSL.

Mais il fait encore plus : la transparence ! Ainsi on passe aux espaces de couleurs RGBA et HSLA : le A veut dire Alpha, c'est-à-dire le niveau de transparence (0 = transparent, 1 = opaque). Par exemple, je peux mettre du texte rouge mi-transparent sur un fond bleu et Firefox mixe lui-même les couleurs. Le test est visible seulement avec Firefox 3 :

Bien sûr ça marche aussi avec les images : on peut empiler des images semi-transparentes (PNG) avec des couleurs semi-transparentes. Les possiblités de design sont vraiment intéressantes.

J'ai utilisé du RGBA, mais c'est exactement pareil avec du HSLA. D'ailleurs, quand j'ai testé avec Firefox 3 (alpha6, faîtes attention !), je me suis rendu compte que Firefox convertit le HSL en RGB et le HSLA en RGBA pour son usage interne. Je suppose que c'est dû au fait que tout ce qui gère l'affichage (bibliothèque de composants graphiques, moteur de rendu, etc.) doit utiliser des valeurs RGB, ce qui est logique puisque c'est ce qu'on utilise physiquement (intensité des trois composantes de lumière).

Désolé, mais ça va pas être possible...

Cher lecteur, je suis vraiment désolé, mais il y a un problème.

Sur le web, il y a un boulet, un empêcheur de tourner en rond, un casse-couille, c'est Internet Explorer (IE).
Et bien sûr, lui, il ne supporte que les couleurs RGB. Adieu, le HSL, le RGBA et le HSLA. Depuis la version 7, il supporte les images semi-transparentes (PNG) correctement, c'est déjà ça...

Comme il est encore majoritaire, il n'est pas possible d'ignorer IE en utilisant du RGBA ou du HSL.
C'est pour ça que je vous encourage à installer et faire installer Firefox autour de vous. Quand Firefox aura suffisamment de parts de marché, IE sera obligé de s'aligner et de supporter la même chose (ils l'ont déjà fait pour les onglets, le PNG et le RSS).

Une solution en attendant

CSS : Cascaded Style Sheets

Dans la recommandation, il est clairement dit que si une directive CSS n'est pas supporté, alors elle doit être ignorée. Donc si on mets du RGBA et qu'on surfe avec IE (beurk), c'est comme si la ligne n'était pas là.

Il est aussi écrit que si on mets 2 fois une même directive, c'est la 2ème qui est prise en compte. Donc si on mets une couleur RGB suivi d'une couleur RGBA et qu'on surfe avec Firefox 3, on verra la couleur RGBA.

Voilà notre solution :

#truc {
rgb(255,0,0);
rgba(255,0,0,0.5);
}

IE va comprendre la 1ère ligne, Firefox 3 la 1ère et la 2ème, en ne prenant en compte que la 2ème. Donc IE va afficher du bleu plein et Firefox 3 du bleu semi-transparent. Et on finit par un test :

Plus d'infos sur CSS3 : http://www.css3.info/