Build a colour palette
Type a colour and a matching set appears, rotated in a perceptual space so the swatches actually look like they belong together.
How it works
A harmony is a rule about hue. Complementary means the opposite side of the wheel, triadic means three points evenly spaced, analogous means neighbours. The rule is the easy part. What separates a palette you can use from one you have to repair by hand is the space the rotation happens in, and most generators pick the one place where the answer comes out wrong.
Why rotating hue in HSL gives you mismatched swatches
HSL looks like it should work. It has a hue dial, so turning it seems like the obvious move. But its L is only the midpoint between the largest and smallest of the three channel values, computed on numbers already gamma-encoded for a display. It is a convenient piece of arithmetic. It is not a measurement of anything a person sees.
The consequence is easy to check. Pure yellow and pure blue both sit at L 50 percent in HSL. Measured as light, yellow is over ten times more luminous. So a triad rotated in HSL arrives as one swatch that glares, one that sinks, and one somewhere between, all three insisting they share a lightness. Designers then nudge each one by eye until the set balances, which is the work the generator was supposed to have done.
OKLab was fitted to eyes, not to convenience
OKLab, published by Bjorn Ottosson in 2020, is built so distance in the space tracks perceived difference, and so changing hue while holding lightness and chroma leaves apparent brightness alone. It was fitted against datasets collected from people looking at colours. Its polar form, OKLCH, keeps lightness and chroma and turns hue into an angle, which is exactly the dial a harmony rule wants to turn.
The conversion is short and entirely public. Undo the display gamma curve, multiply by a three-by-three matrix into a cone-response space, take the cube root of each component, then multiply by a second matrix. Reverse those four steps to come back. This page runs both directions on every keystroke, and a colour that makes the round trip returns the byte it started from.
What happens when a rotation leaves the gamut
The set of colours a screen can show is a lumpy solid, not a ball. At one lightness there is far more room in yellow than in blue, so a rotation at constant chroma will sometimes ask for something no display can produce. The usual response is to clamp the three channels into range, which drags hue and lightness somewhere else and quietly undoes the reason for using a perceptual space at all.
This page lowers chroma instead, searching for the most colourful version that keeps the exact lightness and hue that was asked for. The swatch comes out flatter than its siblings and stays the colour it was meant to be. Any row where that happened says so, and gives the value it settled on, because a palette that silently repairs itself teaches you nothing about why one entry looks washed out next to the rest.
Contrast decides whether a palette is usable
A colour you cannot put text on is decoration. Every swatch here carries a ratio for white text and for black text, and names the size that passes: 4.5:1 is the AA threshold for body text, 3:1 covers large text at 18pt or bold 14pt, and 7:1 is AAA for body text. The scale runs from 1:1 to a maximum of 21:1, which is black on white.
One property of that formula deserves more attention than it gets. A colour's ratio against white multiplied by its ratio against black is always exactly 21, so improving one necessarily ruins the other. A useful thing falls straight out: since 4.5 squared is 20.25, and the product is 21, no colour can fail AA body text against both inks. Every colour ever picked takes white text or black text at 4.5:1. AAA at 7:1 is the first bar a colour can miss both ways, and that is the one worth checking.
Worth saying plainly on a page arguing for perceptual maths: this ratio is a legal threshold rather than a model of perception. It is computed from relative luminance, which weights green far above blue and takes no account of the colours involved, and it is widely held to judge light text on dark backgrounds too harshly. It is still the number an audit will measure you against, so it is the number reported here.
Questions
Why do some swatches look less saturated than the base?
Because sRGB could not hold that much chroma at that hue and lightness. The gamut is far wider in yellows and oranges than in blues and violets, so rotating a vivid orange towards blue asks for something no screen can display. Chroma is lowered until it fits, keeping lightness and hue exact, and the row tells you the value it settled on.
Is chroma the same thing as saturation?
No, and the difference matters here. Chroma is an absolute distance from grey. Saturation is chroma expressed as a proportion of lightness, so a dark colour and a pale one can share a saturation figure while looking nothing alike. OKLCH uses chroma, which is why two swatches carrying the same number look equally colourful rather than merely equally extreme for their own brightness.
What notations can I paste into the box?
Hex at 3, 4, 6 or 8 digits with or without the leading hash, any of the 148 CSS colour names, rgb(), hsl() and oklch(). Anything carrying an alpha channel has it read and then dropped, since a translucent swatch has no fixed contrast ratio. Half-typed values are read as far as they go rather than rejected, so the preview keeps moving while you type.
How many colours should a palette have?
Interface work usually wants fewer than people expect: one accent that carries meaning, one neutral ramp, and a couple of supporting hues. Past about five distinct hues a set stops reading as deliberate. The count goes to nine because the monochromatic ramp is the exception, where eight or nine steps is an ordinary run of design tokens.
Why does the base colour appear in every scheme?
Because it is the one colour you chose, and a generator that hands back a set not containing it has answered a question you did not ask. Every scheme emits it first. In the monochromatic ramp it keeps its exact lightness, and the other steps are spread across whatever room is left above and below it.