Color Palette from Image
Extract the dominant colours of a picture as hex, RGB and HSL, with CSS and Tailwind output.
Runs in your browser Your input never leaves your device.
Drop a picture here, or .
It is read in this page and never uploaded.
Report a problem with this tool
About this tool
Drop a photo, logo or screenshot and the tool finds its main colours. It works on a reduced copy of the picture (at most 256 pixels on the long side), groups similar colours together by clustering their histogram, and reports each group's average colour with the share of the picture it covers, most common first. Colours that are very close, within about 28 steps of each other on the red, green and blue scale, are merged, so noise and compression do not split one flat colour into several, and you may get fewer colours than you asked for. You can ask for 2 to 12 colours and ignore white or black backgrounds. Each swatch shows hex, RGB and HSL, with text in a readable colour; click it to copy the hex. The result can also be copied as a list, as CSS custom properties or as a Tailwind colour scale. We tested the method on synthetic pictures of known colours and areas with added noise: every colour came back within a few steps and every share within 3 percent, and the dominant colours agreed with ImageMagick's. Photos are rich in colour, so a palette of a few colours is a summary, not an exact reproduction. The picture is processed in your browser and never uploaded.
How to use it
- Drop a picture or choose a file.
- Choose how many colours you want, and whether to ignore white or black.
- Click a swatch to copy its hex, or copy the whole palette in the format you need.
Common problems
- The palette misses a small accent colour
- Dominant colours reflect area. A small accent covers few pixels and is merged into a larger neighbour. Ask for more colours, or crop the picture to the accent.
- I get fewer colours than I asked for
- Colours that are very close are merged on purpose. A picture with few distinct colours gives a short palette.
- The colours differ from my screen
- Screens and browsers may apply colour profiles. The values are read from the picture's pixels as your browser decodes them.