Color theory basics: the wheel, harmonies and how to use them
You do not need an art degree to use color well. You need three concepts, one wheel and six rules — and every one of them can be shown rather than described.
The three dimensions of a color
Every color you will ever pick is a position on three axes. Change one at a time and you can see what each does:
Warm and cool
Reds, oranges and yellows are warm: they advance and energize. Blues, greens and purples are cool: they recede and calm. Mixing one warm accent into a cool palette (or one cool accent into a warm one) is the simplest way to create a focal point.
The six harmony rules
A harmony rule says where on the wheel the other colors sit relative to the one you start with. Every wheel below starts from the same red #E63946; the companion colors are computed the way the generator computes them.
One hue, many lightness levels. Calm and safe; needs a neutral for text. See the monochrome collection.
Color spaces: HSL vs OKLCH
HSL is easy to reason about but not perceptually uniform. These six colors all have exactly 50% HSL lightness — and they plainly do not look equally bright:
Tints and shades
Once you have a hue, most of the work is choosing lightness levels of it — a light tint for backgrounds, the hue itself for the primary, a deep shade for text. This ladder is what a color page's shades list gives you:
Psychology, briefly
Associations are cultural and contextual, but some are broad: blue for trust and technology, green for growth and health, red for urgency and appetite, purple for creativity and luxury, yellow for optimism, black for sophistication. Use them as a starting point, then test with your audience. The marketing guide separates what holds up from what is folklore.
Putting it to work
FAQ
What is the difference between hue, saturation and lightness?
Hue is the color family (red, blue). Saturation is how pure or gray the color is. Lightness is how close it is to white or black. HSL and OKLCH describe colors with these three values.
What are complementary colors?
Colors opposite each other on the color wheel, like blue and orange or red and green. They create maximum contrast and vibrancy.
Why do designers use OKLCH?
OKLCH is perceptually uniform: equal steps in its values look like equal steps to the eye, unlike HSL where a 50% lightness yellow looks far brighter than a 50% lightness blue.
Which harmony rule should a beginner start with?
Analogous. Neighboring hues almost never clash, so you can concentrate on lightness and saturation, which is where most palettes actually go wrong.