A palette you can defend
Generated in OKLCH so the steps look even, with every pairing contrast-checked and nothing uploaded.
A palette you can defend
Five colours, generated in OKLCH so the lightness steps look even rather than merely measuring even. Press Space to generate the unlocked ones. Every swatch shows the contrast it actually achieves.
Every pairing, checked
Which of these colours can carry text on which. A tick is the WCAG 2.2 ratio at full precision, not a rounded one.
On a real interface
The palette mapped onto semantic roles. The table below the preview is the same information without needing to look at it.
Export
How the colours are chosen
Generation happens in OKLCH. A palette built by picking HSL values at even lightness produces a yellow that glares and a blue that sinks, because equal HSL lightness is not equal perceived lightness and the gap is widest exactly at those hues. OKLCH is built so that equal numbers look equal.
Locks are hard constraints. A locked swatch is never altered by any mode, and the remaining colours are generated around it rather than in spite of it.
The seed makes it reproducible. The same seed, mode, count and locks produce the identical palette. That is what lets a share link work and a saved project reopen unchanged.
Colours outside sRGB are brought in by reducing chroma at constant lightness and hue, and marked. Clipping each channel instead would shift the hue silently.
Why the middle of a gradient goes grey
Blend blue into yellow in sRGB and the midpoint is a muddy grey-green. The two colours are on opposite sides of the space and the straight line between them passes near the achromatic axis.
The same blend in OKLab keeps the chroma up across the transition, because the space is arranged so that a straight line between two colours passes through what a person would call the colours in between. Every ramp and gradient on this site interpolates that way.
A palette is not accessible; a pairing is
"WCAG AA palette" is not a meaningful claim. Contrast is a property of two colours together, so what matters is which of your colours can carry text on which — and that is what the matrix above shows.
A five-colour palette has twenty ordered pairings. Usually three or four of them work for body text, and knowing which three is the useful output.
What locking is for
Most real palettes start from something fixed: a brand colour, an existing background, a colour someone has already signed off. Lock it and generate around it, rather than generating freely and then trying to bend the result back.