Colour theory is the body of knowledge that explains how colours relate to each other, how the human eye perceives them, and how they can be combined to create harmony or contrast. You don't need an art degree to apply it — a few core concepts unlock most of the decisions you'll need to make as a designer.
The Colour Wheel
The colour wheel is the foundation of colour theory. It arranges hues in a circular layout based on their visual relationships. The standard wheel used in digital design organises colours into three categories:
- Primary colours: Red, Yellow, Blue — cannot be created by mixing other colours
- Secondary colours: Orange, Green, Violet — created by mixing two primaries
- Tertiary colours: Red-orange, yellow-green, etc. — mixing a primary with an adjacent secondary
In digital design, we work in RGB (Red, Green, Blue) additive colour mixing rather than traditional RYB, but the wheel relationships remain valid for understanding harmony.
Hue, Saturation, and Lightness
Every colour has three dimensions that define it:
- Hue — the pure colour itself (red, blue, green). Represented as a degree (0–360°) on the colour wheel.
- Saturation — how vivid or grey the colour is. 100% saturation is pure colour; 0% is pure grey.
- Lightness — how light or dark the colour is. 0% is black; 100% is white; 50% is the purest colour.
Understanding HSL makes it easy to build tint-and-shade scales from a single brand colour. Keep the hue constant, and adjust saturation and lightness to create a cohesive range.
Design tip: When you want a "lighter version" of a colour, raise the lightness and slightly lower the saturation — this is how natural lighting works and it looks more natural than simply brightening.
The Six Harmony Schemes
A colour harmony is a set of colours that visually "work" together. The colour wheel defines the relationships that produce each type of harmony.
Warm vs Cool Colours
The colour wheel is broadly divided into warm colours (reds, oranges, yellows) and cool colours (blues, greens, purples). This division carries psychological associations that are useful in design:
- Warm colours — feel energetic, urgent, inviting, and physically closer. Used in CTAs, food, retail.
- Cool colours — feel calm, trustworthy, and distant. Used in tech, healthcare, finance.
Most effective colour schemes mix both — a warm accent on a cool background, or vice versa — to create tension and visual interest while retaining an overall mood.
Tints, Tones, and Shades
- Tint — a colour mixed with white (increased lightness)
- Shade — a colour mixed with black (decreased lightness)
- Tone — a colour mixed with grey (decreased saturation)
In web design, tints are typically used for backgrounds and large surface areas (less overwhelming), shades for text and dark elements, and tones for muted supporting colours.
Colour Temperature in Practice
Even within a single hue, temperature matters. A "warm white" (slightly yellow) feels more welcoming than a "cool white" (slightly blue). When building a colour palette:
- Keep your neutrals consistent in temperature — don't mix warm greys and cool greys
- Your background temperature should complement your brand colour (cool blue brand → slightly cool white background)
- Warm neutrals (off-whites, creams) tend to feel more premium and editorial
Apply colour theory instantly — generate harmonious palettes from any hue.
Putting It Together
Colour theory isn't a rigid rulebook — it's a set of relationships that give you a starting framework. The most useful things to remember:
- Start with a hue that matches your brand personality
- Build tints and shades to get surface and text colours
- Use a complementary or triadic hue for your accent/CTA
- Keep saturation moderate for large areas; reserve vivid hues for small focal points
- Always check contrast ratios for text legibility
Once you understand how the colour wheel relationships work, tools like our Random Palette Generator and Brand Colour Builder become far more useful — you'll know which result to pick and why.