Colour palette generator
Build harmonious colour palettes from a base colour, or extract one from an image. Click a swatch to copy its HEX, and export the palette as CSS, JSON or a PNG. Fully offline.
Open Colour palette generator →What is the colour palette generator?
A free, private tool for building harmonious colour palettes from a base colour, or pulling a palette out of an uploaded image. Pick a harmony rule and the swatches update live, with a matching strip of tints and shades. Everything runs in your browser, so images you drop in are never uploaded, and it keeps working offline after the first load.
How to use Colour palette generator
- Pick a starting point — Choose the 'From a colour' tab and set a base colour with the picker or by typing a HEX value, or switch to 'From an image' and choose a photo.
- Choose a harmony — Select a rule — complementary, analogous, triadic, tetradic, split complementary or monochromatic — and the palette regenerates around your base colour.
- Explore variations — Use the tints and shades strip for lighter and darker steps, or hit Random to jump to a fresh base colour.
- Copy or export — Click any swatch to copy its HEX, copy the whole palette as CSS variables or JSON, or download a PNG swatch sheet.
Frequently asked questions
Is my image uploaded when I extract colours?
No. The most common colours are pulled out on your own device, so the image never leaves your browser.
Which harmony should I use?
Complementary and split give bold contrast, analogous and monochromatic stay calm and cohesive, and triadic or tetradic balance several distinct hues. Try a few and judge by eye.
How do I copy a single colour?
Click any swatch and its HEX value is copied to your clipboard, ready to paste into your design tool or code.
What formats can I export?
You can copy the palette as CSS custom properties or as a JSON array, or download a PNG swatch sheet of the colours.
Does it remember my last palette?
Your base colour and chosen harmony are saved on your device, so they are still there when you reopen the tool.
Tips
- Click a swatch to grab its HEX instantly — no need to retype it.
- Copy as CSS variables to drop a ready-made palette straight into your stylesheet.
- Extract from a photo to match a palette to an existing brand image or mood board.
- Use the tints and shades strip to find hover, border and background shades of your main colour.