Webdesign

Le petit guide pour comprendre la signification des couleurs



Suivez Template.pro :   

Au moment de créer la charte graphique de votre entreprise, le design de votre site internet ou votre prochain template, les couleurs ont une importance capitale. Chacune d’elle agit comme un levier psychologique chez le prospect. Cela est involontaire et c’est simplement que notre cerveau est conditionné pour assimiler certains coloris à des émotions, des sensations et des significations.

Par conséquent, un mauvais choix de couleur et votre création peut renvoyer une image qui ne sera pas du tout conforme à son secteur d’activité ou simplement au message que vous souhaitez transmettre.

Alors je vous propose aujourd’hui de voir plus en détail la signification des couleurs et les façons de les utiliser sur votre site ou dans vos documents officiels.

Cet article à été mis à jour avec l'aide de Denis CHRISTINE le 25 Novembre 2016.

Le sommaire de l'article :

couleur

N’hésitez pas à donner votre avis en commentaire et à partager sur les réseaux sociaux !

La signification des couleurs

couleur-chaud-froid

Les tons et les coloris sont divisés en trois catégories principales :

  • les couleurs chaudes
  • les couleurs froides
  • les couleurs neutres

Les couleurs chaudes

Celles-ci désignent les coloris rouges, orangés et jaunes. Elles évoquent généralement des sensations positives comme le confort, la passion, l’énergie, la joie et la douceur.

Ainsi, si le rouge peut paraître agressif, il a plutôt vocation à appuyer sur l’aspect énergique et passionné des marques, voilà pourquoi Coca-Cola, SFR, Total, Suzuki ou encore Puma l’utilisent.

L’orange est une couleur très reposante qui favorise la confiance, c’est pourquoi elle est utilisée par l’opérateur Orange (oui, elle était facile à trouver celle-ci), la banque ING, les magasins Boulanger ou le syndicat CFDT. Le but est de rassurer instantanément le client et de lui faire baisser sa garde grâce à un environnement apaisant.

Les couleurs froides

Les tons appelés froids sont situés sur la palette des bleus, des violets et des verts. Ces couleurs suscitent des émotions calmes, parfois tristes, mais donnent aussi une impression de qualité et d’intelligence. Voilà pourquoi des entreprises comme Facebook, Asus, Intel, Samsung ou encore IBM ont choisi le bleu pour leur logo !

Quant à Activia, Good Goût, Body Shop ou encore Yves Rocher, ils misent sur le vert pour faire passer un message rassurant, dans lequel la qualité de la nature est mise en avant.

Les couleurs neutres

Enfin, les coloris qui ne se retrouvent pas dans les deux catégories précédentes sont désignés comme neutres.

Le marron, le beige et le crème ont pour vocation de donner une impression de sérénité et de tendance. Ils suscitent immédiatement une impression zen et naturelle. Ces couleurs sont donc plébiscitées par des marques comme Habitat, Roche Bobois, Nature et Découvertes…

Quant au gris et au noir, ils sont souvent l’apanage des marques de luxe ou des grands groupes high-tech, tels que Mont Blanc, Apple, Cartier, Bose…

Par conséquent, au moment de mettre en œuvre le webdesign d’un site, il convient de discuter de ces aspects avec votre client. Il doit comprendre l’implication du choix des couleurs sur l’inconscience des visiteurs.

Par contre, lorsque vous aurez choisi la couleur principale, il convient de sélectionner les nuances, qui elles aussi sont soumises à une expérience psychologique de la part des consommateurs !

J'ai réalisé une image pour résumer les émotions par couleur. J'ai pris les émotions sur Code-couleur.com.

couleur-signification

Les déclinaisons de couleur

Choisir un bleu, c’est bien, mais quelle nuance de bleu allez-vous appliquer ? Il en existe des centaines : ciel, marine, turquoise, azur, fluo, outremer, électrique… Pour pouvoir sélectionner la couleur qui collera parfaitement à l’image de marque de l’entreprise pour laquelle vous travaillez, vous pouvez vous aider d'outils pour créer vos palettes de couleurs.

Capture-d’écran-2015-09-24-à-07.34.36

Les préférences par genre

Bon à savoir, dans le choix des couleurs, il faudra aussi prendre en compte les préférences de votre cible. Est-ce que le site doit attirer les hommes, les femmes ou les deux ?

Une étude s’est penchée sur les préférences de chaque sexe et en est venue à la conclusion que les femmes plébiscitent en majorité le bleu (35%), suivi du mauve (23%) et du vert (14%). À l’inverse, elles n’aiment pas particulièrement l’orange, le marron et le gris.

Quant aux hommes, ils semblent préférer le bleu, le vert et le noir.

Parmi les couleurs qu’ils apprécient moins, nous trouvons le mauve, l’orange et le marron.

À cet effet, il est intéressant de constater que le bleu et le vert sont généralement appréciés des deux sexes, alors que l’orange et le marron remportent très peu de suffrages chez l’un comme l’autre.

Mais quid du rose alors ? Ce coloris, généralement associé à la féminité et à la douceur, ne semble pourtant pas parler tant que cela aux femmes. Mis à part pour des secteurs très spécifiques comme la lingerie ou la maternité, il convient de proposer plutôt des couleurs bleues, mauves et vertes.

Répartir ses couleurs avec la règle des 60-30-10

Lorsque le choix des couleurs et de leur déclinaison est arrêté, il convient maintenant de les placer de manière pertinente dans votre charte graphique. S’il n’existe pas de règle gravée dans le marbre, les graphistes utilisent généralement la technique du 60-30-10.

  • 60% : c’est la surface que doit couvrir votre couleur principale.
  • 30% : c’est la surface couverte par votre second coloris, qui est généralement une déclinaison plus claire ou plus foncée du premier. L’objectif est de créer un contraste qui va rendre l’ambiance générale plus agréable et susciter une émotion en rapport avec votre activité.
  • 10% : c’est la surface restante, qui représente normalement les éléments à mettre en valeur comme un rayon promotion, des boutons de call-to-action, des formulaires de téléchargement, etc.

Article complété par Denis CHRISTINE

Qui est Denis CHRISTINE ?
Un parcours de l’image : il est passé du dessin à la peinture, de la peinture à la restauration de tableaux pour finir dans l’infographie et la création Web. Il a toujours enseigné ce qu’il savait, mettant l’écoute du besoin comme première condition à ses programmes. Suivez Denis sur son site :  Inaden.org et sur Twitter @inaden_dc

La couleur : une notion difficile

Qu’est-ce que la couleur ? D’un point de vue scientifique, la couleur est une longueur d’onde comprise entre 380 nanomètres (nm), perçue comme un violet, et celle de 780 nm, correspondant à un rouge. Ce sont les composantes monochromatiques de la lumière visible. Mais cela ne nous avance guère.

Avant toute chose, la couleur est une sensation, et plus encore, c’est une interprétation.

La sensation de la couleur n’est pas une sensation directe de notre organisme, elle passe par un mécanisme complexe et est interprétée par le cerveau.

En cela il y a un point important : on ne peut pas savoir lorsque l’on parle d’une couleur à quelqu’un s’il se représente la même chose que nous.

Mais il existe malgré tout des règles qui régissent la couleur et sur lesquelles nous pouvons nous mettre d’accord. La couleur est régie par des règles de contraste.

cercle_chromatique

Cercle chromatique

En soi, il n’existe que les couleurs du cercle chromatique et « toutes les autres couleurs » sont issues de deux manipulations : le changement de luminosité et le changement de saturation.

Cercle chromatique, saturation, luminosité, nous avons là les trois contrastes qui régissent le rapport des couleurs entre elles, car il est rare d’avoir devant les yeux une unique couleur, et les couleurs se définissent le plus souvent dans le rapport qu’elles entretiennent : leur contraste.

Il existe donc trois principaux contrastes correspondant à la définition TLS de la couleur (teinte, saturation, luminosité). Vous l’avez deviné ce sont les contrastes de teinte, de saturation et de luminosité.

Les contrastes

Couleur chaude, couleur froide

couleur_froide_chaude

On a tendance à opposer les couleurs chaudes et les couleurs froides, mais cela reste tout à fait relatif, car une couleur est chaude ou froide en fonction d’une autre couleur.

Juste pour illustrer le cas, dans l’image suivante, quelle couleur est froide et quelle couleur est chaude ? C’est pour cette raison qu’il est préférable de parler des trois contrastes naturels.

Le contraste de teinte

contraste_de_teinte

Contraste de teinte

Le contraste de teinte correspond à l’emplacement des couleurs sur le cercle chromatique : les couleurs opposées sur le disque sont dites complémentaires et engendrent un contraste maximum de teinte quand elles sont juxtaposées. On trouve un tel type d’utilisation dans le Fauvisme par exemple.

Les contrastes de teintes sont donc assez violents.

Le contraste de saturation

contraste_de_saturation

Contraste de saturation : le niveau de gris reste le même.

La saturation est une notion délicate à appréhender.

La saturation est la quantité de couleur relative au cercle chromatique.

  • Désaturer est se rapprocher du gris.
  • Désaturer est supprimer de « l’information colorée ».
  • Passer une image en niveau de gris est une désaturation totale.

Ainsi le contraste de saturation est mettre en opposition une couleur « franche » (issue du cercle chromatique par exemple) avec la même couleur dont on a supprimé du « pouvoir colorant ».

Le contraste de luminosité (ou de valeur)

contraste_de_valeur

Contraste de valeur : le niveau de gris est différent

La luminosité consiste à éclaircir ou obscurcir une couleur. Cela implique de fait une désaturation alors qu’une désaturation n’implique pas nécessairement un éclaircissement ou un obscurcissement de la couleur. Ainsi, le contraste de luminosité est l’opposition d’une couleur avec elle-même à laquelle « on a ajouté du blanc ou du noir ».

Le contraste de surface

Enfin, il y a un dernier contraste qui n’est pas directement lié à la nature de la couleur, mais à son utilisation : le contraste de surface. C’est le rapport qui existe entre les différentes surfaces de couleur qui se juxtaposent ou se chevauchent. Nous sommes ici en plein cœur de la composition.

Manipuler les couleurs, c’est manipuler ces quatre contrastes, et selon l’expression que l’on veut amener, on peut donc manipuler les couleurs par opposition (aller chercher des contrastes maximums), ou par gamme (opposer une même couleur dans ses formes différentes).

D’un certain point de vue, certaines couleurs n’existent pas et ne sont que des expressions différentes d’une même couleur. Par exemple, le marron : mettez de l’orange sur une feuille et mettez cette feuille à l’ombre… vous vous approcherez du marron.

La définition des couleurs

les_gammes

Des rouges et des bleus : une couleur possède plusieurs expressions.

Quand on parle couleur, on demande par exemple quelle couleur aimes-tu ? On va s’entendre dire, le rouge, ou le bleu, ou n’importe quoi d’autre.

Mais de quoi parle-t-on. Comme disais Wittgenstein « quand je te dis rouge et que tu penses rouge, penses-tu le même rouge que moi ? ». Si sa question reflète le fait que nous n’accordons pas forcement la même signification à un mot, cela relève aussi pour les couleurs du fait que le vocabulaire est flou. On ne devrait pas parler de rouge, mais des rouges. Idem pour les bleus, les verts, les jaunes…

En dehors de leur longueur d’onde ou de leur référence dans un nuancier, la définition des couleurs est assez floue, tout autant que leur perception quand on s’approche des zones intermédiaires, ce turquoise est-il un bleu ou un vert ? Et, pire que cela, la reproduction des couleurs est aléatoire.

Mettez une couleur sur un support blanc et lisse, et mettez la même couleur sur un support gris et granuleux, son rendu sera différent.

Prenez une couleur sur un écran et basculez le document sur un autre écran, ou encore sur un autre ordinateur, sur un autre logiciel… et vous obtiendrez des couleurs différentes à partir de la même. Ainsi, dès le départ, il est nécessaire d’avoir conscience qu’en dehors d’une toile peinte et restant toujours sous le même éclairage, vous ne pourrez maîtriser le résultat final de votre travail coloré. Et encore, mon exemple est faux puisque la couleur sur la toile évoluera dans le temps !

Symbolique des couleurs

Ainsi, lorsque l’on dit le rouge est la couleur de la passion, de quel rouge parle-t-on ? Et plus encore, dans quelle région du monde se place-t-on, car la symbolique des couleurs dépend non seulement de la perception individuelle, mais aussi de la culture dans laquelle on se trouve.

Par exemple le rouge va être symbole de patriotisme aux USA et de deuil en Afrique du sud, alors que le deuil est symbolisé par le bleu en Iran. Le rouge est synonyme de danger en Angleterre et de chance en Chine.

D’autre part, une même couleur peut avoir, dans une même culture des significations différentes. Par exemple le vert, symbole d’apaisement et de stabilité peut aussi, selon le vert, représenter la maladie. Et même ne dit-on pas vert de rage ! Le rouge, et pourquoi pas un même rouge, peut représenter la passion ou la violence. Un jaune est « énergisant », désaturez-le et obscurcissez-le et il devient déprimant.

Alors, comment s’y retrouver ? Si le gris est plutôt calme et douceur et qu’il est aussi dépression et vieillesse ? Et bien, comme dit le dicton : vous savez les goûts et les couleurs… !

Choisissez une interface rouge, elle plaira à certains pour son dynamisme et sera trop agressive pour d’autre. Une interface noire paraîtra classieuse à certains et sinistre à d’autres. Je crois pour ma part que nous sommes réduits à choisir les couleurs qui nous plaisent et espérant que leur mariage plaira aux autres. Une page web ou une plaquette sont des images, c’est-à-dire que, tout comme une photo, un dessin ou une peinture, nous en avons une première appréciation qui répond à trois impératifs qui composent toutes les images :

  • Une utilisation de formes, de sujets et de zones : la composition
  • Une problématique de couleurs et de contraste : la lisibilité
  • Un objectif lié à un but et à une compréhension : le message

On retrouve cela de Lascaux aux icônes, des impressionnistes à la page web. Il est important d’établir un rapport entre ce qui est dit et la façon dont on le dit. Dites à quelqu’un que vous l’aimer en lui gueulant dessus le rendra surement plus méfiant à votre égard que si vous lui dites gentiment que vous ne l’aimez pas.

Selon ce que vous voulez atteindre, c’est tout autant dans l’utilisation de vos contrastes et de vos polices que de vos couleurs que vous parviendrez à rendre votre message clair, sa symbolique et sa signification compréhensibles.

Si vous voulez vraiment apprendre la couleur, je ne peux que vous conseillez d’aller voir pour une première approche l’article http://www.3atp.org/la-couleur et pour une véritable étude, le site http://www.profil-couleur.com/.

 

 

J’espère vous avoir apporté assez d’éléments pour vous aider à bien choisir vos couleurs pour construire une charte graphique pertinente.

Comme Denis, n'hésitez pas à compléter cet article en ajoutant vos remarques et conseils dans les commentaires.

Le petit guide pour comprendre la signification des couleurs
11 Votes | 4.45 / 5

A propos de l'auteur

Fabien Berthoux

J'ai créé Template.pro pour aider les professionnels à gagner du temps dans la recherche des meilleurs ressources et templates pour réaliser leurs projets ou ceux de leurs clients. Merci de prendre quelques minutes pour partager ce site avec vos amis. En savoir plus sur ce projet.

5 commentaires

  • La signification des couleurs dépend de la culture. Dans certains pays le blanc est la couleur du deuil, dans d’autre c’est le rouge. Il est donc important de préciser que l’on est ici dans un cadre purement occidental.
    D’autre part, je ne suis pas certain du bien-fondé de la distinction couleur froide / couleur chaude. Une couleur est froide ou chaude par rapport à une autre, mais pas en soi. Par exemple, un bleu céruléum peut être chaud par rapport à une terre verte et certains rouges paraître froid par rapport à un vert prairie.
    Ce qui régit les couleurs ce sont les contrastes : saturation / luminosité / teinte et en supplément les contrastes de formes et de taille. Ce sont ces règles qui sont impératives à une réelle harmonie ou tout du moins à l’effet recherché.
    Dernier point, comme disait Wittgensten “quand je te dis rouge et que tu penses rouge, penses-tu le même rouge que moi ?” Il n’y a pas un rouge (ou le rouge), un bleu, un jaune… et chacune des variantes de couleur possède une interprétation et une induction de sentiment différentes. De plus si l’on pense que le rouge c’est l’amour, c’est aussi la colère alors notre interface est-elle “amoureuse ou colérique”.
    Je suis désolé de me montrer aussi rabat-joie, mais la couleur est d’une infinie complexité et résumer son interprétation psychologique à si peu me parait quelque peu léger… Même pour une initiation.

Ajouter un commentaire

Pin It on Pinterest

Partagez

Aidez vos amis à découvrir ces ressources.

Recevez plus de templates !

Recevez plus de templates !

Recevez toutes nos nouvelles collections de templates pour vos prochains projets directement par mail. 

Merci, vous aller recevoir un message pour confirmer votre inscription.

Recevez plus de templates !

Recevez plus de templates !

Recevez toutes nos nouvelles collections de templates pour vos prochains projets directement par mail.

Merci, vous aller recevoir un mail pour confirmer votre inscription.