Making a palette
Press Generate or the space bar and every colour that is not locked is replaced. Press the padlock on a colour to keep it; the next palette is built around the first locked colour. Click a colour to change it with your system's picker, or type a hex code, rgb(), hsl() or a name like teal into its code. Drag a colour by its grip to move it, or focus the grip and use the arrow keys. Between 2 and 10 colours fit in a palette.
The harmony rules
The rules work in OKLCH, a way of describing colour by lightness, chroma (how colourful) and hue that matches what the eye sees much better than HSL does. Analogous turns the hue a little at a time, Complementary uses the hue and the one opposite it (180° round), Triadic uses three hues 120° apart, and Monochrome keeps one hue and steps from light to dark. Random wanders gently round the wheel. Every rule spreads the lightness out, so the colours read as different from each other, and a colour that a screen cannot show loses a little colourfulness rather than changing hue.
Readable text and exports
Each colour shows whether white or black text on it is easier to read, its WCAG contrast ratio, and whether that passes AA for normal text (4.5:1), only for large text (3:1), or fails. The palette is kept in the page's address, so Copy link or a bookmark brings it back. Export it as CSS variables, JSON with HEX, RGB and OKLCH, a Tailwind config, a GIMP or Inkscape .gpl palette, or a PNG strip.
Questions
Is a generated palette any good?
It is a starting point. The rules keep colours apart in lightness and pick hues that sit well together, but taste and use decide: a palette for a website needs a calm background and text colour as much as bright accents. Lock what works and generate again.
Can I start from my brand colour?
Yes. Type it into any colour's code, lock it, and press the space bar. With a rule like Complementary the others are worked out from it.
Why does the address change?
The colours, locks and rule are written after the # in the address, so the link is the palette. Nothing is stored or sent anywhere; the part after # never leaves your browser.
Does it check colour blindness?
No. For text, check the exact pair with the Contrast Checker. To take the colours from a photo instead, try Palette from Image.