Choosing a palette

One hex, five steps

Give a palette a hex and GenCSS derives the whole ramp in OKLCH — a perceptual colour space, so a step that is lighter looks lighter by the same amount everywhere, rather than by whatever the numbers happened to do.

Each palette gets light-2, light-1, the base, dark-1 and dark-2, plus nine transparency variants.

Tints lose chroma on purpose

The lighter steps deliberately reduce chroma and the darker ones do too. This is not a rounding artefact — it is what stops a pale tint looking radioactive and a deep shade looking muddy.

If you hand-edit those values to “fix” them you will get neon tints back, and the edit will be overwritten on the next save anyway.

Check the pairing, do not eyeball it

The one thing worth doing by hand: check the contrast of the pairings you actually use.

A perceptually even ramp is not the same as an accessible one. A mid-tone brand colour can look strong and still fail against white at body size — 4.5:1 is the floor for normal text, and plenty of pleasant-looking blues sit just under it.

Where a pairing fails, the usual fix is to move one step darker rather than to change the palette.

Adding a palette of your own

You are not limited to the six built-in names. Any name=#hex pair added to the config generates exactly like a built-in — same shade deltas, same transparencies.

Prefer this to inventing a one-off colour in a user block, because a real palette gets swatches and appears in the token pickers in BooshDESIGN.