Colour Harmony | mysimulator.uk

HSL: colour as an angle, not three separate channels

RGB stores colour as three independent channel intensities, which is convenient for a display but useless for reasoning about "similar" or "opposite" colours. HSL — hue, saturation, lightness — re-parameterises the same colour space so that hue is a single angle from 0 to 360 degrees around a wheel, saturation is distance from the grey centre, and lightness is how close the colour is to black or white. Because hue is literally an angle, colour harmony rules become simple geometry: pick angles with a specific relationship, and the resulting colours tend to look intentional rather than random.

live demo · picks rotating around the hue wheel● LIVE

The classic harmony rules, as angles

Complementary       hue, hue + 180°                    maximum contrast, 1 pair
Split-complementary hue, hue + 150°, hue + 210°         contrast, less tension than pure complementary
Triadic             hue, hue + 120°, hue + 240°          balanced, vivid, evenly spaced
Tetradic (square)   hue, hue + 90°, hue + 180°, hue + 270°   rich, needs one dominant colour
Analogous           hue, hue ± 30°                        calm, low contrast, naturally cohesive
Monochromatic       one hue, varying only S and L          safest, guaranteed to cohere

Complementary pairs (180° apart) produce the strongest possible contrast because they sit at opposite ends of the wheel; analogous hues (within about 30°) share enough similarity to feel calm and unified. Triadic and tetradic schemes work best when one colour is chosen as visually dominant and the others used sparingly as accents — three or four colours at full, equal intensity tend to compete rather than harmonise.

Why complementary colours look so intense together

This is not just an aesthetic convention — it traces to actual retinal physiology. Human colour vision recodes the three cone types' signals into opponent channels: a red-versus-green channel and a blue-versus-yellow channel, rather than transmitting raw red, green and blue signals separately. Colours near-opposite on the hue wheel push these opponent channels toward their extremes in opposite directions simultaneously, which is what produces the vibrating, high-contrast effect placed side by side — and also produces the classic afterimage effect, where staring at a saturated colour and looking away shows a ghost in its complementary hue as the fatigued opponent channel briefly overshoots.

RYB versus RGB: two different wheels, two different answers

A crucial and often-missed subtlety: the traditional artist's colour wheel (red-yellow-blue, RYB) describes subtractive mixing of pigments, where each added pigment absorbs more wavelengths and mixing tends toward dark or muddy. Digital tools use RGB hue, which describes additive mixing of light, where adding wavelengths moves toward white. The two wheels place hues in different positions — RYB orange sits roughly where the RGB wheel has yellow-green — so a harmony read correctly off a printed pigment wheel will not translate to identical results in a CSS colour picker, and vice versa.

Where HSL quietly lies to you

HSL's lightness value is a mathematical average of a colour's RGB channels, not a measure of how bright the colour actually looks to a human eye. Because human vision is far more sensitive to yellow-green wavelengths than to blue, a pure yellow and a pure blue set to the same HSL lightness of 50% look nowhere near equally bright — the yellow appears dramatically lighter. This is why a palette generated by evenly rotating hue at fixed HSL saturation and lightness can look uneven, with some swatches "popping" and others receding. Perceptually uniform colour spaces such as CIELAB or the newer HSLuv correct for this by modelling actual human luminance sensitivity, and are increasingly what serious design tools use to generate genuinely balanced palettes instead of raw HSL rotation.

Frequently asked questions

Why do complementary colours look so intense when placed next to each other?

Because of how human colour vision is wired. Retinal signals are recoded into opponent channels (red-versus-green, blue-versus-yellow) rather than transmitted as raw red, green and blue signals, and colours 180 degrees apart on the hue wheel excite these opponent channels in opposite directions, producing maximum simultaneous contrast. It is also why staring at a strong colour and looking away produces an afterimage in its complementary colour — the opponent channel has fatigued and overshoots when the stimulus is removed.

Is a colour wheel arranged by pigment mixing the same as one arranged by light mixing?

No, and this is a common source of confusion. The traditional RYB (red-yellow-blue) artist's wheel describes subtractive mixing of pigments, where mixing removes wavelengths. Digital colour tools use RGB hue, which describes additive mixing of light, where combining wavelengths adds up to white. The two wheels place hues in different positions — RYB's orange sits roughly where RGB's yellow-green sits — so a harmony rule read off one wheel does not translate directly to the other.

Why does an HSL palette sometimes look uneven even though the hues are evenly spaced?

Because HSL's saturation and lightness are mathematically defined, not perceptually defined — a pure yellow at HSL lightness 50% looks far brighter to the human eye than a pure blue at the identical lightness 50%, since human vision is far more sensitive to yellow-green wavelengths. Perceptually uniform spaces such as CIELAB or HSLuv correct for this by modelling actual human brightness sensitivity, which is why professional colour tools increasingly generate palettes in those spaces instead of raw HSL.

Try it live

Everything above runs in your browser — open Colour Harmony and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.

▶ Open Colour Harmony simulation

Colour Harmony: The HSL Wheel and the Rules Behind Good Palettes