The short version
- Color theory is a set of practical ideas about how colours relate, combine and affect what people see first.
- Every colour can be described by three properties: hue, the colour family; saturation, how intense it is; and lightness, how close it is to white or black.
- Lightness contrast matters more for readability than hue contrast, which is why a design should still work in greyscale.
- Colour harmonies such as complementary, analogous, triadic and monochromatic are positions on the colour wheel that reliably look balanced.
- Most good palettes use one dominant colour, one or two supporting colours and one small accent.
On this page
Color theory (colour theory, in British spelling) is the set of practical ideas designers use to choose colours that work together and do what they need to do. It comes down to six things: hue, saturation, lightness, temperature, harmony and contrast. Understand those and you can explain why a palette feels calm or loud, why some text is hard to read and why two colours clash.
This page is the starting point for every colour article in the Guide. Each section links to a deeper one when you need it.
Hue, saturation and lightness
Any colour can be described with three properties. Hue is the colour family: red, orange, green, blue. Saturation (also called chroma) is how intense it is, from grey to vivid. Lightness is how close it is to black or white. Change one while holding the others and you see what each does.
These three are how colour codes like HSL and OKLCH describe colour, which makes them easy to adjust in code. Colour codes explained covers HEX, RGB, HSL and OKLCH.
Warm and cool colours
Colours also have a temperature. Reds, oranges and yellows feel warm; blues, greens and violets feel cool. Warm colours tend to feel closer and more energetic, cool colours further away and calmer. Temperature is relative, though: a violet with a lot of red in it can feel warm next to a pure blue.
Warm and cool colours goes further, including how to mix temperatures in one gradient.
Colour harmony and the colour wheel
Arrange hues in a circle and some relationships reliably look balanced. These are the colour harmonies. They are not rules, but they are good starting points when you are unsure. The colour wheel guide explains how to read them.
| Harmony | Where the colours sit | What it feels like |
|---|---|---|
| Monochromatic | One hue in several lightnesses | Calm, unified, refined |
| Analogous | Neighbours on the wheel | Harmonious, natural, easy |
| Complementary | Opposite each other | High contrast, energetic |
| Split-complementary | One hue plus the two beside its opposite | Lively but less tense |
| Triadic | Three hues evenly spaced | Playful, balanced, bold |
Contrast: why some colours are hard to read
Contrast is the difference between two colours. For reading, the difference that matters most is lightness, not hue. Red text on a green background can be two very different hues and still be hard to read, because the two can be similar in lightness. Many people with colour vision deficiency cannot separate them at all.
Hue contrast only
- Red on green of similar lightness
- Blue on purple
- Orange on pink
- Disappears when converted to greyscale
Lightness contrast
- Near-white on deep navy
- Near-black on pale yellow
- Dark ink on a light pastel
- Still reads in greyscale
The greyscale test is the quickest check: turn your design grey and see whether the words still stand out. For text, the Web Content Accessibility Guidelines set minimum contrast ratios, 4.5:1 for body text and 3:1 for large text. Colour contrast explains how to measure them.
Proportion: how much of each colour
The same five colours can look calm or chaotic depending on how much of each you use. A useful default is one dominant colour covering most of the space, one or two supporting colours and a small accent for the thing you want noticed. The 60-30-10 rule is the common version of this idea.
What colours mean
Colours carry associations, but those associations are learned, not built in, and they vary by culture and context. Green can mean nature, money or go; red can mean danger, luck or a sale. Treat meaning as a question about your audience and category rather than a fixed dictionary. Colour psychology separates what holds up from what does not, and colour meanings around the world shows how much they differ.
Putting colour theory to work
- 1
Start from one colour
Choose the colour that matters most: your brand colour, or one taken from a photo. Pulling a palette from an image helps.
- 2
Pick a harmony
Decide whether the palette should be calm (monochromatic or analogous) or energetic (complementary or triadic).
- 3
Build a lightness range
Add a very dark and a very light version for text and backgrounds. Most palettes fail for lack of these.
- 4
Assign proportions
Decide which colour dominates, which supports and which is the accent.
- 5
Test contrast and context
Check text contrast, run the greyscale test and look at the palette in a real layout, not just as swatches.
For brand work, how to choose brand colours turns these steps into a full method.
Questions people ask
What is color theory?
Color theory is a set of practical ideas about how colours relate to one another, how they combine into harmonious palettes and how contrast affects what people see and read.
What are the three properties of colour?
Hue, the colour family; saturation, how intense or grey it is; and lightness, how close it is to black or white.
What are the main colour harmonies?
Monochromatic, analogous, complementary, split-complementary and triadic. Each describes where colours sit on the colour wheel relative to each other.
Which matters more for readability, hue or lightness?
Lightness. Text needs a clear difference in lightness from its background, which is why a readable design still works when converted to greyscale.
Do colours have universal meanings?
No. Colour associations are learned and differ between cultures, categories and contexts, so check them against your audience.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
