visual design
Colour theory basics
What are the basics of colour theory?
Colour theory is the set of relationships - on the colour wheel and in the dimensions of hue, saturation and lightness - that explain which colours work together and why. From a single base colour you can derive harmonious schemes (complementary, analogous, triadic) that give an interface a coherent, intentional palette instead of a random clash.
Also known as: colour theory basics, color theory basics, colour schemes
Prefer to watch?
Watch the recap 0:24
The demo
Pick a base colour, then choose a harmony. Watch a coherent scheme fall out of the relationships on the wheel - the same maths designers use to build palettes that look intentional.
What this demo shows (text version)
You set a base hue on a slider and choose a harmony, and the demo derives a colour scheme from the relationships on the colour wheel: complementary (the opposite hue) for strong contrast, analogous (neighbouring hues) for calm cohesion, triadic (three evenly spaced hues) for balanced variety, or monochrome (one hue at different lightness and saturation). The swatches update live so you can see how each relationship feels.
That's the basis of colour theory: hue, saturation and lightness, plus wheel relationships, let you build coherent palettes from one base colour rather than guessing. In interfaces, keep it disciplined - a couple of main colours, one accent, lots of neutrals - and always check the result against contrast and colour-blindness, because harmony alone doesn't guarantee accessibility.
A usable palette comes from relationships, not random picks. Describe colour in three dimensions - hue (which colour), saturation (how vivid), lightness (how light or dark) - and you can build harmonious schemes from one base: complementary (opposite the wheel) for high contrast and emphasis, analogous (neighbours) for calm cohesion, triadic for balanced variety. In interfaces, keep it disciplined: one or two main colours, a restrained accent for actions, and plenty of neutrals - then vary lightness and saturation to make tints and shades. A coherent, limited palette reads as intentional; a pile of unrelated hues reads as chaos. (And harmony alone isn't enough - it still has to pass contrast for accessibility.)
Pick a base colour and watch a whole scheme fall out of the wheel - complementary, analogous, triadic - each with a different feel. That's colour theory: not magic taste, but relationships you can reason about. Build a palette from one base plus neutrals and it looks deliberate; throw together unrelated hues and it looks accidental. Harmony is a system, and systems are learnable.
Colour has three dimensions: hue (its position on the wheel - red, blue, etc.), saturation (its intensity, from grey to vivid), and lightness/value (from black to white). Most practical schemes are built by fixing relationships on the wheel: complementary (two opposite hues) for strong contrast and emphasis; analogous (adjacent hues) for harmony and calm; triadic (three evenly spaced) for balanced variety; and monochromatic (one hue, varied saturation and lightness) for a quiet, unified look.
For interfaces, discipline beats abundance. A common, robust structure is a dominant/primary colour, a secondary, and a single accent reserved for primary actions, all sitting on a generous base of neutrals (greys and near-whites). Tints (add white) and shades (add black/darken) of those few hues give you a full, coherent range without introducing new colours. The 60-30-10 rule is one way to balance the proportions.
Harmony is necessary but not sufficient: a beautiful scheme still has to meet accessibility contrast requirements (WCAG), never rely on colour alone to convey meaning, and account for cultural and context differences in how colours are read. Choose colours for relationship and purpose - emphasis, hierarchy, brand - then verify them against contrast and colour-blindness, so the palette is both coherent and usable.