Color Palette Extractor

What is an image palette extractor?#

Every picture carries a small set of colors that do most of the work — the brand blue of a logo, the warm neutrals of a product shot, the two-tone palette of an illustration. A palette extractor pulls those representative colors out automatically so you can reuse them: build a matching UI theme, pick a button color that does not clash, generate CSS variables, or just understand which swatches actually dominate an image versus the ones your eye assumes are important.

This page runs median-cut color quantization entirely in your browser. You load an image, it is downscaled to a workable sample size, every pixel is read, and the algorithm repeatedly splits the color space along its widest channel until it has the Top-N swatches you asked for (2–16). You get each color as a swatch with its share of the image, plus the straight average color, exportable as a HEX list, a CSS-variables file, or structured JSON.

How to use it#

1. Drag an image onto the dashed drop area (or click it to pick a file). PNG, JPEG, and WebP all work; transparent PNGs are handled correctly because transparent pixels are skipped before counting.
2. Drag the Top N slider (2–16) to choose how many representative colors to extract. Six is a good default for a balanced palette; two or three isolates the dominant pair.
3. Read the swatch list on the right: each row shows the color, its HEX/RGB/HSL values, and the percentage of sampled pixels that fell into that bucket, sorted most-dominant first. Click any value to copy it.
4. Check the Average color card in the sidebar for the straight mean of every pixel — useful when you want one overall background tone rather than a ranked palette.
5. Pick a download format:
   • HEX list (.txt) — one #RRGGBB per line, dominant first. Paste straight into a design tool.
   • CSS variables (.css) — a :root { --palette-1: …; …; --palette-avg: …; } block you can drop into a stylesheet.
   • JSON (.json) — structured swatches with hex, rgb, count, and share, plus the average and sample metadata.
6. Click Download to save the file.

Key features#

• Median-cut quantization, self-authored. The same family of algorithm professional image tools use, run in your tab: split along the widest channel at the median, repeat on the currently-widest box until the requested count is reached.
• Honest share numbers. Each swatch carries the real fraction of sampled pixels it represents, so “dominant” means dominant by area, not by guess.
• Average kept separate from dominant. The straight pixel mean is reported alongside the ranked palette — two different questions answered in one pass.
• Transparent pixels skipped. Alpha below a small threshold is excluded, so a transparent PNG reports the colors that are actually drawn, not a muddy blend with the transparency.
• Three export shapes. HEX list for design tools, CSS variables for a stylesheet, JSON for programs — all generated from the exact same swatches you see.
• 100% local. The image is decoded and sampled by the browser. There is no upload.

Worked example#

Drop in a brand logo that is a deep corporate blue on a white background with a small accent — say the blue fills about 60% of the canvas. With Top N set to 4, a typical extraction looks like:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

The dominant swatch is the brand blue at about 58%, with white second. Notice the two extra blues — a darker shade and a lighter tint — that the algorithm found because they cross a median boundary; these are exactly the colors you would reuse for hover states and shadows. Export as CSS variables and you get a drop-in theme:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg is the straight mean of every pixel — a muted mid-blue that works well as a page background tinted toward the brand.

FAQ#

The percentages don’t add up to exactly 100%.#

They are rounded for display (the underlying values are exact to four decimal places in the JSON export). A small residual also comes from transparent pixels being skipped before counting, so the total reflects only the opaque pixels that were actually sampled.

I get fewer swatches than I asked for.#

Median cut stops early when every remaining color box is solid (range zero on all channels) — there is genuinely nothing left to split. Asking for 8 colors on a 3-color image returns 3, not 8 invented ones.

Why is the average color so different from the dominant one?#

They answer different questions. The dominant color is the single most frequent bucket; the average is the arithmetic mean of every pixel, which a few large but differently-colored regions can pull away from the most frequent value. A half-red, half-green image has a brownish average but no brown dominant — both numbers are correct.

Does it work on photos, or only flat graphics?#

Both. Flat graphics give clean, well-separated swatches; photos give a more graded set because real tones span many nearby colors. For a photo, raise Top N to 8–12 to capture the richer range.