Lesson Content
Colour is one of the most powerful tools in a designer's toolkit. Understanding colour theory helps you make intentional, harmonious choices rather than guessing.
The Colour Wheel organises colours by their relationships:
- Primary colours: Red, Yellow, Blue — cannot be made by mixing other colours
- Secondary colours: Orange, Green, Purple — made by mixing two primaries
- Tertiary colours: Made by mixing a primary with an adjacent secondary
Colour Relationships:
Complementary — colours directly opposite on the wheel (e.g., blue and orange). High contrast, vibrant. Use for emphasis and CTAs.
Analogous — colours adjacent on the wheel (e.g., blue, blue-green, green). Harmonious and calm. Great for backgrounds and subtle palettes.
Triadic — three colours equally spaced on the wheel. Balanced and colourful. Works well for playful, energetic designs.
Monochromatic — different shades and tints of a single colour. Sophisticated and cohesive. Easy to get right.
For web design, you rarely use pure wheel colours. You adjust saturation and brightness to create colours that work on screens and meet accessibility contrast requirements.
/* Complementary palette: teal + coral */
:root {
--primary: #1B4F5A; /* Deep teal */
--accent: #E05C3A; /* Warm coral (complementary) */
--background: #FAF7F2; /* Warm off-white */
}
/* Analogous palette: blues and greens */
:root {
--color-1: #1B4F5A; /* Teal */
--color-2: #2D6A7A; /* Blue-teal */
--color-3: #1A6B5A; /* Green-teal */
}
/* Monochromatic: shades of teal */
:root {
--teal-900: #0D2B32;
--teal-700: #1B4F5A;
--teal-500: #2D7A8A;
--teal-300: #7BBFCA;
--teal-100: #D4EEF2;
}Finished this lesson?
Mark it complete to track your progress through the course.
Learning Objectives
- 1Identify primary, secondary, and tertiary colours
- 2Understand complementary and analogous colour relationships
- 3Apply colour theory to web design decisions
- 4Use the colour wheel to create harmonious palettes
0 of 31 lessons done