Agence creation de site internet
Le bandeau du site Ergonomie Web retour sur la page d'accueil du site ergonomie-web.studiovitamine.com aller sur le site www.studiovitamine.com
Thèmes associés : Cercle chromatique couleur ni couleur site web. Le cercle chromatique car cercle chromatique des couleur ou ergonomie web ou accord couleur et couleur du web. Palette couleur web, couleur web. Accord des couleurs, palette de couleur web, palette couleurs web et les couleurs du web... Ergonomie site web, harmonie couleurs web, accorder les couleurs, couleurs du web et palette couleur site web. Cercle chromatique... Harmonie couleur web, ergonomie des sites web car international color consortium et couleurs web. Liens associés : couleur web et couleur web
Accueil > Design web > Couleur web

E-Commerce

Couleur web

Assembler les couleurs est un exercice difficile pour le webdesigner.  Les couleurs sont là pour servir le design, mettre en valeur le site web et le rendre attrayant. Bien souvent la lisibilité d'un site et la clarté de l'information passe aussi par le bon choix des couleurs.
Image de Couleur web
 "Quel est le bon choix de couleurs pour un site web ?" Répondre à la question est presque impossible. On peut tenter de dire "ça dépend des goûts et des couleurs". Effectivement, il y a un nombre de critères importants à prendre en compte : lisibilité du texte, contraste, sobriété, ambiance, harmonie, symbolique...
 
L'accord des couleurs n'est pas une science exacte, mais connaître quelques principes n'est pas inutile.
 
  1. Les couleurs, c'est subjectif
  2. Utiliser les couleurs web
  3. Le cercle chromatique et l'accord des couleurs
  4. La palette web

1. Les couleurs, c'est subjectif.

L'accord des couleurs est subjectif. Ce qui plaît à une personne peut en faire fuir une autre. Le choix des couleurs repose souvent sur nos goûts personnels ou notre sens de l'esthétisme.
 
Certaines personnes vont préférer le rouge alors que d'autres plébiciteront le vert. Mais personne n'aurait l'idée d'associer une interdition à une couleur verte, alors que dans nos sociétés l'interdiction est symbolisée par le rouge. Dans ce cas le sens des couleurs dépend des circonstances.
 
Il est très difficile de séparer la subjectivité de la symbolique des couleurs car les couleurs ont toutes une influence sur nos émotions, nos humeurs, notre ressentiment... en fonction de notre environnement culturel. Avant de réaliser un site Internet, il est bon de connaître sa cible pour ne pas faire de contre-sens dans l'emploi des couleurs. Le blanc par exemple, est souvent associé dans le monde occidental à la pureté, l'innocence, le mariage, la vie... alors que dans certains pays asiatiques ou africains, le blanc est associé à la mort et au deuil.
 
Les couleurs sont infinies et il y a tant a dire. Alors si vous êtes des passionnés, pourpre.com  est un site dédié à la couleur à découvrir d'urgence.
Image de Couleur web

2. Utiliser les couleurs web.

Mieux vaut utiliser un nombre limité de couleurs. Bien souvent, la tentation d'utiliser de nombreuses couleurs est grande surtout lorsqu'on débute sur Internet. Le risque : faire un site "sapin de Noël" qui s'apparente à de l'amateurisme. Ce n'est pas parce que les couleurs sont nombreuses que le site est agréable. Au contraire.
 
Le cahier des charges définie les couleurs. Elle sont là pour apporter une vraie valeur ajoutée au site : ambiance graphique, identité visuelle, soutien de la mise en page et du contenu, repères de navigation. Les couleurs apportent un plus à l'ergonomie web d'un site.
 
Respecter le choix des couleurs définies dans une charte graphique est important. Cela permet de garantir l'homogénéité des pages d'un site.
 
Il est important de bien choisir la couleur de fond et celle du texte pour assurer une bonne lisibilité et un bon contraste. Les teintes claires pour le fond sont, de beaucoup, préférables aux couleurs foncées. Mais certains sites exprimant le raffinement, ou vendant des objets de luxe utiliseront bien souvent le noir, couleur identifiée comme telle par les internautes.
 
Aucune information ne doit être véhiculée uniquement par la couleur.  Les utilisateurs ayant un handicap visuel, notamment les daltoniens ne pourront comprendre l'information. Il faut donc accompagner la couleur  par un moyen graphique, textuel...
Image de Couleur web
Le choix des couleurs principales de votre site peut se faire selon plusieurs critères.
  • pour un site favorisant la douceur, l'unité et l'harmonie des pages, utilisez plutôt des couleurs proches déclinées dans des tons et des nuances diverses.
 
  • pour des pages plus dynamiques, l'utilisation de couleurs complémentaires, couleurs diamétralement opposées sur le cercle chromatique, sera judicieuse. Sauf à les utiliser comme contraste couleur du texte / couleur du fond de page. Dans ce cas, la lisibilité est très fortement diminuée.
 
  • si vous souhaitez attirer l'attention des internautes, l'utilisation de couleurs chaudes comme le rouge, le jaune ou l'orange ont tendance à faire paraître tout élément plus gros et plus proche des yeux des internautes. Ces couleurs évoquent la chaleur, suscitent des réactions émotionnelles. Au contraire, les couleurs froides comme le bleu, le vert ou le violet les diminueront et auront un effet appaisant.

3. Le cercle chromatique et l'accord des couleurs.

Le cercle chromatique permet de comprendre le mélange des couleurs. C'est une représentation circulaire des couleurs ordonnées comme au sein d'un arc-en-ciel. Il présente l'enchaînement des couleurs primaires, secondaires et tertiaires.
 
C'est Newton, au 17e siècle, qui présenta le premier cercle chromatique, après avoir découvert la décomposition de la lumière blanche du soleil en différentes couleurs spectrales.
Image de Couleur web
Le cercle chromatique
Le cercle chromatique
Les couleurs primaires sont le rouge, le jaune et le bleu. Elles ne peuvent être composées par le mélange d’aucune autre couleur. Mélangées en proportions égales elles forment le noir.
 
Les couleurs secondaires sont obtenues à partir du mélange des couleurs primaires deux par deux.
bleu + jaune = vert
jaune + rouge = orange
bleu + rouge = violet
 
Les couleurs tertiaires sont réalisées grâce au mélange d’une couleur primaire avec sa complémentaire.
 
Deux couleurs sont complémentaires lorsqu’elles sont diamétralement opposées sur le cercle chromatique.
Par exemple, le rouge primaire et le vert secondaire sont des couleurs complémentaires comme le sont le rouge secondaire et le bleu primaire.
Les contrastes les plus élevés sont réalisés lorsque deux couleurs complémentaires sont utilisées.
 
Pour réaliser un accord chromatique valide, choisir des couleurs consécutives, opposées, disposées en triangle ou en carré.
Image de Couleur web
Pour accorder les couleurs, il existe un outil web gratuit très pratique pour assembler les couleurs. Il permet de les sélectionner dans la roue des couleurs, de les ajuster, de travailler en une, deux, trois ou quatre couleurs. Toutes les variantes de gammes sont possibles, de la gamme de gris jusqu'aux couleurs saturées.

4. La palette web-safe.

La palette web-safe permet d'afficher les 216 couleurs normalisées par l'International Color Consortium pour le web.
 
Pourquoi normaliser des couleurs. Les ordinateurs sous Windows ou Mac OS n'interprètent pas les couleurs d'une façon identique. Les différends navigateurs Internet ont aussi chacun leur manière d'interpréter les couleurs. Il y a encore quelques années, certains ordinateurs affichaient seulement 256 couleurs différentes alors qu'aujourd'hui c'est plus de 16 millions.
 
Constitué en 1993, l'International Color Consortium a créé un système universel de gestion des couleurs qui permet d'afficher les couleurs d'une façon similaire quel que soit la technologie du périphérique informatique, le système d'exploitation et le logiciel utilisé. C'est la palette web-safe.
 
Lors de la création du design d'un site Internet, il est plutôt conseillé d'utiliser les couleurs de la palette web-safe. Quoiqu'aujourd'hui, les navigateurs affichant seulement 256 couleurs sont devenus rares (seulement 1% selon les statistiques du site w3scools.com - janvier 2009). 90% des navigateurs affichent 16 millions de couleurs, toujours selon les mêmes sources.
Les écrans d'ordinateurs utilisant 256 couleurs deviennent également de moins en moins utilisés. 1% en 2009 contre 95% utilisant 16 millions de couleurs en janvier 2009 selon les statistiques du site w3scools.com.
 
Le codage des couleurs s'exprime de trois façons :
  • en hexadécimal, le bleu  va s'exprimer sous ce code # 00 00 FF
  • en RGB, la même couleur s'exprimera sous la forme 0 0 255
  • par un nom reconnu : blue
Les couleurs 'web-safe' sont l'ensemble des possibilités couvertes par les nombres suivants : 0, 51, 102, 153, 204, 255 en RGB, et en hexadécimal  00, 33, 66, 99, CC, FF.
 
Pour en savoir davantage sur les couleurs du web.
Image de Couleur web
Palette web dans Photoshop
Palette web dans Photoshop

Création de sites Internet
& référencement naturel

Découvrez les références de l'agence web
STUDIO VITAMINE. Des spécialistes et passionnés
à votre service ! Devis gratuit.
mascotte de l'agence web STUDIO VITAMINE
l'agence web STUDIO VITAMINE