◑Color Palette Generator

Most interfaces need far less colour than a palette generator suggests.

One brand colour, one accent for actions, and a neutral scale from near-white to near-black covers the majority of what a site actually renders. The generated palettes here are a starting point for the first two — the neutrals do most of the work and nobody generates those.

The mistake

Spreading five equally strong colours evenly across a page. A rough guide that holds up: a dominant colour on most of the surface, a secondary on considerably less, and an accent on a small fraction — reserved for the things you want people to click.

If everything is emphasised, nothing is. An accent used on six different elements has stopped being an accent.

Swatches lie

A hue that looks balanced in a row of squares can feel overwhelming as a full-width background, because area changes how saturated a colour reads. Test the palette in context early — a real section, real text on it — rather than approving it as a strip.

It optimises for harmony, not accessibility

This is worth being explicit about. A generator arranges colours that sit pleasantly together. It has no idea whether your body text will be legible on any of them.

Every text-on-background pairing needs checking in the contrast checker before it goes anywhere near a build. This is the single most common way a nice-looking palette fails an audit later.

Where to put them

As custom properties in one block at the root, referenced everywhere else. Changing a brand colour six months later becomes one edit instead of forty, and it makes a dark mode plausible rather than a rewrite.