How to get colours and a colour palette from an image
Updated 21 October 2026
Tool for this guide: Image to palette
Short answer: for one main colour, use the dominant colour extractor. For a full palette of 3 to 12 colours with HEX codes, CSS variables, Tailwind config or JSON, use image to palette.
Which tool?
| You need | Tool |
|---|---|
| The main colour of a photo or logo | Dominant colour extractor |
| The average colour (e.g. for a loading placeholder) | Dominant colour extractor |
| A palette for a website, brand or presentation | Image to palette |
| To convert one code between HEX, RGB and HSL | Colour converter |
Dominant vs average colour
- Dominant is the colour group covering the largest part of the image.
- Average blends every pixel. A red flower on green leaves can average to brown, even though neither colour is brown.
Step by step: build a palette
- Open image to palette and add a photo or artwork.
- Choose how many colours (3 to 12) and sort by coverage or lightness.
- Copy the colours as HEX, CSS variables, Tailwind or JSON, or save a palette image.
Images are processed in your browser. Fully transparent pixels are skipped, so logos on transparent backgrounds give their real colours.
A simple 5-colour brand palette
| Role | Use |
|---|---|
| Main | Buttons, links, highlights |
| Secondary | Section backgrounds, illustrations |
| Accent | Badges, small details |
| Light neutral | Page background |
| Dark neutral | Text |
Check that text colours are readable with the contrast check in the colour converter: WCAG asks for at least 4.5:1 for normal text.
Questions
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 counted?
No. Fully transparent pixels are ignored.
Try it now
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.
Open image to palette