Color Palette Generator
Free online Color Palette Generator. No sign-up needed, and it runs in your browser.
Get the main colours of any picture as a palette — HEX, RGB and HSL codes, how much of the picture each covers, and CSS to copy.
About Color Palette Generator
Pulling a colour scheme out of a photo, artwork or brand image helps with websites, slides, mood boards and matching a design to a logo. Choose from 4 to 10 colours, and the palette shows each one with its HEX, RGB and HSL codes and the share of the picture it covers. You can sort by use, lightness or hue, copy the set as CSS variables or JSON, or save it as an image.
How to use Color Palette Generator
- Click Browse or drop a picture onto the page, or paste a screenshot with Ctrl+V.
- Choose how many Colours you want, from 4 to 10, and an Order such as Most used first.
- Click any swatch to copy its HEX code, or read the RGB, HSL and share of each colour in the table.
- Use Copy CSS or Copy list for your code, or Download palette image to save the palette as a PNG.
How your data is handled
The colours are worked out in your browser, on your own device. Your picture, or any screenshot you paste, is never uploaded, and nothing is stored.
Limits and accuracy
- Each colour is the average of a group of similar pixels, so it may not match any single pixel exactly.
- The picture is shrunk to about 120 pixels across first, so tiny details can merge into nearby colours.
- Transparent areas are ignored, and a fully transparent picture gives no palette.
Questions and answers
How are the main colours chosen?
The picture is shrunk to a small copy and similar pixels are grouped together. Each palette colour is the average of one group, and its share shows how much of the picture that group covers. Opening the same picture again gives the same palette.
Why is a small colour, like a logo, missing from the palette?
Small details cover little of the picture, so they get merged into nearby colours. Choose 8 or 10 Colours, crop the picture to the area you care about, or use the Image Color Picker to read one exact pixel.
What do Copy CSS and Copy list give me?
Copy CSS gives CSS variables named --color-1, --color-2 and so on inside :root, ready to paste into a stylesheet. Copy list gives the HEX codes as a JSON list for code or design tools.