Color Wheel

Color Wheel shows a slice of the OKLCh colour space at one lightness: hue runs around the rim, chroma runs out from the middle, and the ragged outer edge is the real boundary of what an sRGB screen can show. Pick a point and it returns the complementary, analogous, triadic, tetradic and split-complementary schemes, each rotated in OKLCh so every colour in a scheme holds the lightness it started from.

Local-only

Hue202°Chroma0.150Lightness62%

Or start from a colour you have

That chroma is outside sRGB at this hue and lightness, so the swatches show the nearest colour your screen can display — #0098a1.

Scheme

The opposite hue, split 30° either side. Most of the contrast, less of the vibration.

3 colours

3.5 / 6.0

3.8 / 5.5

3.8 / 5.6

Ratios against white and black. A colour needs 4.5:1 to carry body text.

The colour you picked

HEX: #0098a1
RGB: rgb(0 152 161)
HSL: hsl(183 100% 31.6%)
Name: —

The scheme on a surface

A paragraph on the last colour in the scheme, so you can see whether it can carry text at all before you commit to it.

#0098a1#b66a8d#b87347

How does Color Wheel work?

Every colour wheel you have used is a slice of a colour space, and which space it is decides whether the wheel tells you anything. The familiar one is a slice of HSL at 50% lightness. Look at it: the yellow at the top is blinding and the blue at the bottom is almost black, and HSL calls them both 50% lightness. A scheme picked off that wheel is a set of colours that have nothing in common except an angle.

This wheel is a slice of OKLCh, whose lightness axis tracks what the eye actually reports. At a given setting of the slider, every painted pixel has the same perceived lightness — so moving around the rim changes the hue and only the hue, and two colours opposite each other are genuinely a matched pair rather than one shouting over the other.

What the ragged edge is

The painted area is not a disc, and that is the most informative thing on the page. Chroma runs outwards from grey at the centre, and a pixel is only painted when the colour it describes exists in sRGB. The result is the true shape of the gamut at that lightness: yellows and greens reach a long way out, blues and violets stop early, and the whole figure shrinks towards a point as you drag the lightness slider to either extreme — because a very dark or very light colour cannot be very colourful.

A wheel that filled the disc would be lying about that. It would paint the same clipped colour across the whole out-of-gamut region, and you would pick a value your screen cannot show and never be told.

How the schemes are computed

Each scheme is a set of hue rotations — 180° for complementary, ±30° for analogous, 120° steps for triadic, 150° and 210° for split-complementary — applied in OKLCh with lightness and chroma held. If a rotated hue lands outside the gamut, its chroma is pulled back by binary search until it fits, which keeps the hue and the lightness exact and gives up only the saturation that was not available anyway.

Honest about what a scheme is worth

A harmony is an arithmetic relationship, not a design. Triadic gives you three hues 120° apart; it does not tell you that two of them need to be muted to a tenth of their chroma before the third can be an accent. Interfaces are mostly built from one hue and a neutral ramp, with a second hue for a destructive action — the monochromatic option is closer to what real design systems ship than anything else on this list. Use the wheel to find the relationships and then throw most of the saturation away.

A point on the wheel

hue        202°
chroma     0.150
lightness  0.62

A scheme you can paste

split complementary

#00a2b4   base
#c48a2a   +150°
#d4739a   +210°

What options and edge cases does Color Wheel support?

The controls and what they change
Parameter	Type	Default	Behaviour & edge cases
Hue	0–360°	202	The angle around the rim. In OKLCh, changing it holds the perceived lightness — which is the whole reason to use this space.
Chroma	0–0.37	0.15	Distance from the grey centre. Not a percentage: it is an absolute measure, and the maximum available depends on both hue and lightness.
Lightness	0–1	0.62	Which slice of the space is drawn. The painted area shrinks towards a point at both extremes because dark and light colours cannot hold much chroma.
Complementary	+180°	2 colours	Maximum hue separation. Strong enough that it usually works as one accent against one dominant colour, not as a pair of equals.
Analogous	±30°	3 colours	Neighbours. The quietest scheme and the safest for a whole interface, because nothing competes.
Triadic	120° steps	3 colours	Even spacing. Balanced in theory; in practice two of the three want their chroma cut hard.
Split complementary	+150°, +210°	3 colours	The opposite hue, split either side of it. Keeps most of the contrast and loses the vibration you get from an exact complement.
Monochromatic	lightness only	5 colours	One hue at five lightnesses. Unglamorous, and what almost every shipped design system is actually built on.

Frequently asked questions

What is a colour wheel used for?

Finding colours that have a defined relationship to one you already have. Rotate the hue 180° and you have the maximum separation available; rotate 30° either side and you have neighbours that will not fight. It is a way of generating candidates quickly, not a way of choosing between them — that still takes a judgement about which colour carries the most weight and how much saturation the others should give up.

What are complementary colours?

Two hues directly opposite each other on the wheel — 180° apart. They give the strongest hue contrast available, which is why the pairing works for an accent against a dominant colour and rarely works for two colours of equal area. At full saturation an exact complementary pair can also appear to shimmer along the edge where they meet; splitting the complement 30° either side keeps most of the contrast and removes that effect.

Why does this wheel look different from the one I am used to?

Two reasons. It is drawn in OKLCh rather than HSL, so every colour in the slice has the same perceived lightness instead of merely the same number — the yellows are not brighter than the blues here. And it is not a full disc: a pixel is painted only where the colour exists in sRGB, so the outer edge is the actual gamut boundary. Filling the disc would mean painting clipped colours your screen cannot display.

Why does the wheel shrink when I move the lightness slider?

Because the range of chroma a screen can show depends on lightness. At 50% there is a lot of room; at 95% nearly everything is a pale tint and the most colourful thing available is barely saturated at all; at 5% the same is true of the dark end. The shrinking figure is an accurate picture of that, and it is why a tint ramp that holds chroma constant across all eleven steps produces fluorescent lights and glowing darks.

Which scheme should I pick for a website?

Probably monochromatic, plus a neutral grey ramp and one more hue for destructive actions. Interfaces carry far less colour than a scheme generator implies: the dominant colour is usually a background you barely notice, and the accent is a few hundred pixels of button. Analogous is the next safest. Triadic and tetradic generate good screenshots and demand a lot of restraint to ship.

Does the wheel send my colours anywhere?

No. The wheel is painted pixel by pixel in this tab with a canvas, and every rotation is arithmetic here. The page makes no network request after it loads, and the site's Content-Security-Policy sets connect-src 'self', so the browser would refuse one if something tried.

ToolsByUs team · How we check our tools