Colour Harmony: Complementary, Analogous, and Beyond | Writ In Light | Writ In Light

Colour Lesson XI

Colour Harmony: when colours agree, and when agreement is a trap

In visual perception a color is almost never seen as it really is, as it physically is. This fact makes color the most relative medium in art.

Josef Albers • Interaction of Color

Lessons VII through X traced a quartet of perceptual effects: metamerism, constancy, simultaneous contrast, and afterimage. Each lesson described something the visual system does to colour automatically and involuntarily. This lesson asks a different question. Given everything the eye does to colour without being asked, is there a way to arrange colours so they feel right together on purpose?

That is the question of colour harmony . The answer is: yes, with conditions, none of which are absolute.

After contrast, the question of agreement

Harmony implies something being resolved, a tension held just short of conflict. In music it describes intervals that sound consonant together. In colour, it describes arrangements that the eye finds satisfying: neither too similar to be inert nor too different to be coherent.

The problem is that what reads as harmonious depends on everything this series has established so far. The surround shifts the apparent colour of every element. The illuminant shifts all of them together. The viewer’s adaptation state conditions what feels neutral. There is no harmony in the abstract. There is only harmony for a given eye, under given conditions, in given context.

Harmony is not a property of a palette. It is a property of a palette in a context, viewed by a particular observer, at a particular moment.

That said, some arrangements consistently produce more satisfying results than others across a wide range of conditions, and the principles behind them are worth understanding precisely because they explain why the satisfaction holds.

Chevreul’s harmonic principles

Michel-Eugène Chevreul is familiar from Lesson IX: the dye director at the Gobelins manufactory who spent fifteen years studying simultaneous contrast after a weaver’s complaint about black threads looking wrong beside their neighbours.

Having described how colours alter each other’s appearance, Chevreul turned to the question of which arrangements produce the least mutual distortion and the most overall coherence. He called this colour harmony and identified it as the deliberate application of contrast principles.

His central principle: complementary colours and their opposites , placed together, produce the most vivid mutual enhancement. Each pushes the other toward its greatest apparent intensity. This is harmony through maximum contrast, and it is loud.

For quieter arrangements, he identified harmonies of analogy: colours that are near each other on the spectrum, where the contrast effect is small and the overall impression cohesive. The complementary pair excites. The analogous group settles.

The harmony of contrasts is produced by the juxtaposition of two colours which are mutually complementary.

Michel-Eugène Chevreul • The Principles of Harmony and Contrast of Colours

Chevreul’s framework was practical, drawn from decades of observation in the dye workshop. His insight was that harmony is not about which colours are inherently beautiful but about which relationships produce the most coherent result when simultaneously viewed.

Chevreul's tapestry dyers were the first systematic harmonists. Their laboratory was a loom, and their variable was contrast.

The classical schemes

The colour wheel organises hues into a circle, and harmonic relationships are defined by geometry across that circle. The main schemes:

Complementary : two colours directly opposite each other. Red and cyan-green . Yellow and violet . Blue and orange . Maximum contrast, maximum vibrancy. Simultaneous contrast is fully activated: each colour pushes the other toward its greatest apparent saturation. The result can feel energetic or harsh depending on the proportions involved.

Split-complementary : one colour paired with the two colours flanking its complement. Red with teal and blue-violet . The tension of a complementary pair with slightly less harshness. Often more practical than pure complementary for interfaces and palettes.

Analogous : three or four adjacent colours. Orange , red-orange , red . Simultaneous contrast is minimised because the hues are close. The result feels cohesive, warm or cool depending on the range. The risk: flatness. Without any contrast, an analogous palette can feel undifferentiated.

Triadic : three colours equally spaced around the wheel. Red , yellow , blue . Visually rich without the aggression of a complementary pair. Primary triads feel elemental and direct. Harder to make feel refined than analogous or split-complementary arrangements.

Tetradic : four colours in two complementary pairs, forming a rectangle across the wheel. The most complex to manage. Works well when one pair dominates and the other serves as accent. Easy to feel busy if all four hues are given equal weight.

The wheel does not produce harmony automatically. It provides addresses. The art is in the proportions, saturations, and values assigned to each address.

Complementary A

Complementary B

Base

Split A

Split B

Analogous 1

Analogous 2

Analogous 3

Triadic: Red

Triadic: Yellow

Triadic: Blue

Itten’s seven contrasts

Johannes Itten at the Bauhaus identified a more granular vocabulary. His seven colour contrasts are not just schemes for combining hues. They are distinct perceptual dimensions, each of which can be harmonised separately or in combination.

Contrast of hue: the simplest. Different hues placed together. The more they differ, the stronger the contrast. Pure red next to pure blue next to pure yellow .

Light-dark contrast: difference in value. A light against a dark . The most legibility-critical contrast in interface design.

Cold-warm contrast: temperature difference. Blue-violet against red-orange . Produces spatial effects: warm advances, cool recedes.

Complementary contrast: directly opposite hues. The simultaneous contrast effect at full amplitude. Every complementary pair in a palette activates this automatically.

Simultaneous contrast: Itten treated this as a distinct category. A neutral grey shifts in apparent hue based on its surround, as established in Lesson IX. The contrast exists even when no strongly opposite hue is present.

Saturation contrast: a vivid colour beside a desaturated one. Saturated red against muted rose . The vivid colour becomes more vivid. The muted colour becomes more muted.

Quantity contrast: this one is consistently underused. Large areas of low saturation versus small areas of high saturation. A dark, muted field with a single bright gold accent. The accent reads more powerfully because it is isolated against an extended quiet ground.

Quantity contrast is the most underused tool in digital design: one vivid accent against a large muted field carries more visual weight than a balanced palette of equally saturated colours.

The seven contrasts are most useful not as rules but as a diagnostic. When a palette feels wrong, naming which contrast is imbalanced points toward the fix.

Albers’ skepticism

Albers is present in almost every lesson of this series, and on harmony he is at his most sceptical.

Albers did not believe in harmony rules. His argument was practical: two colours that look harmonious together on a white artboard may feel wrong in another context. Place the same pair on a dark background, and the simultaneous contrast shift changes both apparent colours. The harmony that held on the artboard may not hold in the interface.

More fundamentally, he doubted the premise that harmony is a fixed relationship between colours at all. Since every colour is what it appears to be relative to its context, and since context is always changing, there is no palette that is harmonious in itself. There is only harmony for a given set of conditions.

We are able to hear a single tone. But we almost never... see a single color unconnected and unrelated to other colors.

Josef Albers • Interaction of Color

His practical instruction was to develop the eye rather than follow rules. Practice making two colours look like one. Practice making one colour look like two. Until you have trained your perception on actual interaction, harmony rules will mislead you as often as they guide you.

Albers did not dismiss harmony. He dismissed the idea that it could be achieved by looking up a formula. The only reliable guide is the eye, tested in context.

Munsell and the neutral axis

Albert Munsell’s contribution to harmony was structural rather than geometric. He was dissatisfied with the colour wheel because it ignored value and chroma: two colours at opposite positions on the hue circle might be completely different in lightness and saturation, which changes the perceptual relationship entirely.

Munsell proposed that harmonious colour groups tend to share the same value or the same chroma level, arranged so that their overall visual weight is balanced across the neutral grey axis. He called this balanced rotation : colours that, if you averaged them together perceptually, would land near a neutral grey.

This accounts for something the wheel cannot explain: why a dark navy and a pale cream can feel more harmonious than two colours that are “complementary” by hue angle but wildly different in perceptual weight. Munsell’s harmony is about balance across all three perceptual dimensions, not just hue opposition.

Munsell understood that harmony is three-dimensional. The wheel is a shadow of a richer structure, and shadows lose information.

This is why professional colour systems (Munsell, NCS, Pantone) are built around full three-axis notation rather than hue circles. The circle is a teaching tool. The full space is the working environment.

Harmony in digital palettes

Design systems that age well tend to be built on analogous hue relationships with carefully controlled chroma variation, not on bold complementary pairs.

Look at the palettes of established digital products. The primary colour is often a restrained hue, slightly desaturated, with secondary colours nearby on the hue wheel rather than opposite. Complementary colours appear, but as accents used in small quantities: a single vivid spot in a largely quiet field. Itten’s quantity contrast, applied deliberately.

This site’s own token set follows the same logic. The gold , rose , and slate accents are muted and drawn from a limited hue range. None of them fights for dominance because none are used in equal quantities at equal saturation. The near-black canvas absorbs contrast, making small amounts of chroma read as significant.

Canvas

Ink

Gold

Rose

Slate

Faint

The simultaneous contrast effect (Lesson IX) is built into every pair of colours in any palette. Understanding harmony means choosing which contrasts to activate and at what amplitude, not eliminating contrast altogether.

A good digital palette is not the absence of contrast. It is the deliberate management of which contrasts are loud, which are quiet, and which are silent.

When to break it

Understanding harmony is most useful because it clarifies when to violate it.

A harmonious palette, left unbroken, can become invisible. The eye finds the arrangement coherent and stops noticing it. A single off-scheme accent: one colour that does not fit the harmonic logic of the rest, immediately draws the eye. The violation is legible because the harmony was established first.

Mondrian’s grids use primary triadic contrast as simple as possible. One yellow rectangle in a composition of black, white, and red reads with enormous weight precisely because yellow is the most dissonant element. The harmony earns the break.

In interface design, the same principle governs error states, call-to-action buttons, and notification badges. They are often chromatic violations of the surrounding palette: a warm red in a predominantly cool blue environment, a saturated gold in a field of muted neutrals . The break works because the rest of the interface earned the ground.

You can only break a harmony that exists. The violation is leverage, and leverage requires something to push against.

Closing thought

Lessons I through XI have followed a single arc. From the physics of light to the biology of the eye to the psychology of perception: what colour is, how the eye receives it, and how the brain transforms what it receives. Constancy, contrast, afterimage, and now harmony have shown that colour is never simply what the surface emits. It is a negotiation between surface, surround, illuminant, and observer.

Arc 1 “To See” ends here.

Seeing colour accurately is not a passive act. It is a discipline: knowing what the eye does to the signal before it becomes a perception, and working with that knowledge, not against it.

In Arc 2, the question changes. Not what is this colour, not how does the eye process it, but: what does it do to you when it arrives? Colour as emotion, memory, and mood is next.

References

    • Michel-Eugène Chevreul, The Principles of Harmony and Contrast of Colours (1839) - Johannes Itten, The Art of Color (1961) - Josef Albers, Interaction of Color (1963) - Albert Munsell, A Color Notation (1905) - Faber Birren, Color and Human Response - Mark D. Fairchild, Color Appearance Models - David Briggs, huevaluechroma.com - Bruce MacEvoy, handprint.com