OKLCH palette generator
Pick a hue, a lightness and a chroma, and get a palette whose swatches are genuinely equally bright. Everything is gamut-mapped into sRGB before you see it, and anything that had to be pulled in is labelled.
Why not HSL. In HSL, 50% lightness is a promise about the number, not about the colour. Yellow at HSL 50% is far brighter than blue at HSL 50%, so a palette built by spinning the hue wheel comes out visually lumpy. OKLCH is perceptually uniform: hold L fixed, spin the hue, and the swatches actually match.
Why gamut mapping matters. OKLCH can name colours your screen cannot show. Naively clamping the red, green and blue channels shifts the hue and the lightness both. This tool instead holds L and hue steady and lowers chroma until the colour fits, which keeps the colour you asked for and only takes away saturation you could never have seen.
Palette
Every swatch below shares the lightness above. That is the point: differences you see are hue and saturation, not brightness.
Lightness ramp
One hue, eleven steps of lightness, chroma scaled so the pale and dark ends stay in gamut. This is the shape of a usable colour scale: a tint set you can pick text and surface colours out of.
What the flag means
A swatch marked chroma reduced asked for more saturation than sRGB can deliver at that lightness and hue. The value shown is what you will actually get. If several swatches in one palette are flagged, lower the chroma slider until they clear: the palette will be more even for it, because the flagged ones were quietly capped while the others were not.
Related
A palette that looks balanced is not the same as a palette that is readable. Check your pairs in the WCAG contrast grid or the APCA contrast grid, and see how it holds up for colour vision deficiency in the colour vision simulator.
Runs entirely in your browser. Nothing is uploaded, nothing is stored, no network calls. Back to tools.