Colour Theory
Definition
The principles of how colours work together, including relationships, contrasts, and psychological effects on viewers.
What is Colour Theory?
Colour theory is the study of how colours interact, combine, and affect human perception. In web design, it helps you choose colour combinations that look good together, communicate the right message, and work for all users.
Understanding colour theory prevents the "something looks off" feeling that comes from poorly matched colours.
The Colour Wheel Basics
Primary Colours
Red, blue, and yellow. All other colours are made from these.
Secondary Colours
Orange, green, and purple. Created by mixing primary colours.
Tertiary Colours
Combinations like red-orange or blue-green. Made by mixing primary and secondary colours.
Colour Relationships
| Type | Description | Example |
|---|---|---|
| Complementary | Opposite on the wheel | Blue and orange |
| Analogous | Next to each other | Blue, blue-green, green |
| Triadic | Three equally spaced | Red, yellow, blue |
| Split-complementary | One colour plus two adjacent to its complement | Blue, red-orange, yellow-orange |
Colour Psychology
Colours trigger emotional responses:
- Blue - Trust, professionalism, calm
- Red - Urgency, excitement, passion
- Green - Growth, nature, health
- Yellow - Optimism, attention, warmth
- Purple - Luxury, creativity, wisdom
- Orange - Energy, friendliness, confidence
Practical Application
For websites, colour theory guides everything from brand colours to button choices. A green "Complete Purchase" button feels different from a red one. The contrast between background and text affects readability. The overall palette sets the mood before anyone reads a word.