C'est la saison, voici le feuilleton de l'été. Une série de trois articles sur la théorie des couleurs: signification des couleurs, concepts, application, le tout bien illustré. Par Cameron Chapman.
Par Cameron Chapman
La couleur est une notion très subjective. Ce qui évoque une sensation pour moi en évoquera une toute différente pour une autre personne, parfois pour des raisons de préférences personnelles, parfois pour des raisons culturelles. La théorie des couleurs est une science en soi, de même que l’étude de la façon dont les couleurs affectent les gens, en tant qu’individus ou en tant que groupes. Un changement aussi simple que la teinte ou la saturation d’une couleur peut provoquer un sentiment très différent. Dans telle culture une couleur signifie le bonheur, dans telle autre le deuil et la tristesse.
Cet article est le premier d’une série de trois sur la théorie des couleurs. Nous allons d’abord parler des significations multiples des différentes familles de couleurs et donner quelques exemples de la façon dont ces couleurs sont utilisées, avec quelques explications à chaque fois. Dans la deuxième partie — à ne manquer sous aucun prétexte si vous voulez tout comprendre des 50 nuances — nous parlerons de teinte, de chroma, de valeurs, de saturation, de tons et de nuances, et de leur influence sur notre perception. Dans la troisième partie, nous verrons comment créer des palettes de couleurs pour vos propres designs.
Couleurs chaudes
Les couleurs chaudes incluent le rouge, l’orange, le jaune et les variations de ces trois couleurs. Ce sont les couleurs du feu, des feuilles d’automne, des couchers et levers de soleil, et elles sont généralement énergisantes, passionnées et positives.
Le rouge et le jaune sont des couleurs primaires, le orange se situant entre les deux, ce qui signifie que les couleurs chaudes sont réellement chaudes et non une combinaison de chaud et de froid, contrairement aux couleurs que nous verrons tout à l’heure. Utilisez les couleurs chaudes pour refléter la passion, le bonheur, l’enthousiasme et l’énergie.
Rouge (couleur primaire)
Le rouge est une couleur très chaude. Elle est associée au feu, à la violence, mais aussi à l’amour et la passion. Dans l’histoire, elle est associée à la fois au Diable et à Cupidon. Le rouge peut avoir des effets physiques, augmentant la pression du sang et le rythme respiratoire et même renforçant le métabolisme humain.
Le rouge peut être associé à la colère, mais il est aussi associé avec l’importance (pensez au tapis rouge), au danger (feu rouge, panneaux d’avertissement).
En dehors du monde occidental, le rouge est associé à d’autres notions. Par exemple, en Chine le rouge est la couleur de la prospérité et du bonheur. Il peut être utilisé pour attirer la chance. Dans d’autres cultures, le rouge est porté par les jeunes filles le jour de leur mariage. En Afrique du Sud cependant, le rouge est la couleur du deuil. Le rouge est aussi associé avec le communisme. Il est devenu la couleur de la campagne contre le Sida en Afrique grâce à la popularité de la campagne [RED].
En design, le rouge peut être une couleur d’accentuation puissante. Il peut avoir un effet écrasant s’il est trop utilisé, en particulier dans sa forme la plus pure. Mais c’est une couleur qui se prête à divers usages, les versions lumineuses étant très énergiques et les versions plus sombres étant puissantes et élégantes.
Exemples
NdT : Les exemples qui suivent ont l’âge de l’article (2010), le design est un peu daté (quoique... si certains sites actuels avaient ce niveau, ce ne serait déjà pas mal !) mais le plus important est dans les commentaires. Pour le reste, c’est votre créativité qui parlera :).
Orange (couleur secondaire)
La couleur orange est vibrante et énergisante. Dans ses variations, elle peut être associée à la couleur de la terre et de l’automne. Étant associée aux changements de saisons, elle peut représenter le changement et le mouvement en général.
Associée au fruit du même nom, elle peut représenter la santé et la vitalité. Dans le design, la couleur orange appelle l’attention, sans être aussi puissante que le rouge. Elle est souvent considérée plus amicale et accueillante, moins directe.
Exemples
Jaune (couleur primaire)
Le jaune est souvent considéré comme la couleur la plus brillante et la plus énergisante parmi les couleurs chaudes. Elle est associée au bonheur et au soleil, mais elle peut aussi être associée avec la tromperie et la lâcheté.
Le jaune est associé à l’espoir (yellow ribbons), mais aussi au danger, bien que dans une mesure moindre par rapport au rouge.
Dans certains pays, le jaune a des connotations très différentes. En Égypte, le jaune est couleur de deuil. Au Japon, il représente le courage et en Inde il est la couleur des marchands.
Dans nos designs, le jaune vif peut donner une sensation de bonheur et de joie. Des jaunes plus doux sont parfois utilisés comme couleurs neutres pour les bébés (plutôt que le bleu ou le rose) et les jeunes enfants. Des jaunes sombres et dorés peuvent parfois donner un look antique et avoir un sens dans un design ou la sensation de permanence est recherchée.
Exemples
Couleurs froides
Les couleurs froides sont le vert, le bleu, le violet, elles ont souvent un effet plus doux que les couleurs chaudes. Ce sont les couleurs de la nuit, de l’eau, de la nature, et elle sont généralement calmes, relaxantes, et un peu réservées.
Le bleu est la seule couleur primaire à l’intérieur du spectre froid, ce qui signifie que les autres couleurs sont créées en mélangeant le bleu avec une couleur chaude (jaune pour le vert et rouge pour le violet). Le vert prend quelques attributs du jaune et le violet hérite de certains attributs du rouge. Utilisez les couleurs froides dans vos designs pour donner une sensation de calme ou de professionnalisme.
Le vert (couleur secondaire)
Le vert est une couleur très “terre à terre”. Il peut représenter de nouveaux débuts et la croissance. Il signifie également le renouvellement et l’abondance. Mais il peut aussi représenter l’envie ou la jalousie, et le manque d’expérience.
Le vert intègre les attributs calmes du bleu, mais il incorpore un peu de l’énergie du jaune. Dans le design, le vert peut avoir un effet d’équilibre et d’harmonie, et il est très stable. Il convient aux designs relatifs à la santé, à la stabilité, au renouvellement et à la nature. Les verts clairs sont plus énergiques et vibrants, les verts olive plus représentatifs du monde naturel. Les verts foncés sont les plus stables et peuvent représenter la croissance.
Exemples
Le bleu (couleur primaire)
En anglais, le bleu est souvent associé à la tristesse. Le bleu est largement utilisé pour représenter le calme et la responsabilité. Les bleus clairs peuvent être rafraîchissants et amicaux. Les bleus foncés sont plus forts et fiables. Le bleu est également associé à la paix, et il a des connotations fortes dans de nombreuses cultures et traditions.
La signification du bleu dépend très largement du degré de saturation et de luminosité. Dans votre design, la nuance exacte de bleu que vous choisirez aura un impact sur la perception qu’en aura l’utilisateur. Les bleus clairs sont souvent apaisants. Un bleu vif peut être énergisant et rafraîchissant. Un bleu foncé est excellent pour un site institutionnel ou un design qui doit transmettre une impression de force et de fiabilité.
Exemples
Le violet (couleur secondaire)
Le violet a longtemps été associé à la royauté. C’est une combinaison de rouge et de bleu, et il hérite des attributs de ces deux couleurs. Il est également associé à la créativité et à l’imagination.
En Thaïlande, le violet est la couleur du deuil pour les veuves. Le violet foncé est traditionnellement associé à la richesse et à la royauté, alors que les violets clairs (comme la lavande) sont considérés plus romantiques.
Pour le design, le violet peut donner une impression de richesse et de luxe. Le violet clair est plus doux et associé avec le printemps et l’amour.
Exemples
Les couleurs neutres
Les couleurs neutres servent souvent d’arrière-fond, elles sont communément combinées avec des couleurs plus brillantes. Mais elles peuvent aussi être utilisées en tant que telles pour créer des mises en pages très sophistiquées. La signification et les impressions portées par les couleurs neutres sont plus liées aux couleurs qui les entourent que les couleurs chaudes et froides.
Le noir
Le noir est la plus forte des couleurs neutres. Il est souvent associé avec la puissance, l’élégance, la formalité, mais aussi avec le mal, la mort, le mystère. Le noir est la couleur traditionnelle du deuil dans les pays occidentaux. Il est aussi associé à la rébellion dans certaines cultures, et il est associé à Halloween et à l’occulte.
Le noir est souvent utilisé dans les designs branchés ou élégants. Il peut être conservateur ou moderne, traditionnel ou conventionnel, selon les couleurs avec lesquelles il est associé. Dans le design, le noir est souvent utilisé pour la typographie et pour d’autres parties fonctionnelles à cause de sa neutralité. Le noir peut aider à la transmission d’une certaine sophistication ou d’une sensation de mystère.
Exemples
Le blanc
Le blanc est à l’opposé du spectre par rapport au noir, mais tout comme ce dernier il fonctionne parfaitement avec n’importe quelle autre couleur. Le blanc est souvent associé à la pureté, la propreté, la vertu. En Occident, le blanc est généralement porté par les jeunes filles pour leur mariage. Il est aussi associé avec l’industrie de la santé, mais aussi avec le bien.
Pour le design, le blanc est généralement considéré comme un arrière-fond neutre qui laisse les autres couleurs s’exprimer. Il peut faire passer une sensation de propreté et de simplicité et il est souvent utilisé dans les designs minimalistes. Il peut aussi évoquer l’hiver ou l’été, selon les autres motifs et couleurs qui l’environnent.
Exemples
Le gris
Le gris est une couleur neutre, généralement considérée comme froide dans le spectre des couleurs. Il est parfois considéré comme triste ou déprimant. Les gris clairs peuvent être utilisés à la place du blanc dans certains designs et les gris foncés à la place du noir.
Le gris est généralement conservateur et formel, mais il peut aussi être moderne. Il est parfois considéré comme la couleur du deuil. Il est d’usage courant sur les sites institutionnels où la formalité et le professionnalisme sont essentiels. Il peut être extrêmement sophistiqué. Les gris purs sont des nuances de noir, mais d’autres gris peuvent être teintés de bleu ou de marron. Pour le design, les backgrounds gris sont très courants, de même que la typographie grise.
Exemples
Le marron
Le marron est associé à la terre, au bois, à la pierre. C’est une couleur complètement naturelle, et une couleur chaude parmi les neutres. Le marron peut être associé à la fiabilité et à la sécurité, à la fermeté et à la détermination, au côté solide et “terre à terre”. Il peut aussi être considéré comme terne.
Dans le design, le marron est souvent utilisé comme couleur de background. On le voit aussi dans des textures imitant le bois, et parfois la pierre. Il donne de la chaleur et une sensation de salubrité. Il est parfois utilisé dans sa forme la plus sombre pour remplacer le noir, dans les backgrounds ou dans la typographie.
Exemples
Beige & Jaune orangé
Le beige a ceci d’unique dans le spectre des couleurs qu’il peut prendre des tonalités froides ou chaudes en fonction des couleurs qui l’environnent. Il possède la chaleur du marron et la froideur du blanc, et comme le marron il peut être parfois fade. C’est une couleur souvent conservatrice, et elle est généralement réservée aux backgrounds. Il peut aussi symboliser la piété.
Dans le design, le beige est généralement utilisé pour les backgrounds, en particulier dans les backgrounds à texture. Il prend les caractéristiques des couleurs qui l’entourent, n’ayant lui-même que peu d’impact sur l’impression finale que peut donner un design s’il est utilisé avec d’autres couleurs.
Exemples
Crème et Ivoire
Ivoire et crème sont des couleurs sophistiquées, elles incorporent un peu de la chaleur du marron et beaucoup de la froideur du blanc. Elles sont généralement calmes et peuvent évoquer un sens lié à l’histoire. L’ivoire est une couleur calme, elle comporte un peu de la pureté du blanc mais avec plus de chaleur.
Dans votre design, la couleur ivoire peut donner élégance et calme à un site. Combinée avec des couleurs de terre comme pêche ou marron, elle rend les qualités terrestres. On peut aussi l’utiliser pour éclaircir des couleurs foncées, sans le contraste fort du blanc.
Exemple
En bref...
La théorie des couleurs est autant une affaire d’informations objectives que de sentiments évoqués par telle ou telle nuance ou contraste. Mais voici un petit guide de référence pour les significations les plus courantes des couleurs que nous venons de voir :
- Rouge : Passion, Amour, Haine
- Orange : Énergie, Bonheur, Vitalité
- Jaune : Bonheur, Espoir, Tromperie
- Vert : Commencement, Abondance, Nature
- Bleu : Calme, Responsabilité, Tristesse
- Violet : Créativité, Royauté, Santé
- Noir : Mystère, Élégance, Mal
- Gris : Tristesse, Conservatisme, Formalité
- Blanc : Pureté, Propreté, Vertu
- Marron : Nature, Salubrité, Fiabilité
- Beige : Conservatisme, Piété, Terne
- Crème ou Ivoire : Calme, Élégance, Pureté
La série de trois articles :
- Théorie des couleurs, 1 : Signification des couleurs
- Théorie des couleurs, 2 : Concepts et terminologie
- Théorie des couleurs, 3 : Créer votre palette
Intéressé par le design ? Sur la Cascade, retrouvez des articles et ressources.
Tous les articles sur la couleur dans La Cascade.
Ressources complémentaires en anglais
- Color Symbolism, par Jacci Howard Bear
Ressources complémentaires en français
- Signification des couleurs, par toutes les couleurs
- Symbolisme des couleurs
- Signification des couleurs en e-marketing
Article original paru le 20 janvier 2010 dans Smashing Magazine.
Sur l’auteur : Cameron Chapman est designer web et graphique, elle écrit pour de nombreux blog, y compris le sien, Cameron Chapman On Writing. Elle est aussi l’auteur de The Smashing Idea Book: From Inspiration to Application. On peut la suivre sur Twitter et sur Google+.
Traduit avec l’aimable autorisation de Smashing Magazine et de l’auteur.
Copyright Smashing Magazine © 2010.