The short version
- A color wheel arranges hues in a circle so the relationships between them, such as opposites and neighbours, are easy to see.
- The painter's wheel uses red, yellow and blue as primaries, while the screen wheel uses red, green and blue, so their opposite colours differ.
- Colour harmonies such as complementary, analogous and triadic are fixed positions on the wheel.
- A wheel shows hue only, so every palette taken from it still needs light and dark versions for text and backgrounds.
- Simple digital wheels are not perceptually even: at the same setting, yellow looks much lighter than blue.
On this page
A color wheel (or colour wheel) arranges hues in a circle, in the order they appear in a rainbow, with the ends joined up. Its value is that relationships become geometry: colours opposite each other contrast strongly, colours next to each other blend easily, and colours spaced evenly around the circle balance. To use one, you pick a starting hue, then choose companions by their position.
This guide covers how the wheel is built, which wheel to trust, how to read harmonies from it and how to get from a few hues to a usable palette. For the wider picture, start with colour theory basics.
Primary, secondary and tertiary colours
Every wheel starts with three primaries. Mixing two primaries gives a secondary, and mixing a primary with a neighbouring secondary gives a tertiary. Three primaries, three secondaries and six tertiaries make the familiar twelve-segment wheel.
conic-gradient(from 0deg, #d7263d, #e8572a, #f28c28, #f6b82f, #f4e04d, #9bc53d, #3a9d4a, #1b8a8f, #2156a5, #4b3a9a, #7b2d8e, #b0266f, #d7263d)The painter's wheel and the screen wheel
There are two wheels in common use, and they disagree. The painter's wheel is built on red, yellow and blue (RYB), from mixing pigments. Screens make colour from red, green and blue light (RGB), and a wheel built from those has different primaries, different secondaries and different opposites.
| Property | Painter's wheel (RYB) | Screen wheel (RGB) |
|---|---|---|
| Primaries | Red, yellow, blue | Red, green, blue |
| Secondaries | Orange, green, violet | Yellow, cyan, magenta |
| Opposite of red | Green | Cyan |
| Opposite of blue | Orange | Yellow |
| Opposite of yellow | Violet | Blue |
| Used by | Painters, art education, many palette guides | Colour pickers, CSS hue values, most design software |
conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)Which should you use? For digital work, the screen wheel matches your tools, so the hue numbers you type line up with what you see. The painter's wheel often gives more pleasing opposites, like blue and orange, because it spaces warm colours more generously. Many designers read harmonies from the painter's wheel and then pick exact values on screen. Either is fine as long as you are consistent.
Reading colour harmonies from the wheel
Harmonies are shapes laid over the wheel. Rotate the shape and you get a new palette with the same balance.
- Complementary: two hues directly opposite. Maximum contrast. See complementary colours.
- Analogous: three to five neighbours in a row. Calm and natural. See analogous colours.
- Triadic: three hues a third of the circle apart. Bold but balanced. See triadic colours.
- Split-complementary: one hue plus the two either side of its opposite. Contrast with less tension.
- Square or tetradic: four hues evenly spaced, or two complementary pairs. Rich and hard to control.
- Monochromatic: one hue in many lightnesses. See monochromatic palettes.
What the colour wheel doesn't show
A wheel shows hue. It says nothing about lightness or saturation, and those decide most of how a palette actually looks. Blue and orange at full strength are harsh together. Deep navy with a soft apricot uses the same two hues and looks refined. Every palette you read off a wheel still needs a dark, a light and some quieter versions of its colours.
Simple digital wheels are uneven
In HSL, pure yellow and pure blue share the same lightness value, yet yellow looks far brighter. That is because HSL is built on the screen's channels, not on how eyes perceive brightness. Perceptual colour spaces such as OKLCH fix this: equal lightness values look equally light across hues, which makes them better for building palettes and smooth gradients.
How to build a palette from the colour wheel
- 1
Choose your anchor hue
Start with the one colour that must be there: a brand colour, a product colour or one taken from a photo.
- 2
Pick a harmony for the mood
Analogous or monochromatic for calm; complementary, split-complementary or triadic for energy.
- 3
Let one colour lead
Use the anchor for most of the design and the others in smaller amounts. Equal amounts of every colour rarely look intentional.
- 4
Vary lightness and saturation
Add a dark and a light version, and quieten the supporting colours. This is what turns hues into a palette.
- 5
Test in a real layout
Put text on it, check contrast and look at it at the size people will see it.
Once a palette works as swatches, try it as a gradient. Neighbouring hues blend beautifully; opposite hues need a middle colour between them. Gradient colour combinations has tested examples.
Questions people ask
What is a color wheel?
A color wheel is a circle of hues in spectral order that shows how colours relate: opposites contrast, neighbours harmonise and evenly spaced hues balance.
What are the primary colours on the colour wheel?
On the traditional painter's wheel they are red, yellow and blue. On the screen wheel used by digital tools they are red, green and blue.
Why are complementary colours different on different wheels?
The painter's and screen wheels have different primaries, so the circle is spaced differently. On the painter's wheel blue's opposite is orange; on the screen wheel it is yellow.
Which colour wheel should designers use?
For digital work the screen wheel matches your tools. Many designers read harmonies from the painter's wheel and choose exact values on screen. Consistency matters more than the choice.
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
