Image Palette Extractor
The colours a photograph is actually made of, as hex, RGB and ready-to-paste CSS variables.
Runs entirely in your browser
Loading tool...
How to use
- Drop in a photograph, screenshot or logo.
- Choose how many colours you want back.
- Copy a single hex value, or the whole palette as CSS custom properties.
- Turn off the white and black filter if the image is meant to be monochrome.
Features
- Groups near-identical shades so you get a palette, not eleven greys.
- Each swatch is the average of the pixels in it, so the colour shown really occurs in the image.
- Reports how much of the image each colour covers.
- Runs entirely in the page — the image is never uploaded.
Frequently asked questions
- Why are white and black hidden by default?
- Because most photographs have a lot of both and neither tells you anything about the image’s character — a palette of “white, off-white, near-black” is technically correct and useless. The filter drops pixels very close to either end so the colours you get back are ones you could actually design with. Turn it off for a black-and-white image.
- Why do the percentages not add up to 100?
- They are shares of the pixels that were counted, and only the colours shown are listed. Anything filtered out — transparent pixels, near-white, near-black — is excluded from the total, and colours beyond the number you asked for are not shown. The shares that are listed are exact for the pixels sampled.
- Is my image uploaded?
- No. The file is decoded and measured by your own browser, and nothing is sent anywhere. You can confirm it by turning off your network connection and using the tool anyway — it will still work.
Related tools
A full shade scale from one colour, with the text colour that actually passes contrast on each step.
Convert between hex, RGB and HSL, and check whether two colours are readable together.
Build a gradient, see it full width, and copy the declaration — with stop positions left to CSS unless you set them.