Couleurs qui vont ensemble (ou pas): le guide ultime

Pas le temps de lire l’article maintenant? Choisis ton épingle préférée et passe le curseur (ou le doigt) dessus pour l’enregistrer dans un tableau Pinterest ⬇

Si tu t’intéresses un peu aux couleurs, tu sais probablement déjà dans les grandes lignes quelle couleur « signifie » quoi. Sauf que… allons droit au but: ça ne te dit pas pour autant quelles couleurs vont ensemble, et comment les combiner.

Comme je l’ai écrit à plusieurs reprises sur ce blog, savoir ce que signifie dans l’absolu chaque couleur prise séparément… ben, ça t’avance pas à grand-chose en fait.

C’est presque comme si la psychologie des couleurs des blogs lifestyle féminins ne t’apprenait rien sur l’utilisation concrète des couleurs… Dingue, non? 😁

Accroche-toi, on est parti(e)s pour un super voyage pédagogique à la découverte des secrets les mieux gardés de l’arc-en-ciel ! 🌈

Combiner des couleurs qui vont ensemble: le système qui permet d’éviter le faux-pas à coup sûr

Il existe plein de manières d’obtenir une palette de couleurs fonctionnelle à base de couleurs qui vont ensemble. Cependant, les règles d’harmonie des couleurs restent une valeur sûre! ^[1]Arora, Harshita. « An Intro to Color Theory: How to Combine Colors and Set the Mood of Your Designs ». Medium, 20 janvier 2018, … Continue reading

Voici les 5 grands types de combinaisons de couleurs qui fonctionnent à tous les coups (ou presque):

La combinaison monochromatique

Tu prends une (et une seule couleur), par exemple du rouge… et c’est à peu près tout.

(Qui a dit que ça devait forcément être compliqué??)

Après tout, quelles couleurs vont mieux ensemble que la même couleur déclinée en plusieurs versions? Dès que tu as besoin de varier, il te suffit de foncer, éclaircir ou (dé)saturer ta couleur de base.

Parce qu’elle est simple, cette combinaison est sobre, classique… mais aussi potentiellement ennuyeuse.

Elle fonctionne particulièrement bien pour les marques qui veulent mettre l’accent sur les produits qu’elles vendent (mode, ecommerce, art, etc.).

Après, il y a toujours des exceptions. Cette combinaison, où tout repose sur les qualités propres à la couleur de base, en est le parfait exemple. Si ta couleur de base sort du commun, la palette qui en résultera sera tout aussi exceptionnelle! ✨

⬆ ci-dessus, la superbe palette monochromatique de PayPal (clique directement sur une couleur pour récupérer son code!)

La combinaison analogue

Avec la combinaison monochromatique, on a sélectionné une couleur et sa famille.

Maintenant, on va introduire un peu de diversité en aller voir du côté des voisines de notre couleur.

Les deux grandes catégories de palettes analogues sont les suivantes:

• les froides (violet, bleu, vert) 💜💙💚
• les chaudes (rouge, orange, jaune) 💗🧡💛

Après, dans les faits, il existe évidemment bien plus que deux possibilités de combinaisons de couleurs analogues… encore heureux! D’ailleurs, rien ne nous empêche de combiner des couleurs froides et chaudes, comme du rouge, du violet et du bleu.

C’est une alternative intéressante à l’option « tout monochrome », si la teinte unique ne fonctionne pas avec le concept qu’on veut développer.

Il s’agit de la combinaison la plus fréquente dans la nature. Et si Mère Nature herself l’approuve, pourquoi s’en priver? Pour une marque basée sur l’écologie ou le développement personnel, il se peut qu’elle fonctionne encore mieux qu’un simple camaïeux…

Les palettes analogues étant composées à partir de teintes proches, elles donnent un sentiment d’harmonie et de subtilité. Attention quand même à bien établir une couleur dominante et à ne pas assortir des couleurs trop proches! (pas deux bleus ciel quasiment identiques, par exemple…)

⬆ ci-dessus, la célèbre palette analogue aux teintes automnales de Mastercard (clique directement sur une couleur pour récupérer son code!)

La combinaison complémentaire

Changement d’ambiance: ici, on est dans la rupture radicale! 🤘

Il s’agit de prendre 2 teintes opposées sur le cercle chromatique (des couleurs complémentaires, donc). L’une de ces teintes sera une couleur dominante. L’autre, une couleur tonique (cf. mon guide de création de palettes).

L’impression qui se dégage ici est un sentiment d’énergie et de force, sans fioritures.

C’est une combinaison qui donne des palettes « brutes », pas forcément très raffinées. Cela dit, elles font le job et leur efficacité n’est plus à prouver.

⚠ Pense à désaturer l’une des deux couleurs pour éviter un pénible effet optique du plus mauvais goût! (j’y reviendrai plus loin)

⬆ le moins qu’on puisse dire, c’est que questions couleurs, la marque 7up ne fait pas dans la dentelle. (clique directement sur une couleur pour récupérer son code!)

Variation N°1: la complémentaire-analogue (ou complémentaire- adjacent)

Si tu aimes vraiment beaucoup les couleurs, mais que pour toi, un duel au sommet, c’est trop simple, celle-ci peut t’intéresser. 🧐

L’idée est de partir d’un duo de couleurs complémentaires (par exemple, le orange et le cyan). Choisis l’une des deux couleurs, et remplace-la par les deux couleurs qui l’entourent sur le cercle chromatique.

Par exemple, mettons que tu enlèves le cyan:

Tu pourras alors faire cohabiter le orange avec du bleu marine et du vert… Comme l’a fait la marque Fanta:

L’intérêt de cette harmonie, c’est qu’elle garde la cohérence d’une palette monochromatique ou analogue tout y ajoutant un grain de folie. Un bon compromis, donc, qui fonctionne avec à peu près tous les types de business.

Variation N°2: la double complémentaire (ou tétradique)

Pour la complémentaire-analogue, on viré une seule couleur pour la remplacer par les deux voisines. Ici, on fait pareil, mais pour les deux couleurs complémentaires.

En un sens, ce type de combinaison s’apparente à une forme de compromis. Elle permet de taper largement dans toutes les sections du cercle chromatique, et de s’en donner à cœur joie sur les contrastes de couleurs chaudes et froides.

Le revers de la médaille, c’est qu’elle peut servir d’excuse aux personnes qui ont mal défini l’atmosphère qu’elles voulaient transmettre. Dans ce cas, elle pourrait faire office de prétexte pour récupérer un peu tout et n’importe quoi sur le cercle chromatique. 😅

Si c’est ton cas, je t’arrête tout de suite : ce n’est pas comme ça que ça marche ! 🙅‍♀️

Désolée, mais si tu tiens à utiliser une palette tétradique, il va quand même falloir faire des choix.

Toutes les couleurs ne pourront pas occuper la même place… Autrement, elles sèmeraient le chaos dans ton identité visuelle et tes images. On n’aurait pas des couleurs qui vont ensemble, mais des couleurs qui se battent entre elles! 😱

Comme pour les autres harmonies, je te recommande de choisir une couleur dominante, et de laisser les autres s’occuper de souligner les détails.

Après, il faut garder en tête que ces schémas de couleurs qui vont ensemble ne sont que des suggestions. D’ailleurs, d’autres méthodes peuvent être utilisées en complément ou en remplacement, comme le système Colour Affects basé sur les couleurs des 4 saisons.

⬆ le fait que la palette de Google soit fonctionnelle tient presque du miracle. (clique directement sur une couleur pour récupérer son code!)

Comment savoir si des couleurs ne vont pas ensemble?

Quand bien même tu t’efforcerais de suivre ces règles d’harmonisation à la lettre, tu n’es jamais à l’abri d’un problème de couleurs qui ne vont pas ensemble… Comment reconnaître (et éviter) ces cas de figure?

Il existe principalement 5 façons de foirer une combinaison de couleurs. Passons-les en revue:

1️⃣ Forcer le rapprochement entre des couleurs naturellement hostiles

D’une certaine façon, les couleurs sont comparables à des personnes. Elles ont leur caractère, leurs environnements de prédilection, leurs qualités, leurs défauts. Et puis aussi, elles ne s’entendent pas avec tout le monde.

Je sais qu’on dit que les goûts et les couleurs ne se discutent pas, mais il existe au moins une situation où la faute de goût est aussi indéniable qu’inexcusable:

Les combinaisons de couleurs sujettes aux « effets de vibration ».^[2]« Why You Should Avoid Vibrating Color Combinations ». Web Design Envato Tuts+, https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations–cms-25621. … Continue reading

Si tu as peur de mal combiner les couleurs, tu seras peut-être rassuré(e) d’apprendre que des couleurs engagées dans un conflit armé produisent un effet optique reconnaissable entre mille.

Jette un oeil à cette combinaison (notamment à l’endroit où les deux couleurs se touchent):

Jusque là, tout va bien. Maintenant, regarde celle-ci:

En principe, tu devrais avoir du mal à distinguer la limite entre les deux couleurs, qui produisent une sorte d’effet psychédélique dérangeant. C’est ça que je veux dire par « effet de vibration ».

Pour une personne à la vision normale, cet effet est désagréable. Pour une personne ayant un trouble de la perception des couleurs (un(e) daltonien(ne), par exemple), c’est carrément handicapant. Si je prends ma « combinaison vibrante » et que je la passe en noir et blanc, voilà ce que ça donne:

Hé ouais, la luminosité est strictement identique! Autrement dit, quelqu’un qui aurait des problèmes de perception des teintes ne verrait presque aucune différence. Par comparaison, voici à quoi ressemble la combinaison « non vibrante »:

Outre le côté purement esthétique, un changement de couleur doit avant tout permettre de faciliter la transmission des informations. Or, dans le cas d’une combinaison « vibrante », cette fonction est sévèrement compromise par le manque de contraste.

Heureusement, c’est assez simple d’éviter de succomber aux sirènes criardes de l’effet vibratoire. 〰🤢〰

Garde simplement en tête que plus tes couleurs seront distantes les unes des autres sur le cercle chromatique (par exemple, dans une combinaison de couleurs complémentaires), plus tu devras faire attention à varier leur luminosité et leur saturation pour les différencier.

Redouble particulièrement de vigilance lorsque tu manies du rouge…

Et d’autant plus lorsque tu envisages d’associer le rouge avec du bleu ou du vert (c’est là où le contraste est le plus faible).

2️⃣ Avoir peur de toucher au cercle chromatique

Le problème que je voudrais aborder maintenant est finalement assez proche du précédent.

L’effet vibratoire dont je te parlais est une erreur typique de débutant(e) (même si, en réalité, personne n’y est jamais parfaitement immunisé). Souvent, il survient lorsque l’on hésite à manipuler tous les paramètres de la couleur.

Le premier réflexe, quand on n’est pas familiarisé(e) avec le maniement du cercle chromatique, c’est de changer la teinte (la « famille » de couleurs: rouges, bleus, etc.) pour diversifier la palette.

L’ennui, c’est que les variations de teinte, à elles seules, permettent rarement de dénicher les couleurs qui vont le mieux ensemble.

Le résultat?

Une variation chromatique superficielle, qui complexifie inutilement la palette.

Pour rappel, voici les deux autres paramètres qu’il est important de varier:

• La luminosité (aussi appelée « valeur »). Avec une luminosité maximale, une couleur devient blanche. Avec une luminosité à zéro, la même couleur devient noire. Typiquement, une personne lambda se cantonne à des valeurs intermédiaires, ce qui tend à donner des résultats un peu ennuyeux. N’hésite pas à introduire dans tes combinaisons de couleurs des nuances proches du blanc ou du noir!
• La saturation. Une couleur que l’on désature tend vers le gris. La plupart des gens trouvent les couleurs moyennement ou faiblement saturées plutôt ennuyeuses, et de fait, une erreur récurrente chez les débutant(e)s consiste à ne sélectionner que des couleurs ultra saturées. Grossière erreur! ❌

Il faut de tout pour faire un monde, et c’est vrai aussi pour une palette de couleurs.

Se limiter au seul paramètre de la teinte revient à penser en 1 ou 2D, alors qu’une bonne palette se pense en 3D.

N’aie pas peur d’explorer toutes les possibilités et dimensions offertes par le cercle chromatique:

Tes combinaisons n’en seront que plus audacieuses et créatives !

Petite astuce:

Si possible, essaie d’incorporer dans tes combinaisons au moins une couleur de chacune de ces catégories ⬇

• moyennement ou hautement saturée
• faiblement saturée
• neutre claire (blanc, beige…)
• neutre foncée (noir, brun…)

Pour les autres couleurs, tu peux choisir des valeurs et des degrés de saturation moyens.

3️⃣ Négliger l’équilibre de la palette

La notion d’équilibre ou de déséquilibre est partiellement subjective. Cela dit, on peut au moins s’accorder à dire qu’une palette qui penche trop dans un sens ou dans l’autre (trop foncée, trop saturée…) manque d’équilibre. 🤸‍♀️

A noter que ce n’est pas forcément une mauvaise chose en soi. Un déséquilibre suggère une prise de position extrême qui peut convenir à certains types de marques.

Par exemple, les marques revendiquant une appartenance à une culture underground s’accommodent volontiers de combinaisons de couleurs plus flashy ou sombres.

Des marques « innocentes » et liées au monde de l’enfance, a contrario, seraient mieux servies par des palettes uniformément pastelles ou lumineuses. Tout dépend de l’objectif recherché.

Dans bien des cas, cependant, il est judicieux de chercher à rétablir l’équilibre. Comment faire?

Et bien, exactement comme en cuisine !

Mettons que ton plat soit trop épicé. La bonne pratique, dans cette situation, est de rajouter quelque chose de doux, sucré, et plutôt frais, comme du yaourt ou du miel. 👩‍🍳

Concrètement, pour améliorer une palette « bancale », voici trois solutions que tu peux essayer:

• Identifier de quel « côté » penche la palette (trop de couleurs vives? de couleurs claires?…) et rajouter une ou plusieurs couleurs avec l’effet inverse. Si la palette comporte déjà pas mal de couleurs, il peut être intéressant d’enlever une des couleurs responsables du déséquilibre plutôt que d’en rajouter.
• Remplacer certaines couleurs « riches » par des couleurs neutres (blanc, gris, noir, brun). Le gris, notamment, et bien qu’étant peu flatteur lorsqu’utilisé seul, est particulièrement utile pour mettre en valeur une « vraie » couleur. Parfait pour recentrer une combinaison sur la ou les couleur(s) vraiment importante(s)!
• Modifier les proportions des couleurs de la palette. En règle générale, plus une couleur est voyante, moins elle devra occuper de place dans une combinaison. Inversement, il est de bon goût d’utiliser des couleurs plus discrètes pour des larges surfaces.

4️⃣ Ne pas penser au contexte d’utilisation

Associer des couleurs qui vont ensemble, c’est bien, mais encore faut-il replacer la combinaison de couleurs dans son contexte!

A l’ère du Big Data et de l’infobésité, il est d’usage de percevoir le monde en termes de données ou d’informations. Les couleurs n’y échappent pas: elles constituent des données informationnelles à part entière!

Les couleurs vives et saturées, en particulier, sont chargées d’un important « poids informationnel » comparé à des couleurs plus neutres.

Or, plus une palette est chargée en « poids informationnel », plus elle accapare l’attention… au détriment, donc, du contenu.

Typiquement, on observe beaucoup ce phénomène sur les sites Internet. Plus un site est chargé en contenus multimédias, plus la quantité de couleurs à haute densité informationnelle doit être réduite. L’objectif: garder l’internaute captif du contenu en évitant de gaspiller son attention ailleurs…

Amazon ou Netflix, pour ne citer qu’eux, ont bien compris la leçon. Pour leur interface, elles s’en tiennent à une seule couleur vive (jaune ou rouge) et font la part belle à des couleurs neutres (blanc ou noir).

Les marques dont le contenu est très visuel (portfolio d’artiste, e-commerce, mode…) devraient éviter les palettes trop complexes type tétradiques. Dans ce cas de figure précis, je recommande de privilégier les palettes monochromatiques ou analogues, et de miser sur une large majorité de teintes neutres.

5️⃣ Oublier que les couleurs ont eu une vie avant toi!

Si je te montre une combinaison de rouge et de vert avec une pointe de blanc et de doré, à quoi penseras-tu en premier? A tes dernières vacances au Cap d’Agde 🏖, ou au Père Noël 🎅?

Et si je te présente une palette à base de bleu roi bien vif et de blanc, à quelle destination touristique de rêve penseras-tu en premier? (Personnellement, je pense instantanément à la Grèce, et plus particulièrement à l’île de Santorin…)

L’Histoire de la combinaison des couleurs est aussi riche que solidement ancrée dans notre inconscient collectif. Je sais que c’est frustrant, mais des tas de gens avant toi (quand ce n’est pas la nature elle-même) ont planté leur drapeau sur certaines combinaisons de couleurs… Au sens propre comme au sens figuré, d’ailleurs.

Peut-être que tu voudrais utiliser une combinaison de jaune vif et de noir d’encre pour ton application de méditation-yoga-relaxation, mais malheureusement, tu ne peux pas faire comme si la nature n’avait pas déjà attribué cette combinaison à toutes sortes de bestioles venimeuses potentiellement mortelles. 🐝

Depuis le temps que les couleurs existent, tu penses bien que, d’une manière ou d’une autre, on a déjà passé en revue (et exploité) toutes les combinaisons de couleurs qui vont ensemble…

Ca ne veut pas dire que tu ne puisses pas créer ton propre sens, mais tu dois garder en tête qu’il est impossible d’ignorer totalement les connotations préexistantes.

Les couleurs qui vont ensemble s’influencent mutuellement

Le sujet du sens associé aux couleurs prises individuellement (rouge pour l’amour ou la colère, jaune pour la joie ou la maladie, etc.) a déjà été traité en long, en large et en travers sur tout le web. ^[3]Psychologie des couleurs : comment les couleurs nous affectent-elles ?https://blog.cognifit.com/fr/psychologie-des-couleurs/. Consulté le 8 janvier 2022. ^[4]Obberghen, Pierre Van. « Découvrez les mystères de la symbolique des couleurs ! » Institut de la Couleur, https://www.color-institute.com/000-douze-couleurs-cercle-chromatique.html. … Continue reading

En revanche, ce qu’on oublie souvent, c’est que les combinaisons de couleurs qui vont ensemble génèrent leur propre sens. D’une certaine façon, elles constituaient elles-mêmes des couleurs à part entière.

Astuce: tape le nom des couleurs de la combinaison que tu veux tester dans un moteur de recherche d’images (genre Google Images ou Pinterest), et regarde quel genre d’illustrations ressortent. La première page devrait te donner un aperçu assez pertinent de comment une personne lambda perçoit telle ou telle combinaison de couleurs.

Spécifique > Général

En psychologie des couleurs, une règle importante à retenir, c’est que les sens les plus spécifiques écrasent les sens les plus généraux. Si je puis me permettre une comparaison des plus geekesques, c’est un peu comme en CSS. 🤓

En clair, ça veut dire que si ton domaine d’activité génère ses propres codifications en matières de combinaison des couleurs, ces significations écraseront en partie les connotations plus « grand-public » des couleurs concernées.

C’est la raison pour laquelle, en psychologie des couleurs, il vaut mieux s’intéresser en premier aux significations imposées par le contexte…

Le mot de la fin

Ainsi s’achève ce panorama des couleurs qui vont ensemble. J’espère que ça t’aura appris 2-3 trucs utiles pour créer des combinaisons de couleurs en marketing… et que tu arrêteras de créer des visuels à base de rouge et de vert fluo. 🤬

Enfin, par honnêteté intellectuelle, je me dois de préciser qu’il y a bel et bien un contexte dans lequel tu peux sans problème ignorer tout ce que je viens te dire:

Un contexte sadistico-humoristico-parodique.

Ton voisin que tu détestes secrètement veut que tu réalises les affiches de la fête des voisins qui l’organise? Plombe sa réunion de voisinage en toute subtilité en te lâchant sur les couleurs flashy et les alliages chromatiques de mauvais goût.*

Tu veux te moquer de la police Comic Sans MS? C’est le moment de libérer ton plus mauvais goût. Comic Sans MS mérite bien ça.

*Seulement si tu es une personne horrible, évidemment. Pixeliart ne cautionne pas un tel comportement et décline toute responsabilité en cas de mauvais usage des informations exposées. Un grand pouvoir implique de grandes responsabilités, non mais !