La couleur : un élément à double tranchant !

Couleurs

Élément au combien important de votre composition graphique, la couleur peut tout à la fois rendre percutant un propos, ou le rendre totalement illisible ! Il faut donc la manipuler avec précaution.

Mais avant de voir comment choisir correctement les couleurs de son site web, revenons un peu sur ce qu’est la couleur, son histoire, ses propriétés !

Qu'est-ce que la couleur ?

Le Larousse la définit ainsi :
1) Sensation que produisent sur l’œil les radiations de la lumière, telles qu’elles sont absorbées ou réfléchies par les corps.
2) Ce qui s’oppose au blanc, au gris et au noir (teintes achromatique, par opposition au rouge, orange, vert, etc).

En résumé, la couleur est avant tout une question d’ondes et de longueur d’ondes que notre œil est capable ou pas de voir.

Les premiers à théoriser sur la couleur sont :
_ Newton dans son livre « Opticks » parut en 1704
_ Goethe avec son « Traité de la couleur » parut en 1810

Si le premier, purement scientifique, démontre que la lumière blanche passant à travers un prisme fait apparaître invariablement la même séquence de couleurs, toujours dans le même ordre celui de l’arc-en-ciel, et qu’en la faisant passer une seconde fois dans un autre prisme, elle redevient blanche, montrant ainsi que la lumière blanche se compose de couleurs ; le second, quant à lui, s’adresse avant tout aux artistes et porte plus sur le côté poétique et philosophique de la couleur. Conçu comme un manuel pratique et esthétique, il doit permettre au peintre de se distinguer du scientifique par sa capacité à ordonnancer et à composer les couleurs, en fonction de leur valeur non seulement physique mais aussi symbolique.

La couleur Physique :

Pour mieux comprendre, faisons appel à notre vieil ami, le cercle chromatique.

cercle chromatique

On compte quatre types de répartition :
_ couleurs froides/chaudes
_ les primaires
_ les secondaires 
_ les tertiaires

Chaque primaire trouve sa complémentaire chez une secondaire.

Avant d’aller plus loin, faisons un petit point vocabulaire :
_ Teinte : synonyme de couleur.

_ Valeur : caractère relativement clair ou foncé d’une couleur selon la quantité de lumière qu’elle reflète.
    –> valeur/nuance élevée = ajout de blanc sans changer la teinte.
    –> ombre/valeur basse = ajout de noir.

_ Nuance : couleur éclaircie par du blanc.

_ Saturation : intensité et puissance d’une couleur (autrement dit la teneur en gris). Plus une couleur est grise moins elle est saturée.

_ Ton : couleur pure modifiée par ajout de noir (ombre), de gris ou de blanc (nuance).

_ Tonalité : palette de couleurs/gamme de tons.

_ Ton nuance : couleur sous-jacente dans une teinte donnée.
Ex. : le rouge dans un violet rougeâtre (synonyme : reflet).

_ Ombre : ajout de noir ou de gris dans une couleur pure.

_ Palette : ensemble de couleurs employées pour décrire un thème/une ambiance.

couleur monotone
couleur monochrome
analogue
complémentaires
complémentaire intermédiaire
triade
tétrade

Harmoniser les couleurs

On dénombre également 7 manières d’harmoniser les couleurs :

  1. Monotone – il s’agit d’une palette composée d’une seule couleur neutre dont varient seulement les nuance et les ombres.
  2. Monochrome – palette utilisant une seule famille de couleurs, en variant les nuances, les tons et les ombres.
  3.  Analogue – une palette de couleurs analogues se compose d’une primaire, d’une secondaire et d’une tertiaire situées côte-à-côte sur le cercle chromatique. On parle également de teintes adjacentes ou voisines.
  4. Complémentaire – ce sont les couleurs situées l’une en face de l’autre sur le cercle chromatique telles le rouge et le vert par exemple.
  5. Complémentaire intermédiaire – il s’ait d’une palette composée d’une couleur principale et de deux autres couleurs situées de part et d’autre de sa complémentaire sur le cercle chromatique.
  6. Triade – Ce sont les couleurs équidistantes sur le cercle chromatique que ce soit chez les primaires (plus énergique) ou chez les secondaires.
  7. Tétrade – comme son nom l’indique, on utilise 4 couleurs qui sont constituées de deux paires de complémentaires.

Couleur symbolique :

Les couleurs sont souvent associées à des états d’esprit, à des émotions, des sensations. Elles font appellent également à des souvenirs.
Je ne rentrerais pas trop dans les détails car sinon on en a pour la semaine, mais vous avez tous en tête quelques une de ces symboliques associées à la couleur :
_ le blanc = pureté
_ le rouge = colère, esprit dominant
_ le jaune = optimisme, gaieté, joie

Et ainsi de suite.

Maintenant, un ensemble de couleurs peut aussi suggérer des choses, parfois bien différentes qu’une couleur seule.
Dans le livre « L’Harmonie des couleurs – édition Pantone », différentes gammes de couleurs nous sont proposées permettant de définir une ambiance générale.

Délicieux

Sous le thème délicieux, Pantone nous propose toute une gamme de couleurs aux tons pastels, faisant référence aux friandises de notre enfance, telles que les colliers de bonbons par exemple.

cocooning au coin du feu

Un autre ensemble faisant appel à une belle association de couleurs froides et chaudes, donne une ambiance décontractée. Ici, on fera surtout appel aux jaunes, marrons, oranges pour les couleurs chaudes ; et aux indigos, bleus pâles, violets pour les couleurs froides. Bref tout ce qui rappel le cocooning au coin du feu !

tropicale

Sous le thème tropical, on retrouve des couleurs plutôt vives ! On jouera beaucoup avec les complémentaires et les secondaires, telles les turquoises, les orangés par exemple.

Transcendant

Une autre palette proposée se composent de couleurs froides telles des mauves sombres, des gris pâles, des bleus contemplatifs…

Comment utiliser les couleurs pour votre site web ?

Maintenant que nous en savons un peu plus, comment appliquer ceci à un site internet ?
Il est important je pense, de définir tout d’abord l’ambiance dans laquelle vous souhaitez plonger les internautes qui viendront visiter votre site. Cette ambiance vous allez la choisir en fonction de votre secteur d’activité. Par exemple, si vous travaillez dans le tri des déchets, on optera pour une ambiance tournée vers l’écologie, la botanique, donc plutôt avec du vert.

Vous pouvez aussi vous servir de votre logo pour définir votre couleur dominante.

Ensuite, il faut se limiter dans le nombre de couleurs. Si vous en mettez trop, on ne comprendra plus rien à votre site et l’ensemble aura l’air brouillon. Le regard doit pouvoir respirer, et pour ce faire il faut lui dégager des moments de pause.

Limitez-vous à trois couleurs, une principale, et deux secondaires. Ensuite jouez soit avec les contrastes pour faire ressortir un élément en particulier, soit avec les nuances et les ombres afin de garder une cohérence d’ensemble et donner un aspect harmonieux.

Pour que vos textes ressortent ils doivent contraster avec le fond, donc si vous optez pour un fond plutôt foncé, vos écritures doivent être claires, et inversement.

Enfin, voici deux outils pour vous aider dans vos choix de couleurs :
_ https://color.adobe.com/fr/create/color-wheel
_ « L’harmonie des couleurs – édition Pantone »

L'harmonie des couleurs

Le premier outil vous permettra de créer votre propre palette de couleurs et/ou vous proposera des associations des couleurs en fonction de certains critères que vous aurez au préalable cochés.

Le second, et bien comme expliqué plus haut ils vous donnent des gammes de couleurs en fonction du type d’ambiance que vous recherchez.

Voilà j’espère que cela vous aidera à concevoir un site à la fois efficace et élégant, mais surtout qui vous ressemble et reflète vos idées.