Image Color Palette Extractor

Rank the dominant colours in a photo and read each as HEX, RGB and HSL.

Free
No signup
Files stay in your browser

Browser onlyYour data never leaves this device.

The picture is decoded by your browser and read pixel by pixel on your own device. Nothing is uploaded, no copy is stored, and the colour list is computed from the file you chose and then forgotten when you close the tab.

Details: Privacy policy

Input

Image

Drop files here or Browse

Drag and drop works here too.

One PNG, JPEG, WebP, GIF or AVIF, up to 25 MB.

Result

No image yet.

Choose an image to rank its dominant colours. The photo is measured on this device.

Image Color Palette Extractor answers a different question from a colour picker. A picker asks you to aim at one pixel and tell it what you meant; this tool reads the whole image, counts every opaque pixel into a coarse colour bucket, and reports the buckets that actually cover the picture, largest first. Each result is printed three ways — the six-digit HEX you paste into a stylesheet, the decimal RGB a design tool expects, and the HSL notation that makes a shade easy to nudge — together with the share of the image that colour occupies, so you can see whether you are looking at a background, a garment, or a single highlight. Near-identical buckets merge, and slivers under one percent are dropped, because a photograph contains thousands of almost-colours and a palette with forty entries helps nobody. The output is a ranked shortlist, not a curated brand palette: it describes what the file contains rather than deciding what looks good. Everything is measured on a canvas in your browser, so the photo never travels, and the exported CSS or JSON contains exactly the values shown on the page. If you need the exact colour of one point instead, the Image Color Picker does that job and the two tools are linked from this page. Each swatch carries all three notations on one line, so whoever reads the palette - designer, developer or printer - is looking at the same value. Swatches keep their ranking when you change the count, so a shorter list is a prefix of the longer one rather than a reshuffle.

How to use Image Color Palette Extractor

Choose one image; the browser decodes it and measures every opaque pixel.
Set how many colours you want (2–12) and read the ranked list with its coverage share.
Copy a single value, or download the whole palette as CSS custom properties or JSON.

When to use Image Color Palette Extractor

Pull a website or slide palette out of a product photo, then paste the HEX values straight into CSS custom properties.
Build a mood board from a set of screenshots and keep the dominant tones as JSON for a design system.
Check what a printed poster will lean towards before committing ink, by ranking the areas that carry the most colour.

Frequently asked questions about Image Color Palette Extractor

How is this different from the Image Color Picker?

The picker is manual: you click a point and it prints that pixel's HEX, RGB and HSL. This tool is automatic: it ranks the colours by how much of the image they cover. Use the picker when you know which pixel you mean, and this extractor when you want to know what the picture is made of.

Why does the first colour look like the background?

Because it is ranked by area. The largest region in most photographs is the background or the dominant surface, so it wins. The accent colour you noticed is usually further down the list, with a smaller share shown next to it.

Why are the HEX values slightly different from my design software?

Two reasons, both deliberate. The tool groups pixels into coarse buckets and reports the average of each group, and your browser converts the file into sRGB before measuring. A desktop editor may keep a different colour profile or sample a single pixel, so expect small differences rather than an exact match.

Is my image uploaded to work out the palette?

No. The file is read by the browser, drawn onto a canvas and measured in memory. There is no upload step, no server-side copy and nothing stored; closing the tab discards everything.

Color Converter
Convert any colour between HEX, RGB, HSL, HSV and CMYK, with WCAG luminance.
Image Color Picker — sample exact pixel colours from an image and read them
Sample exact pixel colours from an image and read them as HEX, RGB, and HSL values.
Mesh Gradient Generator
Mesh gradient generator to create fluid multicolor backgrounds, copy production CSS, and export high-resolution SVG or 4K PNG wallpapers.
Aspect Ratio Calculator — reduce two dimensions to their simplest ratio
Reduce two dimensions to their simplest ratio, find the missing width or height, and check a size against a ratio.
Base64 to Image
Decode a data URL or raw Base64 string back into a verified PNG, JPEG, WebP, or GIF image.
Image to Base64 — turn a PNG
Turn a PNG, JPEG, WebP, or GIF into a Base64 data URL or raw text without uploading it.

⚡Embed Image Color Palette Extractor on Your Site & Get Badge↓

Embed this in-browser tool into any blog, documentation, or dashboard. Includes an optional dofollow backlink badge to credit Tools Hub.

Include "Powered by Tools Hub" attribution badge

Height:

<iframe src="https://salaq.com/embed/image/color-palette-extractor" title="Image Color Palette Extractor — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">Powered by <a href="https://salaq.com/tools/image/color-palette-extractor" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">Image Color Palette Extractor on Tools Hub</a></p>

Feedback

Send feedback about this tool (placeholder — feedback collection is not wired up yet).

Privacy

Limitations

The list is weighted by area, not by taste: the colour covering the most pixels ranks first, which is usually a background rather than the accent you noticed.
Colours are grouped into coarse buckets and each entry reports the average of the pixels inside it, so a subtle gradient appears as one colour rather than forty.
Near-identical buckets within 12 levels per channel are merged, and anything covering under 1% of the image is dropped so stray edges do not make the list.
Fully transparent pixels are ignored; partly transparent ones count at their visible colour.
Browsers decode into sRGB, so a wide-gamut or CMYK-tagged image is measured after conversion — expect a few levels of difference from a desktop editor.
The image is measured at up to 512 px on its long edge, which keeps a large photo fast and does not change which colours dominate.
One image per run, up to 25 MB, returning between 2 and 12 colours.