Bien choisir ses couleurs sur le Web

Les couleurs sur le web

Ce billet a été lu 1896 fois. À votre tour?

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 « soustractives »

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.

Lorsque l’on parle de 8, 32 ou 64 bits, c’est qu’il y a donc autant de couches successives d’information de couleur.

Unités d’informations donc, les couleurs peuvent numériquement se quantifier. L’écran utilise le système soustractif : un mélange de rouge, vert et bleu donne donc du blanc (au contraire du système additif 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 ».

Capture d’écran 2013-10-10 à 09.00.26

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 !

 

Related

A propos de Benoît Hautot

Tout fraichement diplômé de Saint Luc en Arts Numériques, Benoit se destinait, petit, à être curé, architecte ou journaliste. Le voilà qu'il sait faire du graphisme et qu'il est en stage -prolongé - chez WAW, pour apprendre cette nouvelle compétence qu'est l'écriture web. Pfiou, ce n'est pas une mince affaire !

Sur le sujet, avez-vous lu...

2 Responses to Bien choisir ses couleurs sur le Web

  1. […] pensez-vous de cet impact des couleurs ? Avez-vous lu ce premier article, qui traitait de la couleur […]

  2. Bonjour Benoît,

    Merci pour ces précisions et pour le site Colorhexa que je ne connaissais pas. Connaissez-vous Color Scheme Designer ? Il est permet de trouver des couleurs complémentaires pour le web. J’avais écrit un petit article dessus il y a quelque temps déjà, mais c’est toujours d’actualité : http://www.formateurconsultant.com/article-un-site-gratuit-qui-aide-a-choisir-des-couleurs-complementaires-92121129.html

    Un outil gratuit qui peut avoir son utilité :-)

    Vincent

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>