Colour Palette Generator from Photo
Pull the main colours out of any photo or screenshot, with HEX codes and CSS variables.
Using a palette in a design
- Use the largest colour as the background or base, and one strong colour for buttons and links.
- Check text contrast: dark text on light swatches and white text on dark ones (the swatch labels show which reads better).
- Keep to three to five colours per page for a clean look.
Frequently asked questions
How does the colour palette generator work?
It shrinks your photo, then groups similar pixels into the number of colours you choose (k-means clustering). Each swatch shows a main colour and how much of the image it covers.
Can I copy the colours as CSS?
Yes. Click a swatch to copy its HEX code, or copy all colours as CSS variables.
Is my photo uploaded?
No. The palette is calculated in your browser.
Why are some colours similar?
Photos with one dominant colour produce close shades. Lower the number of colours to merge them, or raise it to pick out small accents.
Related free tools
Colour converter · HEX to RGB · Favicon generator · Image resizer