Colour Palette Generator

Find a colour scheme you like in a few key presses, then see how it works on a real page.

How to make a colour palette

  1. Press Space to generate, and lock the colours you like.
  2. Click a HEX to edit, use the shades button, drag to reorder, + to add.
  3. Preview, check contrast, then export or copy the link.

About Palette Generator

Generate beautiful colour palettes with the Space bar.

Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.

Good for

  • Brand identities and websites
  • UI themes and dashboards
  • Illustrations, presentations and social posts

Tip: Undo with Ctrl+Z if you generate past a palette you liked.

Frequently asked questions

How do I make a palette?

Press the Space bar (or Generate). Lock the colours you like and press Space again — only the unlocked ones change. Click a HEX code to fine-tune it.

Which harmony modes are there?

Auto, analogous, monochromatic, complementary, triadic, split complementary, tetradic, pastel, vivid, dark and moody, earthy, and neutrals with an accent — all made in OKLCH so lightness steps look balanced.

Can I see the palette on a real design?

Yes — “Website preview” applies it to a sample page, “Contrast” shows which pairs are readable, and “Colour blindness” shows the palette as people with colour vision deficiency see it.

How do I export or share it?

Export as CSS, SCSS, Tailwind, JSON, PNG, SVG, GIMP/Inkscape .gpl or Adobe .ase — or copy the link; the palette is stored in it. Save favourites in your browser with Save.

How many colours should a palette have?

Five is a good start: one or two main colours, a neutral for backgrounds and text, and an accent for buttons and links.

Related tools

← Back to all tools