Color Wheel

What this tool does

Colours make more sense arranged in a circle than listed in a row. On a wheel you can see how the hues run into one another, which sit opposite, and which are neighbours, all at a glance. A plain list of codes hides those relationships, when seeing them is often exactly what helps you choose or understand a colour.

That is what this does. It gives you an interactive colour wheel you can move around to pick a colour, showing the colour you land on and its codes, while laying every hue out in its natural place around the circle. It is both a way to choose a colour and a way to see where that colour sits among all the others.

How to use it

1. Move around the wheel. Drag on the wheel to pick a hue, and adjust the colour until it looks right.
2. Read the colour. The tool shows the colour you have selected and its codes as you move.
3. Copy what you need. Take the colour in whichever format the job calls for.

Drag around the ring to find a hue, refine the colour from there, and copy its code once it looks the way you want.

How it works

The wheel is an interactive control built with reinvented-color-wheel. As you drag around it, the tool reads the angle your handle sits at, turns that into a hue, and combines it with the colour's other settings to produce the exact colour, updating the swatch and codes in real time.

The angle is the heart of it. A colour wheel places the hues around a circle, so where you are on the ring decides which colour you get: the position maps straight to a hue from 0 to 360 degrees. That is why moving around the wheel sweeps you through the colours in order, and why the tool can read your position as a precise colour to hand back.

What a colour wheel is

A colour wheel is the hues laid out around a circle, in the order they naturally run: red into orange into yellow into green into blue into purple and back to red. It is the same arrangement used in art and design for centuries, because it captures how colours relate far better than a straight line does, where the ends would seem unconnected.

The circle works because hue is cyclical. There is no first or last colour; they flow into one another and come round again, which a ring shows perfectly. Placing the colours this way makes their relationships visible as positions: colours near each other on the wheel are close in hue, and colours across from each other are opposite. That layout is what makes the wheel such a useful way to think about colour.

Reading positions on the wheel

Once you know the hues sit around the ring in order, the wheel becomes easy to read. Moving around the edge changes the hue, sweeping from one colour to the next, so a small step along the ring gives a closely related colour and a large step gives a very different one. The position alone tells you roughly which colour you are looking at.

Most wheels also let you set how vivid and how bright the colour is, usually by moving in from the edge toward the centre. The rim holds the pure, full-strength hues, and colours become softer or paler as you move inward or adjust the other controls. So the wheel gives you two things at once: the hue from where you are around the circle, and the intensity from how the colour is set within it.

Why use a colour wheel

One reason is picking a colour with a sense of where it sits. Choosing on a wheel, rather than from a flat field, keeps you aware of the hue you are on and what lies nearby, which helps when you want a colour that relates to others rather than a standalone one. It is choosing with the map in view.

The other reason is understanding colour relationships. Because the wheel shows how hues sit relative to one another, it is the natural tool for reasoning about which colours go together, whether you want ones that sit close for a gentle scheme or ones across from each other for contrast. Designers and artists reach for the wheel precisely because those relationships are what it makes visible.

Relationships you can see on it

The wheel turns colour relationships into positions you can point to. Colours that sit next to each other, close in hue, are the harmonious neighbours often used together for a calm, unified look, since they share a family resemblance. Move a little further round and the colours start to contrast more, giving a scheme more energy.

The strongest contrast is across the wheel, where a colour and the one opposite it sit as far apart in hue as they can. Evenly spaced colours around the circle, meanwhile, give balanced sets of three or more that feel deliberate rather than random. You do not have to memorise any of this to use the wheel; simply seeing the colours in their circle makes these relationships plain, which is the whole advantage of arranging colour this way.

Questions people ask

How do I use the colour wheel?

Drag around the wheel to pick a hue and adjust the colour, and the tool shows the selected colour and its codes as you move.

Why are colours arranged in a circle?

Because hue is cyclical, flowing from red through the spectrum and back to red. A circle shows that naturally and makes colour relationships visible as positions.

What do nearby colours on the wheel have in common?

They are close in hue, so they look related and tend to work well together. Colours across the wheel from each other, by contrast, are opposite and stand apart.

Can I set how vivid the colour is?

Yes. The rim holds the full-strength hues, and moving inward or adjusting the other controls makes the colour softer or paler while keeping the hue.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Color wheel, the hues arranged around a circle. Wikipedia. https://en.wikipedia.org/wiki/Color_wheel
3. reinvented-color-wheel, the interactive wheel control. https://github.com/luncheon/reinvented-color-wheel