Bien choisir ses couleurs sur le Web

Étiquettes : couleurs, lisibilité, webdesign

Rouge carmin et bleu ciel, jaune poussin et vert pistache, autant de couleurs différentes. Sont-elles toutes adaptées au web ? Mise au point.

Un projet web ne s’articule pas juste autour de l’architecture de contenu. Tout est lié. Interface graphique, ergonomie, choix sémiologique et évidemment : couleurs.

Retour aux bases : des couleurs « additives »

Votre site internet est avant tout un dispositif visible au travers d’un conducteur : l’écran. Celui-ci, aussi avancé soit-il, ne pourra jamais dépeindre les couleurs « de la vie réelle », vues par l’œil dans la nature. Un écran est fait de pixels de couleur, qui sont eux-mêmes faits de couches successives d’informations (les bits). Donc, même si la technique permet toujours plus, vous n’obtiendrez jamais les nuances de Manet ou de Renoir.

Unités d’informations donc, les couleurs peuvent numériquement se quantifier. L’écran utilise le système additif : un mélange de rouge, vert et bleu donne donc du blanc (au contraire du système soustractif qui, comme la gouache ou le marqueur, une fois les couleurs mélangées, donne du noir). Ce rouge, vert et bleu – RVB ou RGB pour les anglophones – est déclinable en 256 nuances différentes (allant de 0 à 255). Toujours notifiées dans l’ordre « rouge vert bleu », vous obtiendrez donc :

• 255, 0, 0 : du rouge
• 0, 255, 0 : du vert
• 0, 0, 255 : du bleu
• 0, 0, 0 : du noir
• 255, 255, 255 : du blanc

Sur Wikipedia, vous obtiendrez une liste de ces couleurs.

Les couleurs sur le web : #ffffff

Parmi ces couleurs sur l’écran, il faut encore faire un tri : soit vous faites un dessin animé, soit vous travaillez pour le web. Et travailler sur Internet est synonyme d’économies permanentes : taille d’image, bon hébergeur … Tout doit être réfléchi pour alléger votre site. Nous ne sommes plus au temps d’AOL : un site doit apparaître « instantanément » lors de la requête. Des secondes à attendre, et votre visiteur n’est plus.

Au niveau des couleurs,vous obtiendrez aussi des économies et de l’universel : c’est ce qu’on appelle les couleurs web safe. Trouvable sur cette liste de l’excellent site colorhexa.com, ou bien sur Photoshop lorsque vous cliquez sur « Couleur Web uniquement ».

Pour un soucis de code, il est évident que le web n’allait pas garder la désignation « RGB » : moins de couleurs veut dire moins de combinaisons de chiffre possible. Les couleurs web, même si elles peuvent s’écrire « red » ou « blue » dans le code, sont fichées comme ceci « #aaa000 », mélange de chiffres ( de 0 à 9) et de lettres (de a à f).

Voilà déjà pour l’explication de base sur les couleurs. Ne manquez pas notre second article qui traitera de la symbolique culturelle de la couleur sur le web !

Par: Benoit Hautot

Expérience Utilisateur

Après des études en Arts Numériques à Bruxelles, une première expérience en Rédaction Web et un changement radical de vie, il est peut-être temps de revenir aux sources! J'apprends toujours, mais je peux déjà dire que j'aime le web utile, éthique, sensé, courageux et ... humain!