Drag around the wheel to pick any colour, read its hex, RGB and HSL, and get complementary, analogous and triadic harmonies as you go.
Every colour updates instantly — no waiting, no server round-trip.
A color wheel takes something abstract — how hues relate to one another — and makes it a shape you can see. Every classic scheme is just a different figure drawn on the same circle, which is why designers reach for it before they reach for a palette.
Spelling makes no difference here: color wheel and colour wheel are the same thing, and this color wheel picker works the same either way. It is a colour wheel online, so there is nothing to install — a color wheel online in the browser tab you already have open.
All of them are defined by degrees around the circle, so once you know the angle you know the rule. These are the color wheel combinations every design course teaches, and the same colour wheel combinations sit behind most brand palettes you have seen:
| Harmony | Angles | Feels like |
|---|---|---|
| Complementary | 0°, 180° | Maximum contrast. Two colours that fight for attention — good for a call to action, exhausting for a whole page. |
| Split-complementary | 0°, 150°, 210° | The same contrast with the edge taken off. The safest way to use an opposite colour. |
| Analogous | 0°, ±30° | Neighbours. Calm and cohesive, but with no natural accent — you have to supply one. |
| Triadic | 0°, 120°, 240° | Evenly spaced and vivid. Balanced but loud, so let one dominate. |
| Tetradic | 0°, 60°, 180°, 240° | Two complementary pairs. The richest scheme and the hardest to control. |
| Square | 0°, 90°, 180°, 270° | Four colours at equal spacing. Like tetradic but more even, and easier to balance. |
The most common question a colour wheel answers is what sits opposite something. Searching for color wheel opposite colors or colour wheel complementary gets you to the same place: the colour 180° across the circle. Blue lands on orange, red on cyan, green on magenta, and yellow on violet-blue.
One thing to watch: browns and greys have no true opposite in the way a saturated hue does. Brown is a dark, desaturated orange, so its complement comes back as a muted blue rather than anything dramatic. If the result looks flat, that is the maths being honest rather than the wheel misbehaving.
The circle splits roughly in half. Reds, oranges and yellows read as warm; greens, blues and violets read as cool. The tool labels whichever side you are on as you move.
It matters because warm colours appear to advance and cool ones to recede. A warm subject on a cool background separates without any change in brightness — a trick painters used long before anyone wrote down colour theory.
This is a color wheel RGB model: red, green and blue primaries, the way light mixes on a screen. A colour wheel RGB arrangement is the right one whenever your output is a hex code, because that is exactly what a screen is doing.
The wheel taught in art class is RYB — red, yellow and blue primaries, mixing subtractively like paint. The two disagree in a visible way: on the RGB wheel the opposite of blue is yellow-orange, while on the RYB wheel it is plain orange. Neither is wrong; they model different physics. The classic twelve-colour view above shows the arrangement artists learn.
That disagreement runs deeper than it looks — the two wheels name a different opposite for every colour, not just blue. There is a five-second test with an afterimage that shows which one your own eye is using, and it is worth knowing before you pick a scheme: Color Wheel Theory — Your Screen and Your Paint Set Disagree.
Every point on this colour wheel picker carries its hex, RGB and HSL value, so you can go straight from a shape on the circle to something you can paste into CSS or a design file. A colour wheel hex read-out is the whole point of using one on a screen rather than on paper — and picking color wheel analogous or colour wheel analogous gives you three usable codes in one move. If you need a fuller set of tints and shades from one of these hues, the Shades & Tints Generator takes it further, and the Color Converter handles CMYK.