We each took a colour from the spectrum, then spent the term learning why they only work together — which turns out to be true of a group as well.
Twelve hues in a circle. Every palette in this deck is chosen from it.
Cannot be mixed from anything else.
Two primaries combined.
A primary blended with its neighbour.
RGB — red, green and blue overlap to make white.
CMYK — inks stack up and darken towards black.
How designers use colour to guide attention, build trust, and make an interface readable for everyone.
Colour theory is the study of how colours behave together — how they mix, contrast, and combine into harmony. In web design it is the rulebook for choosing colours that guide users, set a mood, and keep an interface usable.
Directs attention to buttons, links, and key actions.
Consistent colour creates instant brand recognition.
Colour triggers emotional and psychological response.
Contrast decides whether content can be read at all.
Every scheme in this deck is picked off this wheel.
Red, blue, yellow. These cannot be made by mixing anything else.
Two primaries mixed — green, orange, purple.
A primary mixed with the secondary beside it, like blue-green.
RGB is red, green and blue light emitted by every screen pixel. Mixing light adds brightness, so all three at full strength give white. This is the model behind every website and app.
Full red light
Full green light
Full blue light
CMYK is cyan, magenta, yellow and key (black) — the inks used in printing. Ink subtracts light, so more ink means darker. It never appears on screen, but every designer meets it when a logo goes to print.
Absorbs red light
Absorbs green light
Absorbs blue light
Added because C+M+Y alone makes muddy brown, not true black
The one line worth memorising: RGB is for screens, CMYK is for paper.
| RGB · screens | CMYK · print | |
|---|---|---|
| Stands for | Red, green, blue | Cyan, magenta, yellow, key |
| Mixing | Additive — adds light | Subtractive — adds ink |
| All combined | White | Near black |
| Used for | Websites, apps, screens | Printed material |
| Colour range | Wider, more vibrant | Narrower than RGB |
Four reliable ways to turn the wheel into a palette.
Opposite sides of the wheel. Maximum contrast — ideal for a call-to-action.
Neighbours on the wheel. Calm and harmonious, good for long reading.
Three evenly spaced colours. Bold and balanced without feeling random.
One hue, many tints and shades. The cleanest, most minimal option.
Temperature changes the feeling of a page before a word is read.
Energetic, urgent, appetising. Used for food, sales, and anything time-limited.
Calm, stable, trustworthy. Why banks, hospitals and tech brands lean blue.
Every colour sends a message before a single word is read.
Red — Urgency and energy — sale banners, alerts.
Orange — Friendly and confident — action buttons.
Yellow — Optimism and attention — highlights, warnings.
Green — Growth and success — finance, confirmations.
Blue — Trust and calm — banking, tech, healthcare.
Violet — Luxury and creativity — premium brands.
Rather than picking colours at random, split the palette into three proportions. Interior designers use the same rule for a room — and it is the rule this presentation is built on.
Background and page body. Usually a neutral.
Cards, sections, navigation — supports the base.
Buttons, links, alerts. The one colour that grabs attention.
The Web Content Accessibility Guidelines set a minimum contrast ratio between text and its background, so people with low vision or colour blindness can still read the page. A beautiful palette that fails this is a broken palette.
Normal text — minimum
Large text 18pt+ — minimum
Icons & controls — minimum
Colour theory creates harmony, contrast, and meaning.
RGB is additive and belongs on screens — design in HEX.
CMYK is subtractive and belongs on paper.
Warm colours energise; cool colours calm and build trust.
The 60–30–10 rule keeps a palette balanced.
Contrast is not decoration — it decides your audience.
Questions are welcome.