# L’harmonie des couleurs : pourquoi certaines vont ensemble [Canonical HTML page](https://gradiently.design/fr/guide/color-harmony) Le cercle chromatique offre six accords classiques. Ils aident, mais ne font que la moitié de l’harmonie. L’autre moitié tient à la clarté, à la saturation et à la quantité de chaque couleur. ## The short version - L’harmonie des couleurs est la qualité d’un ensemble de couleurs qui semblent faites pour aller ensemble. - Les six harmonies classiques sont monochrome, analogue, complémentaire, complémentaire divisée, triadique et tétradique, chacune définie par des positions sur le cercle chromatique. - Les relations de teinte ne suffisent pas à garantir l’harmonie : les couleurs ont aussi besoin d’un bon étagement de clarté et d’une saturation maîtrisée. - Une couleur dominante accompagnée de petites quantités des autres paraît presque toujours plus harmonieuse que des quantités égales de chaque couleur. - Des couleurs qui partagent une sous-tonalité, comme une pointe de chaleur ou une trace de la même teinte, paraissent apparentées même quand elles sont éloignées sur le cercle. **L’harmonie des couleurs** est l’impression qu’un groupe de couleurs forme un tout. Les designers la construisent en général de deux façons : en choisissant des teintes liées par une relation connue sur le cercle chromatique, voisines ou opposées par exemple, et en équilibrant tout le reste, c’est-à-dire la clarté, la saturation et la place de chaque couleur. Réussissez la première et ratez la seconde, le résultat détonne encore. Réussissez les deux, et même des associations inattendues paraissent calmes et voulues. ## Le cercle chromatique et pourquoi il aide Le cercle dispose les teintes en rond pour que les relations deviennent de la géométrie. Les voisines partagent beaucoup de la même lumière et se fondent en douceur ; les opposées n’ont rien en commun et se font paraître mutuellement plus intenses. Chaque harmonie classique est une forme posée sur le cercle. Si le cercle lui-même est nouveau pour vous, commencez par [le cercle chromatique](https://gradiently.design/fr/guide/color-wheel). Un cercle chromatique: `conic-gradient(from 0deg, #e64545, #e6a645, #c8e645, #45e66a, #45e6d4, #4596e6, #6a45e6, #d445e6, #e64545)` Des teintes d’intensité modérée disposées en cercle. Chaque harmonie ci-dessous est un motif de points sur cet anneau. ## Les six harmonies de couleurs classiques Voici chaque accord construit à partir de la même base bleu canard, `#30a69c`, pour voir comment la relation change l’ambiance alors que la couleur de départ reste la même. - Monochrome: `linear-gradient(90deg, #d7f4f1 0% 25%, #88ddd6 25% 50%, #30a69c 50% 75%, #1d635d 75% 100%)` - Analogue: `linear-gradient(90deg, #30a661 0% 33.3%, #30a69c 33.3% 66.6%, #3075a6 66.6% 100%)` - Complémentaire: `linear-gradient(90deg, #30a69c 0% 50%, #a6303a 50% 100%)` - Complémentaire divisée: `linear-gradient(90deg, #30a69c 0% 33.3%, #a63075 33.3% 66.6%, #a66130 66.6% 100%)` - Triadique: `linear-gradient(90deg, #30a69c 0% 33.3%, #9c30a6 33.3% 66.6%, #a69c30 66.6% 100%)` - Tétradique: `linear-gradient(90deg, #30a69c 0% 25%, #6130a6 25% 50%, #a6303a 50% 75%, #75a630 75% 100%)` Chaque bande montre les teintes de l’accord à saturation égale. Remarquez comme les accords deviennent plus bruyants à mesure que les teintes s’écartent. | Harmonie | Teintes sur le cercle | Impression | Difficulté principale | | --- | --- | --- | --- | | Monochrome | Une teinte, plusieurs paliers de clarté | Calme, raffinée, unifiée | Éviter la platitude | | [Analogue](https://gradiently.design/fr/guide/analogous-colors) | Trois voisines, à environ 30 degrés | Naturelle, chaude ou froide, facile | Obtenir assez de contraste | | [Complémentaire](https://gradiently.design/fr/guide/complementary-colors) | Deux opposées, à 180 degrés | Audacieuse, énergique | Empêcher les couleurs de s’affronter | | Complémentaire divisée | Une base et les deux voisines de son opposée | Vive mais plus douce que la complémentaire | Choisir quelle couleur mène | | [Triadique](https://gradiently.design/fr/guide/triadic-colors) | Trois teintes, à 120 degrés | Ludique, équilibrée | Paraître enfantine à pleine intensité | | [Tétradique](https://gradiently.design/fr/guide/tetradic-colors) | Deux paires complémentaires | Riche, complexe | Faire tenir quatre couleurs ensemble | Chaque accord a son propre article, avec codes et exemples. Pour choisir, une règle approximative : moins les teintes sont nombreuses et plus elles sont proches, plus l’harmonie est facile à atteindre. Les accords monochromes et analogues se gèrent presque seuls. Les accords complémentaires, triadiques et tétradiques donnent plus d’énergie mais demandent plus de rigueur sur les trois points suivants. ## L’harmonie, c’est aussi la clarté et la saturation Regardez la bande triadique ci-dessus. Les teintes sont conformes au manuel, mais à intensité égale elles ressemblent à un coffre à jouets. C’est que le cercle ne décrit que la teinte. Deux autres propriétés décident si les couleurs vont vraiment bien ensemble. - **La clarté :** un ensemble harmonieux couvre en général des valeurs claires, moyennes et sombres. Cinq couleurs de même clarté se confondent ; un étagement donne à l’œil un endroit où se poser et quelque chose à lire. - **La saturation :** gardez la plupart des couleurs calmes et laissez-en une seule vive. Quand toutes sont à pleine intensité, elles rivalisent et l’ensemble se lit comme du bruit. - **Une sous-tonalité commune :** des couleurs qui tirent toutes un peu vers le chaud, ou portent toutes une trace de la même teinte, paraissent apparentées même éloignées sur le cercle. Ajouter un peu de votre couleur principale aux neutres est le moyen le plus rapide d’y parvenir. - Blanc canard #edf3f2: #edf3f2 - Canard clair #88ddd6: #88ddd6 - Bleu canard #30a69c: #30a69c - Encre canard #122b29: #122b29 - Accent corail #e0525d: #e0525d Un accord complémentaire apprivoisé : le bleu canard mène en quatre paliers de clarté, les neutres en portent une trace, et le rouge opposé devient un unique accent corail. Pour faire ces réglages en chiffres, utilisez un format qui sépare la clarté de la teinte. HSL est le choix familier ; [OKLCH](https://gradiently.design/fr/guide/oklch-explained) garde mieux la clarté constante quand vous changez de teinte, ce qui rend les accords équilibrés bien plus faciles à construire. ## La proportion : laissez une couleur mener La plus grande différence entre une création harmonieuse et une création chaotique tient souvent à la proportion, pas à la teinte. Des quantités égales de deux ou trois couleurs font rebondir l’œil de l’une à l’autre. Une couleur dominante, une couleur d’appui et un petit accent lui donnent une hiérarchie à suivre. La [règle 60 30 10](https://gradiently.design/fr/guide/60-30-10-rule) est une bonne répartition de départ. ### Détonne - Des surfaces égales pour chaque couleur - Toutes les couleurs à pleine saturation - Toutes les couleurs à la même clarté - Des gris purs à côté de couleurs chaudes - Des opposées qui se touchent sur de longs bords ### S’harmonise - Une couleur nettement dominante - Un accent vif, le reste plus calme - Un étagement du clair au foncé - Des neutres teintés de la couleur principale - Des opposées séparées par de l’espace ou un neutre Une publication Instagram au format portrait annonçant un atelier de céramique ouvert samedi, sur un fond en dégradé Un Mark : observez quelle couleur mène, quelle part du cadre elle couvre et où reposent les mots. La même publication d’atelier ouvert sur un second fond en dégradé, d’une autre famille de couleurs Un second Mark avec les mêmes mots. La relation des couleurs change l’ambiance ; le message reste le même. ## Construire une palette harmonieuse en pratique 1. **Partez d’une couleur qui a du sens** Une couleur de marque, un produit, un lieu. L’harmonie se construit plus facilement autour d’un point fixe qu’à partir de rien. 2. **Choisissez une relation selon l’ambiance** Analogue pour le calme, complémentaire ou complémentaire divisée pour l’énergie, monochrome pour la retenue. 3. **Étagez la clarté et calmez la saturation** Créez une version claire, une moyenne et une sombre, puis baissez la saturation de tout sauf de l’accent. 4. **Fixez les proportions** Décidez quelle couleur couvre l’essentiel de l’espace, laquelle l’appuie et laquelle n’apparaît que par petites touches. 5. **Testez avec de vrais mots** Placez la palette sur une vraie mise en page et vérifiez le contraste du texte. Une harmonie qui ne peut pas porter un titre n’est pas terminée. Si vous préférez partir d’une palette déjà équilibrée, chaque Mark Gradiently est un fond vivant abouti dont les couleurs, les matières et la lumière ont été composées ensemble, et le Studio y pose vos mots tandis que l’encre automatique choisit un texte clair ou foncé pour chaque ligne. Pour générer la vôtre de zéro, voyez [les générateurs de palettes de couleurs](https://gradiently.design/fr/guide/color-palette-generator). ## FAQ ### Qu’est-ce que l’harmonie des couleurs ? C’est la qualité de couleurs qui semblent faites pour aller ensemble, obtenue en général par des relations de teinte sur le cercle chromatique, associées à un équilibre de clarté, de saturation et de proportion. ### Quels sont les types d’harmonie des couleurs ? Les six classiques sont monochrome, analogue, complémentaire, complémentaire divisée, triadique et tétradique. ### Quelle harmonie de couleurs est la plus facile à utiliser ? Les accords monochromes et analogues, car leurs teintes sont proches et détonnent rarement. Ils ont besoin d’un bon étagement de clarté pour ne pas paraître plats. ### Pourquoi mes couleurs complémentaires s’affrontent-elles ? En général, les deux sont à pleine saturation et en quantités égales. Laissez l’une dominer, calmez l’autre en accent et séparez-les par un neutre.