Harmonies that hold their lightness

Hue offsets applied in OKLCH, so the set comes back at one perceived lightness rather than a glaring yellow beside a sunken blue.

Home › Professions › Design › Colour harmony

Harmonies that hold their lightness

Hue offsets applied in OKLCH, so the set comes back at one perceived lightness instead of a glaring yellow beside a sunken blue.

Local tool — nothing you make here is uploaded
Nothing here leaves this browser. Colours, images, SVG and generated code are processed on your own device. No file is uploaded, nothing you enter is stored on a server, and none of it is passed to the analytics or advertising scripts on this page.
Out-of-gamut colours lose chroma, not hue. Where a colour cannot be shown in sRGB it is brought in by reducing its chroma at constant lightness and hue, and the amount lost is reported. Clipping each channel instead is faster and quietly changes the colour.
The offsets, and where they come from

Complementary is 180°. Analogous is −30, 0, +30. Triadic is 0, 120, 240. Split complementary is 0, 150, 210. Square is 0, 90, 180, 270. Tetradic is 0, 60, 180, 240. Monochromatic holds the hue and moves lightness.

These are conventions from colour theory taught for pigment. They are a starting point that reliably produces a related set — not a law, and not a guarantee that the result suits the work.

Applying them in OKLCH rather than HSL is the part that matters: the rotation keeps lightness and chroma, so the whole set reads as one family.

The same rotation in two spaces

Rotate a blue 180° in HSL and you get an orange that looks far brighter, because HSL lightness does not track perception and the two hues sit very differently against it.

Rotate it 180° in OKLCH and the orange comes back at the same perceived lightness. That is why a harmony generated here can be dropped into a UI without one member dominating.

Harmony is not the same as usable

A triad is a related set. Whether any two of them can carry text on each other is a separate question with a numeric answer, and the table above gives it.