Couleurs complémentaires, analogues et triadiques
Sur la roue chromatique d'écran, le complément du bleu à 240 degrés est le jaune à 60 degrés, alors que la roue du peintre place l'orange en face du bleu.
Fais glisser pour tourner. Fais défiler ou écarte et rapproche deux doigts pour zoomer.
Les harmonies sont des angles
Les manuels de design décrivent une poignée de schémas de couleurs qui tendent à paraître équilibrés. Une fois les couleurs placées sur un cercle de teintes, chaque schéma n'est qu'un ensemble d'angles à partir d'une teinte de départ. Les couleurs complémentaires sont directement opposées, à 180 degrés. Les couleurs analogues sont voisines ; le modèle utilise 30 degrés de chaque côté. Un schéma triadique emploie trois teintes régulièrement espacées, à 120 degrés, qui forment un triangle équilatéral. Un schéma complémentaire adjacent prend le complément et le remplace par ses deux teintes voisines, ici à 150 et 210 degrés du départ.
Le cours de dessin de LibreTexts donne le caractère de chaque schéma. Les paires complémentaires donnent un fort contraste et attirent l'attention, c'est pourquoi les designers les emploient pour ce qui doit ressortir. Les schémas analogues paraissent calmes et unifiés et sont courants dans la nature, comme les verts, jaunes et oranges d'une prairie. Les schémas triadiques sont vifs mais restent équilibrés. Les schémas complémentaires adjacents gardent une grande part du contraste d'une paire complémentaire tout en étant plus faciles à vivre. Le guide de la bibliothèque de l'Université du Delaware ajoute une règle pratique pour la quantité de chaque couleur : environ 60 % pour une couleur dominante, 30 % pour une couleur secondaire et 10 % pour un accent.
Quelle roue ?
Voici un piège. Il y a plus d'une roue chromatique. La roue TSL de ce cours est construite à partir de la lumière, avec le rouge, le vert et le bleu comme primaires. Sur elle, le rouge à 0 degré est opposé au cyan à 180, le vert au magenta et le bleu au jaune. Beaucoup de cours d'arts utilisent une roue de peintre construite sur des pigments rouge, jaune et bleu. Sur cette roue, le rouge est opposé au vert, le jaune au violet et le bleu à l'orange, les paires listées dans le cours LibreTexts. Aucune des deux roues n'est fausse. Elles répondent à des questions différentes. La roue de lumière te dit quelles deux lumières s'additionnent en blanc. La roue du peintre est une longue tradition pour mélanger la peinture. Quand tu construis une palette pour un écran, ce sont les angles TSL que ton code utilisera : vérifie donc de quelle roue parle un tutoriel.
Une harmonie fixe les teintes, pas la luminosité. Trois teintes triadiques à pleine saturation et 50 % de luminosité sont criardes. En pratique, les designers gardent les angles et changent la saturation et la luminosité : une teinte forte, les autres pâles ou sombres. Essaie dans le modèle. Choisis une triade, puis baisse la saturation, et remarque que le triangle rétrécit vers l'axe des gris en gardant sa forme.
Deux autres schémas apparaissent dans la plupart des manuels. Un schéma monochromatique emploie une seule teinte en plusieurs versions plus claires et plus sombres, que le texte de théorie des couleurs de RMIT appelle des teintes éclaircies et des teintes assombries. En termes de TSL, la teinte reste fixe et seules la luminosité et la saturation bougent : dans le modèle, c'est donc une ligne verticale sur la tranche verticale. Un schéma tétradique emploie quatre teintes qui forment un rectangle sur la roue, deux paires complémentaires ensemble ; quand les quatre sont régulièrement espacées, à 90 degrés, elles forment un carré. Quatre teintes sont difficiles à équilibrer, la plupart des guides suggèrent donc de laisser l'une d'elles mener et d'employer les autres en petites quantités.
| Complémentaire | +180° |
| Analogue | −30° et +30° (voisines) |
| Triadique | +120° et +240° |
| Complémentaire adjacente | +150° et +210° |
| Complément du bleu sur la roue de lumière | Jaune (240° + 180° = 60°) |
- Complémentaire : à 180°. Analogue : voisines. Triadique : à 120°. Complémentaire adjacente : 150° et 210°.
- Sur la roue de lumière (TSL), le bleu est opposé au jaune ; sur la roue du peintre, le bleu est opposé à l'orange.
- Les harmonies fixent la teinte ; la saturation et la luminosité restent à ton choix.
- Une règle pratique courante : 60% dominante, 30% secondaire, 10% accent.
- Quelle teinte est le complément de 30° sur la roue TSL ?
- Quelle teinte est le complément de 300° ?
- Un schéma triadique commence à 0°. Quelles teintes le complètent ?
- 120° et 240°
- 90° et 180°
- 30° et 330°
- 180° seulement
- Quelle forme les couleurs triadiques dessinent-elles sur la roue ?
- Un triangle équilatéral
- Une ligne droite
- Un carré
- Un triangle rectangle
- Quelle paire est analogue ?
- 30° et 60°
- 30° et 210°
- 0° et 120°
- 60° et 240°
- Sur la roue TSL (de lumière), qu'est-ce qui est opposé au bleu ?
- Jaune
- Orange
- Rouge
- Vert
- Sur une roue traditionnelle de peintre, qu'est-ce qui est opposé au bleu ?
- Orange
- Jaune
- Cyan
- Magenta
- Quel schéma remplace le complément par ses deux voisines ?
- Complémentaire adjacente
- Analogue
- Triadique
- Monochromatique
- Dans une palette 60/30/10, quel pourcentage représente la couleur d'accent ?
- Tu baisses la saturation d'une triade dans le modèle. Que devient le triangle ?
- Il rétrécit vers l'axe des gris
- Il tourne
- Il devient une ligne
- Rien ne change
Sources de ce cours (14)
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
- contrast ratio (L1 + 0.05) / (L2 + 0.05)
- range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
- 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
- W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
- OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
- OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
- Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
- The Newton Project (University of Oxford)
- Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
- History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
- LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
- RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
- University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).
Consulté le: 2026-10-17