visual design
Colour schemes
What are colour schemes (complementary, analogous, triadic)?
A colour scheme is a set of hues chosen by their positions on the colour wheel so they work together. The common recipes - complementary (opposite), analogous (neighbouring), triadic (evenly spaced) - are just rules for picking angles, giving you palettes that feel harmonious instead of arbitrary, from one base colour.
Also known as: colour schemes, color schemes, colour harmony, colour wheel, complementary analogous triadic
Prefer to watch?
Watch the recap 0:52
The demo
Pick a base colour on the wheel, then choose a scheme - and watch a harmonious palette fall out of pure geometry. Drag the slider if you'd rather not aim.
What this demo shows (text version)
A colour wheel (and a hue slider for keyboard use) sets a base hue from 0 to 359 degrees. Choosing a scheme then derives a palette from that base by fixed angles: complementary adds the hue 180° opposite; analogous adds the neighbours 30° to each side; triadic adds two hues 120° apart; split- complementary adds the two neighbours of the opposite hue. Each swatch shows its hue value, and the palette updates instantly as you change the base.
The point is that "harmonious" colour combinations are mostly geometry - fixed relationships on the wheel - so you can generate a coherent palette from any starting colour. But the wheel only governs hue: you still choose saturation, lightness and proportion, and you must check contrast and not rely on hue alone to carry meaning, for accessibility.
Colour schemes turn "pick some colours" into geometry: choose a base hue, then take its opposite (complementary, high contrast), its neighbours (analogous, calm and unified), or two evenly-spaced partners (triadic, vivid but balanced). The wheel does the harmony for you - but it only sets hue relationships; you still control saturation, lightness and how much of each you use, which is where palettes actually succeed or fail.
Spin the base hue and the whole palette moved with it, always in step - because each scheme is just a fixed set of angles on the wheel. Complementary snapped to the opposite side and crackled with contrast; analogous hugged the neighbours and went calm; triadic spread out into something vivid but balanced. The harmony was geometry all along.
The schemes are angle rules from one base hue. Complementary takes the colour opposite (180° apart) for maximum contrast and energy - great for a call to action, risky for large areas. Analogous takes near-neighbours (within ~30°) for a calm, cohesive feel. Triadic takes two colours evenly spaced (120° apart) for a balanced but lively set. Split-complementary softens the clash by pairing a base with the two neighbours of its opposite.
Hue is only one dimension. The wheel fixes the relationships between hues, but a palette lives or dies on saturation and lightness too - and on proportion. The durable habit is a dominant colour, a secondary, and a small accent (roughly a 60/30/10 split), rather than equal helpings of every hue the scheme hands you.
Harmony isn't the only goal. A scheme can be beautiful and still fail contrast for text, so check colour-contrast separately, and never carry meaning by hue alone - some users can't distinguish the colours your scheme depends on. Use the wheel to start from harmony, then bend it for legibility and accessibility.