L’essentiel en bref
- 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.
Sur cette page
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 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 |
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.
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.
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.
linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)- 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 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é les plus courantes.
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 et les dégradés OKLCH en CSS 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 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 montrent comment.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
