Image to colour palette
Extract a colour palette from any image. Choose 3 to 12 colours and copy them as HEX, CSS variables, Tailwind or JSON, or save a palette image.
Loading tool…
How does an image palette generator work?
A palette generator looks at every pixel in an image and groups similar colours together, then picks one representative colour from each group. The result is a small set of colours that captures the look of the photo, ready to use in a website, brand kit, presentation or illustration.
You choose how many colours you want, from 3 to 12. The palette can be sorted by how much of the image each colour covers, or by lightness, and exported in the format you need. Everything happens in your browser, so your images are never uploaded.
How it works
Add an image
Select, drop or paste a photo or artwork.
Choose the number of colours
Pick between 3 and 12 colours and how to sort them.
Export
Copy HEX codes, CSS variables, Tailwind colours or JSON, or download a PNG swatch.
Guide
- How to get colours and a colour palette from an image
Find the dominant colour of an image or extract a full colour palette with HEX, RGB and HSL codes, and export it for CSS, Tailwind or design apps.
Questions
How many colours should a palette have?
Five is a good starting point for websites and brands: a main colour, a secondary colour, an accent, and a light and dark neutral.
Can I use the palette in Tailwind CSS?
Yes. Choose the Tailwind format and paste the colours into the theme section of your Tailwind config.
Are transparent areas included?
No. Fully transparent pixels are skipped, so logos and icons on transparent backgrounds give their real colours.
What's the difference from the dominant colour tool?
The dominant colour tool focuses on the single main colour. This tool builds a full palette and exports it in several formats.
How do I generate a colour palette from an image?
Add the image, choose how many colours you want (3 to 12), and copy them as HEX codes, CSS variables, Tailwind or JSON.