Palette generators are everywhere. Almost none of them tell you whether the combinations are actually readable, which is the thing you most need to know.

1. Generate from a base colour

palette-generator.txt
Build a colour palette generator, browser-only.

- Input one base colour, generate a full palette: a tint scale (50 to
  900), plus complementary, analogous and triadic options.
- Work in a perceptual colour space (OKLCH or LCH), not HSL —
  explain the difference in one line, since HSL produces scales with
  uneven perceived lightness.
- For every pair of colours in the palette, compute the contrast
  ratio and flag which pass AA and AAA for normal and large text.
- Preview the palette as an actual interface — buttons, text, cards —
  not just swatches.
- Export as CSS custom properties, Tailwind config, and JSON.

2. Perceptual colour space is the differentiator

HSL is easy and produces bad scales: yellow at 50% lightness and blue at 50% lightness look nothing alike in brightness. OKLCH is designed so equal lightness values look equally light, which makes generated scales usable rather than merely mathematical.

This is the thing most generators get wrong and it's the reason their output needs hand-fixing.

3. Contrast, prominently

Show the ratio next to every pairing, with a clear pass or fail. This turns the tool from "pretty colours" into "colours you can ship".

Include a simulation of the palette for common types of colour blindness — it takes a small matrix transform and catches combinations that rely entirely on hue.

4. Preview in context

Swatches lie. The same palette looks completely different applied to a real layout with text, backgrounds and borders. Show a mock interface, in both light and dark, and let the user toggle.

Export CSS custom properties as the primary format. It's what people actually paste into a project, and it makes dark mode a token override rather than a second stylesheet.