Tools

Palette Generator

Press the spacebar to generate colour palettes. Lock the ones you love, tune the rest, check contrast and colour-blindness, then export.

Loading palette…

About Palette Generator

Palette Generator is a free colour-palette tool for designers and developers. Press the spacebar to generate harmonious palettes, lock the colours you like, fine-tune the rest, check WCAG contrast and colour-blindness, then export to CSS, SCSS, Tailwind, JSON, SVG or PNG. You can even extract a palette from an image — and it all runs in your browser.

How to use Palette Generator

  1. Press the spacebar to generate a new palette.
  2. Click the lock icon to keep colours you like while you keep exploring.
  3. Fine-tune any colour, build harmonies, or extract a palette from an image.
  4. Check WCAG contrast and colour-blindness, then export to CSS, SCSS, Tailwind, JSON, SVG or PNG.

Frequently asked questions

How do I generate a colour palette?
Press the spacebar — each press creates a fresh palette. Lock the colours you want to keep and press again to explore variations around them.
Can I check accessibility?
Yes. Built-in WCAG contrast checks and colour-blindness simulation help you confirm a palette is accessible.
What export formats are supported?
CSS, SCSS, Tailwind config, JSON, SVG and PNG.
Can I create a palette from an image?
Yes. Upload an image and the generator extracts a colour palette from it.
Is it free and private?
Yes. It is free, needs no account to use, and runs entirely in your browser. Optional sign-in only adds syncing of saved palettes.
How do I extract colours from an image?
Upload an image and the generator samples it to build a colour palette you can then refine and export.
How do I export a palette to Tailwind or CSS?
Open the export menu and choose CSS, SCSS, Tailwind, JSON, SVG or PNG to copy or download your palette in that format.