Module goal
Understand how colour relationships work, how to build intentional palettes, and why accessibility is a design requirement rather than an afterthought.
Keep it visual
The wheel itself is simple; what matters is the relationships built from it. Pull the wheel up in Figma or a reference image rather than learning positions from text alone — this is an inherently visual concept.
| Scheme | How it's built | Practical use case |
|---|---|---|
| Complementary | Colours directly opposite on the wheel (blue and orange) | A bold sale advertisement that needs to grab attention |
| Analogous | Colours next to each other (blue, blue-green, green) | A spa or wellness brand aiming for calm and cohesion |
| Triadic | Three colours evenly spaced around the wheel (red, yellow, blue) | A playful, energetic brand wanting variety without chaos |
Why triadic isn't just “three colours”
The even spacing is the point — it produces strong contrast that still feels balanced and intentional, rather than arbitrary.
| Colour | Common associations |
|---|---|
| Red | Urgency, passion, energy, appetite |
| Blue | Trust, calm, professionalism, stability |
| Green | Growth, health, nature, money |
| Yellow | Optimism, warmth, caution |
| Black | Luxury, sophistication, formality |
| Purple | Creativity, royalty, luxury |
Not universal absolutes
These associations are strongly shaped by culture and context — red signals danger in some contexts and luck or celebration in others, notably across various Asian cultures. The lesson isn't a rulebook: colour choice is never neutral, so choose deliberately with the intended audience in mind rather than by personal preference.
Beyond aesthetic contrast (Module 1), colour contrast has a specific, measurable accessibility dimension: text needs sufficient contrast against its background to be legible, particularly for users with visual impairments or colour blindness — a meaningful portion of any audience.
A requirement, not a nice-to-have
Light grey on white might look elegant to a designer with typical vision but be genuinely unreadable for a real portion of the audience. This is why standards exist (WCAG contrast guidelines) and why professional work is evaluated against them. Figma has built-in and plugin contrast checkers — use them.
The squint test
If text is hard to read at a glance while squinting slightly, or on a lower-brightness screen, contrast is likely insufficient and should be increased.
Teaching point
Brief to work from — “VekBloom”, a fictional local plant and gardening shop that wants to feel fresh, natural and welcoming.
Success criteria
Three distinct palettes that genuinely follow each scheme's colour-wheel relationship (not just three colours that happen to look nice), each with a written rationale, and one palette confirmed to meet basic contrast standards.
Question 1 of 6
What's the difference between a complementary and an analogous colour scheme?
Key takeaways
Lab tasks
Write your answers in your own notes before moving on — explaining a concept in your own words is the fastest way to find the gaps.