How are the dominant colors calculated?

The image is downscaled to at most 80 pixels on its longest side, every remaining pixel is sorted into one of 4,096 color buckets (4 bits per RGB channel), and the six buckets containing the most pixels become the palette. Each swatch shows the average color of the actual pixels in its bucket, so it stays true to the image rather than snapping to a grid.

Why don’t the swatches match the color I expected?

Usually three reasons. Dominance is measured in pixel count, while your eye weights vivid, saturated areas more heavily; each swatch is an average over a bucket, which softens extremes; and anti-aliased edges blend neighbouring colors into in-between shades. Cropping to the area you care about gets you closer to the color you have in mind.

Why do two swatches look almost identical?

A smooth gradient — sky, skin, a soft shadow — spans several adjacent buckets, and more than one of them can rank in the top six. That is a faithful description of the pixel distribution, even if it feels redundant as a palette. Crop the gradient out, or just keep one of the pair.

Why did I get fewer than six swatches?

Flat graphics with few distinct colors — logos, icons, UI screenshots — may occupy fewer than six buckets in total. The tool then shows every color family it found rather than padding the list.

Does transparency affect the palette?

Pixels with alpha below 125 of 255 (about 49% opacity) are skipped entirely, so the empty background of a transparent PNG or a cut-out logo doesn’t leak into the palette. Semi-opaque pixels above that threshold count at the color values they actually carry.

Which image formats work?

Anything your browser can decode into pixels: JPG, PNG, WebP and GIF everywhere, plus formats like AVIF where the browser supports them. Animated GIFs are sampled from their first frame.

Is my image uploaded?

No. The file is decoded and sampled with a canvas entirely on your device — nothing is transmitted or stored, and extraction even works offline once the page has loaded.

Image Color Extractor

Extract the dominant colors and palette from an image in your browser.

Runs in your browser — files never leave your device

Drop an image, or click to chooseColors sampled on your device

How it works

Drop any image and the tool returns its six most dominant colors as clickable swatches — click one and its HEX code is on your clipboard. It’s built for turning a photo, logo or screenshot into a working palette in a couple of seconds, with every pixel processed on your own device.

The extraction is a quantize-and-count pass. The image is first downscaled so its longest side is at most 80 pixels — no more than 6,400 pixels to examine, which keeps even large photos fast — and read from a canvas. Each pixel’s red, green and blue values are quantized to 4 bits per channel (16 levels), which maps every color into one of 4,096 buckets: rgb(51, 102, 153) lands in bucket 3-6-9 along with its close neighbours. Pixels that are mostly transparent — alpha below 125 of 255, roughly 49% — are skipped so the empty background of a cut-out PNG doesn’t pollute the result.

Buckets are then sorted by pixel count and the top six win. Each swatch shows the average of the real pixels inside its bucket, not the bucket’s geometric center, rounded and formatted as uppercase HEX — so shades stay faithful to the source image. Ordering means coverage: the first swatch is the color family occupying the most area, which in product shots is often the background.

Typical jobs:

Building a CSS theme from a hero photograph
Recovering brand colors from a logo when no style guide exists
Moodboards and palette exploration from reference imagery
Matching UI accents to user-uploaded content

Know the gotchas. Dominant means most pixels, not most memorable — a vivid accent covering 2% of the frame can lose to three shades of background, so crop to the region you care about for targeted palettes. Smooth gradients spread across neighbouring buckets and can produce two near-identical swatches. Anti-aliased edges blend foreground into background and occasionally surface a “mixture” color that appears nowhere as a flat area. And animated GIFs are sampled from their first frame only.

Frequently asked questions

How are the dominant colors calculated?: The image is downscaled to at most 80 pixels on its longest side, every remaining pixel is sorted into one of 4,096 color buckets (4 bits per RGB channel), and the six buckets containing the most pixels become the palette. Each swatch shows the average color of the actual pixels in its bucket, so it stays true to the image rather than snapping to a grid.
Why don’t the swatches match the color I expected?: Usually three reasons. Dominance is measured in pixel count, while your eye weights vivid, saturated areas more heavily; each swatch is an average over a bucket, which softens extremes; and anti-aliased edges blend neighbouring colors into in-between shades. Cropping to the area you care about gets you closer to the color you have in mind.
Why do two swatches look almost identical?: A smooth gradient — sky, skin, a soft shadow — spans several adjacent buckets, and more than one of them can rank in the top six. That is a faithful description of the pixel distribution, even if it feels redundant as a palette. Crop the gradient out, or just keep one of the pair.
Why did I get fewer than six swatches?: Flat graphics with few distinct colors — logos, icons, UI screenshots — may occupy fewer than six buckets in total. The tool then shows every color family it found rather than padding the list.
Does transparency affect the palette?: Pixels with alpha below 125 of 255 (about 49% opacity) are skipped entirely, so the empty background of a transparent PNG or a cut-out logo doesn’t leak into the palette. Semi-opaque pixels above that threshold count at the color values they actually carry.
Which image formats work?: Anything your browser can decode into pixels: JPG, PNG, WebP and GIF everywhere, plus formats like AVIF where the browser supports them. Animated GIFs are sampled from their first frame.
Is my image uploaded?: No. The file is decoded and sampled with a canvas entirely on your device — nothing is transmitted or stored, and extraction even works offline once the page has loaded.

Image Color Extractor

How it works

Frequently asked questions

Related tools