Color Harmony.

Twelve hues, two models

The painters' wheel (RYB: red, yellow, blue) and the screen wheel (RGB) don't put the same hues opposite each other: the same geometric figure points to different colours. Pick a base, then a scheme: the wheel draws the figure, the poster shows the palette at work.

Complementary: two opposite hues, maximum contrast. Analogous: neighbours, a soft harmony. Triadic: three evenly spaced hues, vivid and balanced. Split-complementary: the base and the two neighbours of its opposite, strong but gentler. Square and tetradic: two pairs of opposites, very rich, as long as one hue dominates.

Red, yellow and blue are the primaries of the painters' traditional model. With real inks, the primaries that give the widest range of mixes are rather cyan, magenta and yellow: the RYB wheel is a harmony tool, not a law of mixing.

Hue, saturation, lightness

Three settings describe a colour in software: hue (its place on the wheel), saturation (from grey to full) and lightness (from black to white). That's the HSL model, handy but misleading: it is only a transform of the screen's RGB.

The trap: at the same HSL lightness, a yellow looks much lighter than a blue. Perceived lightness is measured in a perceptual space such as OKLCH or CIELAB. Turn a palette into greys of equal lightness: if two hues become the same grey, they won't stand apart.

Warm hues (red → yellow) tend to look closer and more energetic, cool hues (green → violet) further away and calmer. A tendency, not a law: lightness and saturation weigh more.

Shade, tint, tone

Three ways to modulate a hue without changing it: a shade adds black (darker, denser), a tint adds white (lighter, softer), a tone adds grey (muted, subtler).

A monochrome palette declines a single hue into shades, tints and tones: the safest of harmonies, because everything shares the same hue. It holds through differences in lightness, not through colours.

The 60-30-10 rule

Picking hues isn't enough: you have to decide how much surface each one takes. The most common workshop rule, from interior design: a 60% dominant, a 30% secondary, a 10% accent. A starting point, not a law: a monochrome identity can go as far as 80-10-10.

Two schools. By value: a single hue, a light and soft dominant, a darker secondary, the accent at full strength. By the wheel: hues from the scheme, the dominant desaturated to act as a background, the partner as secondary, the most vivid as accent.

Either way the accent stays rare: its scarcity is what makes it work. And the dominant is best neutral: a vivid colour spread over 60% tires the eye and drowns the accent.

Legibility and accessibility

A harmonious palette can be illegible. The web accessibility standard (WCAG) measures the contrast between a text and its background, from 1:1 to 21:1: at least 4.5:1 for body text, 3:1 for large headings, 7:1 for maximum comfort. The table computes that ratio for charcoal text and off-white text on each colour of the palette.

About 8% of men and 0.5% of women (of European descent) have trouble seeing some colours, most often red and green. The simulation shows the palette for the three complete forms of colour blindness (Machado et al., 2009 matrices). If two colours merge, don't let them carry information on their own: add a shape, a pattern, a label, or a difference in lightness.

A palette rests on its neutrals

Backgrounds, text, connecting greys: neutrals cover most of the surface. Three rules, applied to your base: an off-white rather than pure white (warmed with a touch of the base), a charcoal rather than #000000 black, and a coloured grey, the base pulled towards its own grey.

Name your colours the way people say them, not the way the wheel files them: nobody says "yellow-green" or "blue-violet", they say lime, olive, indigo, magenta. A style guide reads better in everyday words.

Three ways to be opposite

The painters' wheel puts green opposite red and violet opposite yellow. The screen opposes red with cyan and yellow with blue: that's the RGB complement, the one you get by adding 180° to the HSL hue.

The eye follows neither exactly. Vision encodes colour in opponent pairs, and the perceived opposite is measured in a perceptual space such as OKLCH or CIELAB: add 180° to the hue. The module shows it in its most vivid version: at equal lightness, the opposite of a very light colour such as yellow would be a barely tinted white. It's close to the screen's, but shifted, because HSL is only a transform of RGB.

In practice: for the strongest contrast side by side, use the perceived opposite. To neutralise a paint without shifting it, think in pigments.

A colour also changes appearance depending on its neighbours: that's simultaneous contrast, one of Johannes Itten's seven contrasts, covered in the Composition - Perception tutorial.

The afterimage

Stare at a coloured disc long enough and the retinal cells that capture it tire. When it disappears, the neutral grey looks tinted with the opposite colour: that's the afterimage, proof that vision works in opponent pairs.

It lasts a few seconds and follows your gaze. Its hue is very close to the perceived opposite, not to the painters' wheel opposite: after a red you see a blue-green, not a plain green.

On screen versus in paint

On screen, two complements mix in a straight line: in the middle they cancel out into grey. In paint, each pigment absorbs and scatters light in its own way (Kubelka-Munk theory): the mix follows a curve, and the middle gives a muted hue, often a brown or a dull green, rather than a grey.

Both ramps start from the same two colours: the screen passes through a grey, the paint through a muted hue (for yellow and its blue opposite, a green). The simulation estimates a spectrum for each colour (the spectral.js library): an approximation, since the result depends on the actual pigments. A cadmium yellow and an ultramarine blue give a green, a yellow and a violet a brown. For screens and print, additive and subtractive colour are covered in the Colorspaces tutorial, RGB and CMYK module.

The Munsell solid

Albert Munsell ordered colours along three perceptual axes: hue (around), value (lightness, bottom to top) and chroma (saturation, from the centre outwards). The chips here are the 2,734 “real” colours of the 1943 renotation (Newhall, Nickerson and Judd): the atlas measurements, smoothed and extended to the most saturated colours a surface can reflect, then converted for the screen.

The solid is lumpy: hues don't all reach the same chroma. In Munsell's atlas, with the pigments of his time, the strongest red was about twice as powerful as the strongest blue-green; out to the limits of real colours the gaps change: here, from 16 for blue (5B) to 32 for purple (5P). Separating hue, lightness and saturation this way is the direct ancestor of CIELAB, then OKLCH.

A page of the atlas

Cut vertically, the solid gives a page of the Munsell atlas: one hue on one side of the grey axis, its complement on the other. Going up, value increases; moving away from the axis, chroma. Each hue reaches its maximum chroma at a different value: yellow very high, purple-blue rather low.

A value level

Cut horizontally, at constant value, the solid shows uneven lobes: at equal lightness, some hues go much further in chroma than others. It is a direct consequence of the eye's sensitivities, and the reason Munsell didn't draw a sphere.

Munsell's harmony rules

Munsell derived composition rules from it, set out in A Grammar of Color (1921). Harmony is a balance around middle grey N5: colours dosed in the right areas and strengths would mix into a perfect grey.

His complement is the perceived opposite: red's complement is blue-green, not green. His paths take regular steps of hue, value and chroma. And the law of areas says a colour's surface should be inversely proportional to its strength: the same idea as the 60-30-10 workshop rule.