BrowserTools

Image Palette Extractor

Pull dominant color palettes from images

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-09-05
Free Private No uploads
What is Image Palette Extractor?

Give it a photograph, a logo, or a moodboard image and it returns the ten colours that actually define the picture, ranked by how much of the frame each one covers. The method matters: the image is sampled at up to 200 pixels on its longest edge, every pixel's colour channels are reduced to four bits each and bucketed, and each bucket is averaged back to a full-precision hex. That averaging is what separates a real palette from a list of near-identical swatches, and the ranking by pixel count puts the dominant colours first rather than the most saturated ones. Transparent pixels are excluded from the count, which keeps a logo's invisible background from appearing as a colour. Each swatch copies on click, and the block below is a ready-made set of CSS custom properties.

Extract the dominant colors from any photo or logo to build a matching palette, with HEX codes and copyable CSS variables. Ideal for design systems and slide decks.

Private Image Palette Extractor In Your Browser

Image Palette Extractor is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use Image Palette Extractor

1

Hand over a picture using the Drop an image to extract its colors target, which reads any image format.

2

Let the sampler run — the picture is reduced to at most 200 pixels on its longest edge, then quantized and ranked by coverage.

3

Click any swatch to copy that hex value to your clipboard.

4

Copy the :root block underneath, which defines --palette-1 through --palette-10 in the same order.

Key Capabilities
  • Ranks colours by how much of the image they cover, returning up to ten
  • Quantizes to four bits per channel and averages each bucket, which avoids a palette of near-identical swatches
  • Transparent pixels are excluded from the analysis
  • Clicking a swatch copies its hex value, and a ready-to-paste :root block of CSS custom properties is generated
Common Use Cases
  • A designer building a colour palette to accompany a photograph in a brand moodboard.
  • A developer generating CSS custom properties to match an existing illustration without hand-picking swatches.
  • A slide-deck author pulling the dominant colours out of a hero image so the surrounding slides agree with it.
Clear Answers

Frequently Asked Questions

Why is my transparent-background logo returning odd colours?
Transparent pixels are skipped rather than counted, which is usually what you want. If the logo has anti-aliased edges, the semi-opaque pixels along those edges are real and do get counted — so the palette can pick up soft blends from the outline.
Are the colours guaranteed to be in my brand palette?
No. These are the colours present in the image, not a curated selection. They are an excellent starting point, and a designer still has to decide which of them belong in a palette.
How are similar shades handled?
Pixels are grouped into shared buckets before averaging, so near-identical colours collapse into one entry rather than filling the top ten with almost the same hex. The bucketing uses four bits per channel, which is coarse enough to group a gradient and fine enough to keep genuinely different colours apart.
Is the image uploaded?
No. Sampling and quantisation run on a canvas inside the tab, and no request is made.