Complementary Colour Palette Generator

How to Use This Tool

Pick a colour and a harmony. You get the palette computed properly, and the same rotation done in HSL underneath so you can see what the difference costs.

Why HSL harmonies are unreliable

HSL was designed in the 1970s to be cheap to compute, not to match vision. Its lightness channel is not perceptual lightness: hsl(60 100% 50%) is a blazing yellow and hsl(240 100% 50%) is a dark blue, and HSL calls both of them “50% lightness”.

So rotating the hue wheel changes how bright the colour looks, by a lot, without being asked to. Rotate 180° from a mid blue and the “complement” arrives about twenty-four points lighter. That is why generated palettes so often contain one swatch that fights everything else.

What OKLCH does differently

OKLCH separates L (perceptual lightness), C (chroma) and H (hue) so that they are actually independent. Rotating H leaves L alone, so every colour in the harmony has the same visual weight unless you deliberately change it.

Two consequences worth knowing:

Some rotations fall outside sRGB. A vivid colour rotated in OKLCH can land on something your screen cannot display, and it has to be pulled back in. This tool reduces chroma until the colour fits, which preserves hue and lightness — the two things you asked for.
OKLCH is real CSS. oklch(0.63 0.19 258) works in every current browser, so you can ship the values rather than converting them to hex and losing the relationship.

The model is not wrong, it just is not measuring what the word suggests.

Contrast is part of a palette

Every swatch shows its contrast ratio against black and against white, because a palette you cannot put text on is unfinished. A colour that reaches 4.5:1 against neither is decoration only — usable as a background behind an image, not behind a label.

What harmony does not decide

Colour harmony rules are a starting point, not a result. They say nothing about proportion, and proportion is most of the effect: the same three colours used 60/30/10 and 33/33/33 look like different palettes. Nor do they know about the meaning colours carry in your context — red for error is a convention no wheel can derive.

Frequently Asked Questions

Why do generated colour palettes often contain one colour that looks wrong?

Usually because the palette was built by rotating hue in HSL, whose lightness channel is not perceptual. Rotating from a mid blue to its complement can produce a colour roughly twenty-five points lighter without anything asking for that, so one swatch ends up with a completely different visual weight from the others.

What is OKLCH and why use it here?

A colour space where lightness, chroma and hue are genuinely independent, designed so that equal numerical steps look like equal steps. Rotating hue leaves lightness alone, which is what a harmony is supposed to do. It is also valid CSS in every current browser, so the values can ship as written.

Why does my vivid colour become less saturated in the result?

Because the rotated colour fell outside what an sRGB screen can display. Something has to give, and this tool reduces chroma while holding hue and lightness — the two properties you actually asked for. A tool that clipped the channels instead would shift the hue and change the colour you chose.

Is complementary always 180 degrees?

In the arithmetic sense yes, but the classical artists' wheel is not the same wheel as a digital one. The traditional complement of red is green, while on an RGB wheel it is cyan. Neither is wrong; they are different models. This tool uses the perceptual wheel, which is the one that keeps the two colours at equal visual weight.

Does a harmony guarantee a good palette?

No. The rules say nothing about proportion, and proportion is most of the effect — the same three colours at 60/30/10 and at 33/33/33 look like different palettes. They also know nothing about convention, such as red meaning error. Treat the output as a starting point.

Is anything sent to a server?

No. The colour space conversions are arithmetic done in your browser.

Colour Harmony Generator That Rotates Hue Where Your Eye Actually Is

How the calculation works