How it works

How the Colour Palette Generator works

Build a harmonious palette from one colour using OKLCH, so every step is perceptually even. Includes tints, shades and an automatic WCAG check on each swatch.

Try Colour Palette Generator now

The method

Harmonies are computed in OKLCH, not HSL: HSL lightness does not match perceived lightness, so HSL yellow and blue at the same value differ by roughly 4x in actual luminance, producing lumpy palettes. OKLCH is perceptually uniform, so holding lightness constant looks even across hues, and the ten-step ramp stays evenly spaced.

Step by step

1
Pick a base colour.
2
Choose a harmony — complementary, analogous, triadic or a monochrome ramp.
3
Check the contrast badge on each swatch.
4
Copy the palette as CSS custom properties or Tailwind tokens.

What it doesn't do

Very saturated inputs may shift slightly, since out-of-gamut OKLCH colours get clamped to sRGB.
A generated palette is a starting point, not a brand — it carries no meaning of its own.

Frequently asked

Why OKLCH instead of HSL?

Because HSL lightness does not match perceived lightness. In OKLCH, holding lightness constant across hues produces swatches that actually look equally light.

Are the generated colours accessible?

Each swatch is checked against white and black text and labelled with its ratio, so you can see immediately which ones can carry text.

Can I use these commercially?

Yes. Colours are not copyrightable and there is nothing to attribute.

Need this built into your business?

This tool is free because it's a small, solved problem. If what you actually need is bigger — branding & design, built and maintained for you — that's Scult's day job.

EXPLORE BRANDING & DESIGN