# Harmonie tétradique : quatre couleurs en équilibre

[Canonical HTML page](https://gradiently.design/fr/guide/tetradic-colors)

Quatre couleurs, c’est l’harmonie classique la plus riche et la plus facile à rater. Le secret n’est pas de choisir les quatre teintes, ce qui est de l’arithmétique, mais de décider laquelle commande.

## The short version

- Une harmonie tétradique utilise quatre teintes disposées en deux paires complémentaires sur le cercle chromatique.
- La version rectangle associe deux teintes à 60 degrés l’une de l’autre avec leurs deux opposées ; la version carrée espace les quatre teintes de 90 degrés.
- Les palettes tétradiques sont riches et variées mais difficiles à équilibrer, car quatre teintes se disputent l’attention.
- Le schéma fonctionne quand une couleur domine, une seconde soutient, et que les deux restantes servent de petits accents.
- Atténuer ou assombrir certaines des quatre teintes rend une palette tétradique sophistiquée plutôt que criarde.

Une **harmonie tétradique** réunit quatre teintes qui forment deux paires complémentaires sur le cercle chromatique. Reliez-les par des lignes et vous dessinez un rectangle ou un carré, d’où les noms de schémas rectangle et carré. Comme elle contient des couleurs chaudes et froides des deux côtés du cercle, une palette tétradique est la plus fournie des harmonies classiques. C’est aussi celle qui risque le plus de paraître chaotique, sauf si vous laissez une couleur mener et gardez les trois autres à leur place.

## Harmonies tétradiques en rectangle et en carré

Les deux versions partent d’une teinte de base et ajoutent son complément, à 180 degrés. Elles diffèrent par l’emplacement de la seconde paire.

| Version | Teintes depuis la base | Caractère |
| --- | --- | --- |
| Rectangle, ou double complémentaire | 0, 60, 180 et 240 degrés | Deux voisines proches et leurs opposées ; plus facile à équilibrer |
| Carré | 0, 90, 180 et 270 degrés | Espacement parfaitement régulier ; le plus varié et le plus audacieux |

Les schémas rectangle ont une paire d’alliées naturelles de chaque côté, c’est pourquoi les designers commencent généralement par là.

- Cobalt: #1b3c7e
- Améthyste: #9d59c0
- Souci: #f0b642
- Fougère: #7dba5e

Un schéma rectangle : cobalt et améthyste, à 60 degrés l’un de l’autre, face au souci et à la fougère.

- Violet profond: #452277
- Rouge corail: #e25a66
- Feuille de lime: #95c059
- Sarcelle marin: #2e9e95

Un schéma carré : quatre teintes à 90 degrés, avec le violet approfondi pour qu’il serve de fond.

## Comment construire une harmonie tétradique

1. **Choisissez la teinte de base** Prenez la couleur dont dépendent votre marque ou votre création. Notez sa teinte en degrés, que donne tout sélecteur de couleur affichant la TSL.
2. **Ajoutez le complément** Ajoutez 180 degrés. Cette paire est l’ossature du schéma. [Les couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) expliquent pourquoi les opposées fonctionnent.
3. **Choisissez rectangle ou carré** Pour un rectangle, ajoutez 60 degrés à la base et au complément. Pour un carré, ajoutez 90 degrés à chacun.
4. **Donnez un rôle à chaque couleur** Une dominante, un soutien, deux accents. Notez-le pour que les rôles restent les mêmes dans toutes vos créations.
5. **Réglez luminosité et saturation** Assombrissez la dominante, adoucissez le soutien et gardez les accents les plus vifs. La teinte fixe l’harmonie ; la luminosité fixe la hiérarchie.

```css
:root {
  --h: 220; /* base hue */

  /* Rectangle scheme */
  --c1: hsl(var(--h) 65% 30%);
  --c2: hsl(calc(var(--h) + 60) 45% 55%);
  --c3: hsl(calc(var(--h) + 180) 85% 60%);
  --c4: hsl(calc(var(--h) + 240) 40% 55%);

  /* For a square scheme use +90, +180 and +270 instead */
}
```

La palette rectangle ci-dessus, générée à partir d’un seul nombre. La teinte HSL repasse d’elle-même au-delà de 360, vous n’avez donc jamais à soustraire.

## Pourquoi quatre couleurs sont difficiles à équilibrer

Avec deux couleurs, le contraste est simple. Avec quatre teintes fortes, l’œil ne sait pas où regarder d’abord, et chaque couleur semble crier plus fort que les autres. La plupart des créations tétradiques qui échouent donnent aux quatre couleurs une surface et une saturation à peu près égales. La solution est la hiérarchie, pas moins de couleurs.

Publication portrait d’événement pour un week-end ateliers ouverts avec une couleur de fond dominante et de petits accents

Une couleur mène le fond et les autres apparaissent par petites touches : un contenu chargé, un design calme.

Publication portrait en liste dans la même série, menée par une deuxième couleur du schéma à quatre couleurs

Une publication compagnon où une deuxième couleur de l’ensemble prend la tête, pour que la série paraisse liée sans se répéter.

Cette deuxième image montre la vraie force du schéma. Quatre couleurs offrent assez de variété pour toute une série : chaque publication peut être menée par un membre différent de la palette tandis que l’ensemble reste clairement uni. C’est idéal pour les carrousels, les menus et les programmes d’événements, où [la cohérence de marque](https://gradiently.design/fr/guide/brand-consistency) compte mais où la monotonie lasse.

## Où l’harmonie tétradique fonctionne le mieux

Quatre teintes méritent leur place quand un projet doit distinguer clairement plusieurs choses sans inventer de nouvelles couleurs à chaque fois. Une affiche seule en a rarement besoin. Un système, souvent.

- **Codage par catégorie :** un menu de café avec boissons, petit-déjeuner, déjeuner et gâteaux, chacun avec sa couleur.
- **Programmes d’événements :** quatre scènes, parcours ou jours que les visiteurs doivent distinguer d’un coup d’œil.
- **Graphiques et tableaux de bord :** quatre séries de données qui doivent rester distinctes, idéalement [vérifiées pour le daltonisme](https://gradiently.design/fr/guide/color-blindness-design) aussi.
- **Marques pour enfants et jeux :** là où la version pleine et vive de la palette est justement le but.
- **Campagnes saisonnières :** une teinte mène chaque trimestre de l’année, les autres en soutien.

Pour les proportions, partez de [la règle des 60 30 10](https://gradiently.design/fr/guide/60-30-10-rule) et partagez les dix derniers pour cent entre les deux accents. Sur un menu, par exemple, la couleur dominante remplit la page, la couleur de soutien marque les titres, et les deux accents repèrent les plats végétariens et les nouveautés.

## Donner de la sophistication à une palette tétradique

Les palettes tétradiques à pleine saturation ressemblent à une boîte à jouets, parfait pour un magasin de jouets et faux pour la plupart des autres. Tirez deux ou trois couleurs vers le gris ou vers le foncé, et les mêmes teintes paraissent réfléchies et adultes.

- Bleu ardoise: #24324c
- Bruyère: #a085ad
- Blé: #dfc590
- Sauge: #85a375
- Lin: #f6f2ea

Le schéma rectangle cobalt atténué : les mêmes teintes, désormais assez discrètes pour un hôtel, une librairie ou un mariage.

- Du cobalt à l’améthyste: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Du souci à la fougère: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Bruyère sur ardoise: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

Dans un schéma rectangle, fondez chaque paire à 60 degrés avec elle-même. Fondre vers une opposée traverse le gris ; voir [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients).

### À éviter

- Quatre teintes de surface et de luminosité égales
- Du texte dans une teinte vive posé sur une autre
- Un dégradé qui traverse les quatre
- Ajouter une cinquième teinte pour corriger l’équilibre

### À faire

- Une couleur dominante, environ 60 pour cent de la surface
- Un neutre pour le texte et l’espace
- Deux teintes atténuées, deux plus vives
- Faire tourner la couleur dominante au fil d’une série

Si quatre couleurs paraissent trop nombreuses, reculez à trois avec [les couleurs triadiques](https://gradiently.design/fr/guide/triadic-colors) ou [les couleurs complémentaires divisées](https://gradiently.design/fr/guide/split-complementary-colors), qui gardent un fort contraste avec une teinte de moins à gérer. Essayez ensuite la palette sur de vraies créations : dans Gradiently, les couleurs enregistrées dans un kit de marque (une fonction Pro) apparaissent en premier dans chaque sélecteur de couleur du Studio, si bien que chaque publication d’une série peut prendre une dominante différente.

## FAQ

### Qu’est-ce qu’une harmonie tétradique ?

Une palette de quatre teintes formée de deux paires complémentaires sur le cercle chromatique, dessinant un rectangle ou un carré.

### Quelle différence entre les harmonies rectangle et carrée ?

Un schéma rectangle utilise des teintes à 0, 60, 180 et 240 degrés ; un schéma carré les espace régulièrement de 90 degrés. Les rectangles sont généralement plus faciles à équilibrer.

### Tétradique et double complémentaire, est-ce pareil ?

Le schéma tétradique en rectangle est souvent appelé double complémentaire, car ce sont deux paires complémentaires proches l’une de l’autre.

### Quel est un exemple d’harmonie tétradique ?

Le cobalt `#1B3C7E`, l’améthyste `#9D59C0`, le souci `#F0B642` et la fougère `#7DBA5E` forment un schéma rectangle : cobalt et améthyste sont à 60 degrés l’un de l’autre, face au souci et à la fougère.

### Comment équilibrer une palette de quatre couleurs ?

Laissez une couleur dominer, donnez un rôle de soutien à une autre et gardez les deux dernières en petits accents. Atténuez ou assombrissez certaines teintes et ajoutez un neutre pour le texte.