# Couleurs complémentaires : un contraste qui reste équilibré

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

Les couleurs opposées offrent le plus fort contraste possible, et le chemin le plus court vers un design qui vibre ou qui crie. La différence tient à la proportion et à la luminosité.

## The short version

- Les couleurs complémentaires sont des paires diamétralement opposées sur le cercle chromatique, comme le bleu et l’orange.
- Côte à côte, à pleine intensité et à luminosité proche, les couleurs complémentaires semblent vibrer sur leur bord commun.
- La façon la plus fiable de les employer est de laisser l’une dominer et d’utiliser l’autre en petit accent.
- Changer la luminosité ou la saturation d’une des deux couleurs garde le contraste tout en supprimant le heurt.
- Un dégradé direct entre deux complémentaires tend à virer au gris au milieu, ce que corrigent une couleur intermédiaire ou l’interpolation en OKLCH.

Les **couleurs complémentaires** sont deux teintes diamétralement opposées sur le cercle chromatique, comme le bleu et l’orange, le rouge et le vert, ou le jaune et le violet. Chacune fait paraître l’autre plus intense : c’est pourquoi les paires complémentaires donnent le plus fort contraste de couleur disponible. Bien employé, ce contraste rend un élément impossible à manquer. Employé à parts égales et à pleine intensité, il rend un design pénible à regarder.

Les paires qui comptent comme complémentaires dépendent du cercle. Le cercle du peintre associe le bleu à l’orange ; celui de l’écran associe le bleu au jaune. Le guide du [cercle chromatique](https://gradiently.design/fr/guide/color-wheel) explique la différence. Les paires ci-dessous sont celles que les designers emploient le plus.

## Paires de couleurs complémentaires, avec les codes

| Paire | Couleur A | Couleur B | Ambiance |
| --- | --- | --- | --- |
| Bleu et orange | `#1d4ed8` | `#f97316` | Énergique, sportive, nette |
| Marine et or | `#1e3a8a` | `#d4a017` | Classique, établie |
| Rouge et vert | `#b91c1c` | `#15803d` | Festive, naturelle, forte |
| Violet et jaune | `#6d28d9` | `#facc15` | Ludique, électrique |
| Sarcelle et corail | `#0f766e` | `#fb7185` | Fraîche, chaleureuse, moderne |
| Prune et sauge | `#581c87` | `#a3b18a` | Sourde, éditoriale |

Six paires d’opposées. Les trois dernières décalent luminosité et saturation, d’où leur douceur.

- Bleu: #1d4ed8
- Orange: #f97316
- Sarcelle: #0f766e
- Corail: #fb7185
- Prune: #581c87
- Sauge: #a3b18a

Trois des paires en pastilles, chaque couleur à côté de son opposée.

## Pourquoi les couleurs complémentaires vibrent

Placez côte à côte deux complémentaires de luminosité proche et de pleine saturation : la frontière entre elles semble scintiller. L’œil ne parvient pas à décider où l’une s’arrête. L’effet est le plus fort avec le rouge et le vert ou le bleu et l’orange à intensité égale, et il rend très difficile la lecture d’un texte d’une couleur sur l’autre.

- Force égale : vibre: `repeating-linear-gradient(90deg, #e0282e 0px, #e0282e 24px, #1f9d55 24px, #1f9d55 48px)`
- Rouge sombre, vert pâle : calme: `repeating-linear-gradient(90deg, #7f1d1d 0px, #7f1d1d 24px, #bbf7d0 24px, #bbf7d0 48px)`

Les mêmes deux teintes. Les séparer en luminosité arrête le scintillement et rend le contraste utilisable.

La solution n’est presque jamais de changer les teintes. Rendez l’une beaucoup plus sombre ou plus claire, ou bien moins saturée. La paire reste complémentaire, mais le bord cesse de se battre. Cela règle aussi la lisibilité, car un texte a besoin de contraste de luminosité plus que de contraste de teinte ; voyez le [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility).

## Utiliser les couleurs complémentaires : l’une mène, l’autre accentue

L’approche la plus fiable est de donner à une couleur l’essentiel de l’espace et à l’autre un petit rôle important : un bouton, un prix, un seul mot, un autocollant. L’accent attire l’œil parce qu’il est le seul de son espèce. À moitié-moitié, en revanche, on divise l’attention et cela paraît rarement voulu.

Fond marine, accent orange: `linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)`

Environ 90 % de marine pour 10 % d’orange. La petite zone orange pèse bien plus que sa taille.

- **Couleur dominante :** fonds, grandes formes, l’essentiel de la surface. En général la plus sombre ou la plus discrète de la paire.
- **Couleur d’accent :** appels à l’action, mises en avant, un chiffre clé. En général la plus vive.
- **Neutres :** presque blanc, presque noir ou gris chaud pour laisser de l’air aux deux. Peu de bons designs complémentaires n’ont que deux couleurs.
- **Repère de proportion :** la [règle des 60-30-10](https://gradiently.design/fr/guide/60-30-10-rule) est un bon point de départ, avec la complémentaire pour les 10.

## Des dégradés complémentaires sans milieu gris

Mélangez directement deux complémentaires et le point médian vire au gris ou au brun. Dans l’espace colorimétrique sRGB que la plupart des outils emploient, les valeurs de rouge, vert et bleu de deux opposées font une moyenne proche du neutre. C’est l’une des [erreurs de dégradé](https://gradiently.design/fr/guide/gradient-design-mistakes) les plus courantes.

- Direct : gris au milieu: `linear-gradient(90deg, #1d4ed8 0%, #f97316 100%)`
- Via le magenta : reste vif: `linear-gradient(90deg, #1d4ed8 0%, #c026d3 50%, #f97316 100%)`
- OKLCH : fait le tour du cercle: `linear-gradient(in oklch 90deg, #1d4ed8 0%, #f97316 100%)`
- Mélange court : moins de gris visible: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 30%, #f97316 70%, #f97316 100%)`

Quatre façons de relier le bleu et l’orange. Seule la première laisse voir la zone morte au milieu du champ.

Les deux meilleures corrections sont un arrêt intermédiaire d’une teinte située entre les deux et l’interpolation en OKLCH, qui contourne le cercle chromatique au lieu de le traverser. Les [dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) et les [dégradés OKLCH en CSS](https://gradiently.design/fr/guide/css-gradient-oklch) expliquent les deux en détail.

## Où les palettes complémentaires fonctionnent le mieux

Les complémentaires conviennent aux travaux qui doivent être remarqués vite et lus à distance. Elles conviennent moins à la lecture longue, aux intérieurs calmes ou à tout ce qui doit paraître silencieux, où les [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors) font mieux.

- **Appels à l’action.** Un bouton chaud sur une page froide, ou l’inverse, est l’usage classique. On le trouve sans chercher.
- **Sport et événements.** Maillots, affiches et billets utilisent des couleurs opposées parce qu’elles se lisent d’un bout à l’autre d’un stade ou d’une rue.
- **Restauration et commerce.** Le stylisme culinaire oppose souvent des plats chauds à des assiettes ou des fonds froids pour les faire ressortir ; un autocollant de promotion dans la complémentaire de l’emballage se remarque en rayon.
- **Données et cartes.** Deux teintes opposées montrent clairement les deux côtés d’une comparaison, à condition que des libellés les appuient pour ceux qui voient les couleurs autrement.
- **Portraits et photos de produits.** Un fond dans la complémentaire de la couleur principale du sujet le détache sans contour dur.

## Erreurs à éviter avec les couleurs complémentaires

### À éviter

- Des quantités égales des deux couleurs
- Du texte dans une complémentaire sur un fond de l’autre
- Les deux couleurs en pleine saturation et à luminosité proche
- Un dégradé direct entre les deux

### À faire

- Une couleur dominante et un petit accent
- Du texte dans un neutre presque blanc ou presque noir
- Une couleur plus profonde, plus pâle ou plus discrète que l’autre
- Une couleur intermédiaire ou un mélange en OKLCH

Si une paire complémentaire paraît trop tendue même équilibrée, essayez la complémentaire divisée : une teinte plus les deux de part et d’autre de son opposée. Elle garde l’énergie et adoucit le heurt. Les [palettes triadiques et complémentaires divisées](https://gradiently.design/fr/guide/triadic-colors) montrent comment.

## FAQ

### Que sont les couleurs complémentaires ?

Les couleurs complémentaires sont deux teintes opposées sur le cercle chromatique, comme le bleu et l’orange ou le rouge et le vert. Ensemble, elles créent le plus fort contraste de couleur.

### Quelle est la couleur complémentaire du bleu ?

Sur le cercle traditionnel du peintre, c’est l’orange. Sur le cercle RVB de l’écran utilisé par les outils numériques, c’est le jaune.

### Pourquoi les couleurs complémentaires semblent-elles vibrer ?

Quand deux opposées de luminosité proche et de pleine saturation se touchent, l’œil peine à fixer le bord. Rendre une couleur plus sombre, plus claire ou moins saturée l’arrête.

### Comment faire un dégradé entre des couleurs complémentaires ?

Ajoutez un arrêt intermédiaire d’une teinte située entre les deux, ou interpolez en OKLCH. Un mélange sRGB direct entre complémentaires vire en général au gris au milieu.

### Quelle part de chaque couleur complémentaire utiliser ?

Laissez l’une dominer et utilisez l’autre en petit accent, par exemple environ 90 % pour 10 %, avec des neutres pour laisser de l’air aux deux.