Harmony generator

A harmony is a hue rotation, and the rest is consequence

Each rule on this page is a short list of angles: complementary rotates the hue 180°, triadic 120° and 240°, analogous 30° either side, split-complementary 150° and 210°, tetradic 90°, 180° and 270°. That part is arithmetic and every tool agrees on it. What the tools disagree about is what stays fixed while the hue moves, and that is what the colour-wheel control on this page changes.

Monochromatic is the one rule that is not a hue rotation at all. It holds the hue and moves the lightness, so its five swatches differ only in how light they are — which is why it stays useful for a source that a hue rule can do nothing with.

Why there are two colour wheels

Rotating a hue in HSL — the wheel every design tool draws — holds saturation and HSL lightness. HSL lightness is not perceived lightness, so the members of a set come out at visibly different brightness. Rotating in OKLCH holds perceived lightness and hue instead, so the set reads as one family. Measured across ten source colours and five rules for this engine, the worst-case spread in perceived lightness inside a single set was 0.514 on the classic wheel against 0.003 in OKLCH, with means of 0.193 and 0.001.

That is the difference between four swatches that sit together and four that fight, which is why the perceptual model is the default. It is not free, though, and the tool states the price rather than hiding it: holding lightness means giving up saturation wherever sRGB has none to give at that lightness. A fully saturated green gives up most of its chroma in a triadic set, because a vivid light blue does not exist at green's perceived lightness. The classic wheel pays in the other currency — it can never leave the gamut, and it can never keep a set flat in brightness.

The control shows both models' measured lightness spread for your colour, side by side, so the choice is made on numbers rather than on the adjectives in this paragraph.

What happens when a rotated colour leaves sRGB

A hue rotation at fixed lightness and chroma very often lands outside the sRGB gamut — measured on this engine, up to three of the four members of a tetradic set built from #00ff00. There are two honest responses and one dishonest one. The dishonest one is to write a colour the screen cannot show.

Clipping the channels is the naive answer and it loses more than saturation. Measured the same way as the path this tool takes, clipping moved the delivered lightness of a set by up to 0.167 and dragged the hue by up to 36°: the triadic partner of #00ff00 asks for 262.5° and clipping hands back 237.5°, because clamping a far-out-of-gamut blue against the sRGB boundary pulls it along that boundary instead of preserving its direction.

So this tool reduces chroma instead, with lightness and hue held exactly, the way CSS Color 4 specifies. Measured, that brings the worst hue error to 0.67° and the lightness spread to 0.003, at the cost of saturation — the one thing the classic model protects. Each swatch says how much chroma it gave up, when it gave any up.

Grey has no hue to rotate

Ask for the complementary set of a mid grey and arithmetically correct answers arrive: the same grey, twice. This is not a failure state, it is what the geometry says, and the tool tells you so rather than presenting two identical swatches as a palette.

The threshold comes from measurement rather than taste. Sweeping chroma at a fixed lightness and comparing a colour against its complement, a pair is indistinguishable below chroma ≈ 0.02 — a perceptual distance of 0.0407 at 0.02 and 0.0195 at 0.01, against the 0.04 floor this project already uses to decide whether two palette colours are distinct. Below that chroma the page recommends the one rule that still means something, because a monochromatic ramp of a grey is a genuinely useful set of greys.

What this tool does not do

• No named palettes. There is no browsing a gallery of curated schemes. The set is computed from your colour, which is the point.
• No alpha. Every colour here is opaque, as everywhere else on this site. An alpha value is refused rather than quietly dropped.
• No hue counting beyond six rules. Rules like "square" or "compound" are tetradic and split-complementary under other names, and adding a second name for the same geometry helps nobody.
• No contrast claim. A harmony set says the colours belong together; it says nothing about whether text in one clears WCAG against another, which is a separate measurement .

Where to go next

Any two colours from a set are all you need for the gradient generator , and any single swatch can be taken apart into HEX, RGB, HSL, HSV, OKLCH and CMYK by the color converter . If you would rather start from a photograph than from a colour you already have, the palette from image tool extracts a set from the picture, and the color picker reads one exact pixel out of it.