Théorie des couleurs, 1 : Signification de la couleur

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

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.


une roue des couleurs, schématisée

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

dégradé du rouge au jaune

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)

rouge

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 :).

image
Le rouge sombre de ce design donne un côté puissant et élégant à ce site.

image
Les accents de rouge ressortent sur l’arrière-plan noir et donnent de la puissance et de la classe à ce site.

image
Les accents rouge vif donnent ici de l’énergie et du mouvement.

image
Le rouge sombre de ce site, associé avec des éléments grunge, évoque la couleur du sang.

image
Le rouge sombre, associé au blanc et au gris, donne une impression très élégante et professionnelle.

Orange (couleur secondaire)

image

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

image
La boîte de couleur orange claire attire l’attention sur son contenu, en dépit des autres éléments rouges sur la page.

image
Il est utilisé ici dans son incarnation la plus évidente, la représentation du feu.

image
Cet orange foncé, contrastant avec un vert citron, paraît presque neutre et pourrait être la couleur de base.

image
La couleur orange est utilisée ici pour donner une impression amicale et accueillante.

image
Les accents oranges ajoutent beaucoup d’intérêt visuel ici, et attirent l’attention sur le Call to Action.

Jaune (couleur primaire)

image

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

image
Le header jaune vif et les éléments graphiques utilisés dans l’ensemble de ce site donnent une sensation d’énergie et de positivité.

image
Le jaune clair est presque neutre dans ce header et, combiné avec les illustrations dessinées à la main, donne une impression très joyeuse.

image
Les accents jaunes vifs attirent l’attention sur les parties les plus importantes du site.

image
Le tournesol jaune vif évoque l’été, et combiné avec le jaune antique du background, il donne une sensation chaleureuse et stable.

image
Le header jaune ajoute une énergie supplémentaire à ce design.



Couleurs froides

image

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

image
Les verts sourds de ce site lui donnent un caractère stable et naturel.

image
Le header vert lumineux et le motif de feuille donnent une atmosphère naturelle et vibrante.

image
Le caractère naturel donné par ce vert olive convient parfaitement au contenu.

image
Les verts clairs de ce site et leur look rétro, lui donnent de la fraîcheur et de l’énergie.

image
Un autre site vert olive avec une atmosphère très naturelle.

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

image
Les bleus foncés donnent une sensation de stabilité, tandis que les bleus plus clairs et plus lumineux l’empêchent de tomber dans le sérieux.

image
Le bleu foncé donne à ce site une allure professionnelle, surtout lorsqu’il est combiné avec le blanc. Mais le bleu clair lui donne un intérêt supplémentaire.

image
Le bleu ciel lumineux donne à ce site un look jeune, renforcé par les accents rouges.

image
Ce site combine une variété de bleus qui lui donnent un côté rafraîchissant.

image
Le bleu clair, sourd, de ce site lui confère un caractère calme.

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

image
La nuance sombre utilisée ici évoque l’héritage royal du violet, tout à fait approprié pour la marque de luxe Asprey.

image
Les violets clairs et médium fonctionnent bien ici pour transmettre une impression de créativité.

image
Ici le violet tend plus vers le rouge, ce qui donne un look plus riche et énergique au site.

image
Le background violet foncé ajoute au côté créatif du site.

image
Les accents violets sombres de ce site apportent une sensation de luxe et de raffinement.



Les couleurs neutres

image

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

image

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

image
Les accents noirs, combinés aux couleurs vives et au background marron foncé donnent un look branchouille (à l’époque !) à ce design.

image
Le noir, associé à un bleu glacé, donne un aspect froid.

image
Mélangé avec des gris sombres et du vert citron dans un thème globalement grunge, le noir ajoute à la modernité du design.

image
Les accents noirs ajoutent ici une couche de sophistication et de modernité.

image
Les forts accents noirs de ce site lui donnent une sophistication supplémentaire.

Le blanc

image

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

image
Le blanc est utilisé ici pour contraster avec un bleu électrique.

image
Les backgrounds blancs sont très en vogue dans les designs minimalistes et offrent un bon contraste pour la typographie.

image
Ici, le blanc est utilisé comme couleur d’accentuation, ce qui donne globalement plus de lumière au site.

image
La combinaison du blanc et du gris donne un caractère doux à ce design.

image
Ici encore, le blanc utilisé comme background donne de la clarté à l’ensemble du design.

Le gris

image

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

image
Le gris clair donne un caractère très doux et calme à ce design.

image
Le background gris clair ajoute à la sensation de modernité (de 2010) créée par la typographie.

image
Un gris froid donne un côté moderne et sophistiqué à ce site.

image
Le background gris foncé et la typographie gris clair donnent un caractère moderne à ce design.

image
Un large spectre de nuances de gris contribue à donner un look sophistiqué et professionnel à ce site.

Le marron

image

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

image
Le gris-marron donne une sensation de responsabilité et de fiabilité.

image
Le marron-orange est ici à la fois terreux et fiable.

image
Le marron foncé utilisé en background donne une sensation de stabilité et de fiabilité à l’ensemble de la page, et laisse les éléments en couleur vive jouer les vedettes.

image
Woodgrain est un marron souvent utilisé, et dans ce cas la chaleur de ce marron ajoute un caractère amical à un site par ailleurs minimaliste.

image
Le background gris-marron confère stabilité et solidité.



Beige & Jaune orangé

image

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

image
Le background beige clair donne un côté jeune et frais en raison des couleurs vives qui l’entourent.

image
Le background beige clair ici a un côté plus conservateur et élégant.

image
Le background jaune orangé est rendu encore plus chaleureux grâce à l’utilisation abondante du marron et de l’orange à travers le site.

image
Le jaune orangé est largement utilisé comme texture papier d’emballage (américain) et dans sa forme grisée comme texture ciment ou pierre.

image
Le header beige et d’autres accents sur le site donnent un aspect raffiné et traditionnel à ce design.

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

image
Le background ivoire confère une chaleur tempérée par quelques couleurs plus froides.

image
Quelques accents orange-marrons donnent un peu de chaleur au background légèrement gris.

image
Le background couleur crème donne une élégance modeste dont ce site manquait.

image
Le thème antique présent dans tout le design de ce site est renforcé par le background crème.

image
L’ivoire combiné avec d’autres couleurs claires donnent ici une apparence élégante.

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 :


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

Ressources complémentaires en français


original paru le dans Smashing Magazine.

Sur l’auteur : 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.