Colour Wheel

How to use the colour wheel

There are three controls, and you only need one of them to get a usable colour. Start wherever is easiest for you.

1. Drag around the disc to set hue and saturation. The angle decides the hue — red at the top, then orange, yellow, green, blue and violet clockwise. The distance from the centre decides saturation, so the middle is a neutral grey and the rim is fully saturated.
2. Slide the vertical bar to set lightness. The top of the bar is white, the bottom is black. Moving it changes how much light the colour appears to give off, without changing its hue.
3. Copy the value you need. Click any row in the value table and the code goes straight to your clipboard. If you already have a code, paste it into the field and the wheel will jump to match.

Keyboard users can tab to the disc and press the arrow keys to move one degree at a time, or hold Shift for ten-degree steps. The same applies to the lightness bar. If your browser supports the eyedropper API, the Pick button will sample any colour visible on your screen.

What the HEX, RGB and HSL values mean

The same colour can be written in several ways. They are not different colours, just different notations, and each one is more convenient in a particular situation.

HEX

A hex code is six characters long and always starts with a hash. The three pairs of characters hold the red, green and blue channels in base sixteen, from 00 to FF. The code #E5484D means 229 red, 72 green and 77 blue. Hex is the default in CSS, in design tools and in most brand guidelines, which is why it is the value most people copy first.

RGB

RGB spells the same three channels out in decimal, each from 0 to 255. It is easier to read and to adjust by hand, and it is the form most programming languages expect. If you are writing a canvas, a shader or a data visualisation, RGB is usually the friendliest format.

HSL

HSL describes a colour the way people actually think about it: a hue angle from 0 to 359 degrees, a saturation percentage and a lightness percentage. Because the three parts are independent, HSL is the best format for building variations. Raise the lightness and you get a tint; lower it and you get a shade; drop the saturation and you get a muted version — all without touching the hue.

CMYK

CMYK is the print model: cyan, magenta, yellow and black as percentages. The value shown here is a straightforward mathematical conversion from RGB, which is useful for a quick approximation but not a substitute for a colour-managed profile from your printer.

Colour harmonies from a single hue

Once you have a base colour, the wheel can generate the standard harmonies by rotating around it. Each one has a fixed geometric relationship, which is what makes the result feel deliberate rather than random.

The colour harmony guide walks through each scheme with worked examples, or you can jump straight to complementary, analogous and triadic colours.

Who uses a colour wheel

A colour wheel is a decision tool rather than an art tool. It answers a narrow question — what else goes with this? — and it answers it faster than trial and error.

• Designers use it to extend a single brand colour into a full interface palette, including hover states, borders and backgrounds.
• Illustrators and painters use it to plan a limited palette before starting, which is far cheaper than fixing a muddy mix later.
• Students use it to see why certain combinations look settled and others fight, which is hard to grasp from a textbook diagram alone.
• Makers and home decorators use it to test a paint colour against the things that will sit next to it, from a sofa to a kitchen cabinet.

What makes this wheel different

Most colour tools are built to keep you on the page so they can show you an advert. This one is not. There is no advertising, no account and no analytics script; the page loads fast and stays quiet. Every calculation happens on your device, which also means the colour you pick is never uploaded and never logged.

The wheel is drawn with plain CSS rather than a library, so it appears immediately instead of waiting for JavaScript, and it works in a screen reader. If you want to go deeper into the reasoning behind the numbers, read colour theory explained.