INFORMATIQUE : CRÉER UN SITE WEB

Bleue comme une orange

Le choix des couleurs constitue une étape importante pour réussir la charte graphique d'un site Web.

En tant que composantes des éléments graphiques (avec le logo, l'en-tête, les polices utilisées, etc.), les couleurs contribuent en effet à définir le ton ainsi que l'identité visuelle d'un site. Elles seront donc choisies en fonction du public visé ainsi que de l'intention du site, tout en gardant à l'esprit que dans le choix et l'agencement des couleurs, lisibilité, simplicité et cohérence devraient prévaloir.

Déclaration des couleurs en HTML/CSS

Les couleurs sur les pages Web sont obtenues en mélangeant 256 nuances de rouge, de vert et de bleu en proportions variables.

Si certaines couleurs peuvent être directement désignées par leur nom en anglais, le format de codage RVB (Rouge, Vert, Bleu ou RGB pour Red, Green, Blue, en anglais) est plus largement utilisé en HTML. C'est d'ailleurs le modèle qui se rapproche le plus du fonctionnement d'un écran.

Modèle RVB

La couleur est obtenue à partir de la combinaison des trois couleurs de base (rouge, vert, bleu), chacune de ces couleurs ayant une luminosité plus ou moins forte déterminée par la valeur d'un octet pouvant aller de 0000 0000 à 1111 1111. Pour coder la couleur d'un pixel, il faut donc utiliser trois octets qui définissent respectivement le niveau de rouge, de vert et de bleu, donc vingt-quatre chiffres binaires au total. Pour simplifier, on emploiera plutôt un nombre hexadécimal à six chiffres, les deux premiers correspondant à la valeur du rouge, les deux suivants à celle du vert et les deux derniers à celle du bleu.

Système hexadécimal

Le système hexadécimal est un système de numération positionnel en base 16 (il compte donc seize symboles plutôt que dix dans le système décimal) utilisant les chiffres arabes pour les dix premiers symboles (0 à 9) et, comme il n'existe pas de chiffres (à ne pas confondre avec les nombres) pour représenter 10, 11, 12, 13, 14 et 15, les lettres A à F pour les six derniers. Donc, en hexadécimal, 10 est représenté par A et 15 par F. Au-delà de 15, on ajoutera un second symbole : ainsi, 10 en hexadécimal équivaut à 16 en base décimale, 11 à 17 et 1A à 26.

Code RVB en notation hexadécimale

Avec ce système, tous les nombres de 0 à 255 peuvent être représentés par deux symboles (chiffres ou lettres), la plus haute valeur étant 255 (FF en hexadécimal) et la plus basse 0 (00 en hexadécimal). Donc, #FFFFFF pour le blanc et #000000 pour le noir. Le dièse (#) qui précède les symboles indique l'utilisation d'un nombre hexadécimal plutôt que d'un nombre décimal. Quand les deux symboles de chacune des valeurs des composantes de rouge, de vert et de bleu sont identiques, il est possible d'utiliser la notation hexadécimale abrégée, soit uniquement le premier symbole de chacune des valeurs. Ainsi, #3e7 devient un raccourci pour #33ee77.

Code RVB en notation décimale

Le code RVB peut aussi être exprimé en notation décimale. La valeur des composantes de rouge, de vert et de bleu d'une couleur sera définie en indiquant sa proportion relative en notation entière absolue comprise entre 0 et 255, ou en pourcentage, la première valeur étant celle de la composante rouge, la seconde celle de la composante verte et la troisième, celle de la composante bleue de la couleur. Par exemple, 255 correspondant à 100% et à FF dans la notation hexadécimale (soit la valeur maximale de la composante) : rgb(255,255,255) = rgb(100%,100%,100%) = #FFF ou #FFFFFF (blanc). Et 0 correspondant à 0% et à 00 dans la notation hexadécimale (absence de la composante) : rgb(0,0,0) = rgb(0%,0%,0%) = #000 ou #000000 (noir).

Plus de 16 millions de couleurs

La combinaison des valeurs de rouge, de vert et de bleu de 0 à 255 donne plus de 16 millions de couleurs différentes (256 x 256 x 256); la plupart des ordinateurs récents sont capables d'afficher ces couleurs. La notation hexadécimale abrégée permet, quant à elle, d'obtenir 4096 couleurs différentes.

Les ressources à consulter

Pourpre.com
Ce site propose des articles consacrés à la couleur : le phénomène physique, la perception de la couleur, la couleur dans la langue française, des questions-réponses, un glossaire, une présentation des modèles de couleurs, quelques jeux... Vous y trouverez aussi : CHROMA, un dictionnaire de noms de couleurs, accompagné d'un dictionnaire imaginaire alimenté par les internautes; le chromograf, un ensemble d'outils en ligne pour manipuler la couleur et créer des dégradés; Chromafiltre, un outil en Flash pour aider à l'accord des couleurs; la Boîte à couleurs, un logiciel gratuit pour récupérer une couleur sur l'écran et la modifier ou la convertir facilement.

Color Schemer
Palette interactive qui affiche toute une gamme de couleurs complémentaires pour une couleur donnée. Format RGB et format hexadécimal affichés. Possibilité de choisir une nuance plus claire ou plus foncée.

Colour Selector ~ Library & tools ~ Limitless Innovations
Gamme d'outils permettant de sélectionner, mélanger, prévisualiser, agencer des couleurs.

ColorMatch Remix
Sélecteur de couleurs qui permet de créer de nouveaux thèmes pour une interface donnée. En fonction d'une couleur choisie, l'application montre et conseille des couleurs à y associer. Possibilité de charger des thèmes de couleurs prédéfinis, d'en créer de nouveaux, d'exporter les couleurs vers Photoshop ou Illustrator...

Color schemes generator 2
Sélecteur de couleurs interactif qui permet de tester et choisir des gammes de couleurs pour sites Web. Prend en compte le daltonisme dans le choix des couleurs.

Color Cop (logiciel à télécharger)
Color Cop est un sélecteur de couleurs polyvalent pour les concepteurs Web et les programmeurs. Il identifie et affiche les couleurs dans différents formats de code hexadécimal. Il suffit de faire glisser la pipette à n'importe quel endroit sur l'écran, puis de relâcher : le code hexadécimal de la couleur sélectionnée sera automatiquement copié dans le presse-papiers.

Un outil dont je ne saurais me passer. Je l'utilise non seulement pour choisir et visionner les couleurs, mais aussi pour examiner les détails d'une image, vérifier les ajustements sur la page, corriger avec précision un défaut qui passerait autrement inaperçu s'il n'était scruté à la loupe.

Aussi disponible en français, en version portable : colorcop_fr.zip