How many colors should I extract?

For brand work or moodboards, 5–8 is the sweet spot. For sequential charts or detailed illustration palettes, 10–12. Beyond that, k-means starts returning duplicates that differ only in a single channel.

What's the difference between median-cut and k-means?

Median-cut is fast and deterministic — it recursively splits the RGB cube and uses each cell's centroid as a palette color. K-means is iterative — it reassigns pixels and recomputes centers to minimize total within-cluster distance. We combine them: median-cut seeds the initial centers, k-means refines them. The hybrid is faster than pure k-means and more accurate than pure median-cut.

Does the image get uploaded anywhere?

No. The image is decoded, drawn to a canvas, and quantized entirely in your browser using JavaScript. No network requests, no server-side processing, no persistence. You can run this offline.

Why are the extracted colors slightly different from the original?

The quantization assigns each pixel to a cluster centroid, then returns the centroid — not the original pixel. The centroid is a weighted average of all assigned pixels, which by definition is not any single pixel in the image. For sampling exact pixel colors, use the dropper rather than the extractor.

Can I extract colors from a transparent PNG?

Yes. The extractor skips pixels with alpha=0. Semi-transparent pixels are composited against the canvas default (white) before extraction; if you need them composited against a different background, pre-flatten the image with that background first.

Does it work on AVIF and WebP?

Yes — anything the browser can decode in a canvas. AVIF, WebP, JPEG, PNG, GIF (first frame), and BMP are all supported. SVG raster output works after rasterizing to a canvas at the chosen export size.

Color tools

Image Color Extractor

Drop any image to pull its dominant colors as a palette. Uses median-cut and k-means quantization on the canvas — runs fully in your browser, no uploads, no tracking.

Drag-and-drop or paste — JPG, PNG, WebP, AVIF, GIF
Median-cut + k-means quantization for dominant color picks
Per-color frequency and HEX / RGB / HSL output
100% client-side — the image never leaves your browser

Direct answer

Drop an image and the extractor samples pixels onto a 2D canvas, quantizes them with median-cut followed by k-means clustering, and returns the N most representative colors plus their frequency. Everything runs in your browser — there is no server upload.

Drop an image here

or click to upload (PNG, JPG, WebP — processed locally)

When this saves you time

Real workflows where image color extractor replaces tedious manual work or an in-app subscription tool.

Branding

Reverse-engineer a moodboard

Drop a Pinterest board screenshot and pull the recurring palette. Useful when a client says 'something like this' and you need actual HEX values to start the brand.

Marketing

Match a layout to a hero photograph

Extract the photo's dominant tones, then use them as background, accent, and CTA colors so the page feels visually cohesive with the imagery.

E-commerce

Generate product tag colors automatically

Run each product photo through the extractor at upload time. Use the top color as the swatch on listing cards — instant visual sort by hue.

Design system

Audit an existing app's effective palette

Screenshot a few core screens, extract the colors, and compare against your design tokens. Surfaces drift between the token spec and what shipped.

Illustration

Build a limited palette from a reference

Drop a painting or illustration you admire, pick 5–8 colors, and constrain your own work to that palette. A classical art-school exercise made one-click.

Editorial

Match typography color to the cover photo

Pull the photo's darkest, lightest, and most saturated colors. Use the dark one for headlines, the saturated one for hyperlinks, the light one for subtle backgrounds.

How it works

The methodology — every transformation documented so the output is reproducible.

Load the image into a canvas

The browser decodes the file and draws it onto an offscreen canvas. We downsample large images to ~150×150 so quantization stays fast — pixel position doesn't matter, only color distribution.

Median-cut to bootstrap the palette

Median-cut recursively splits the RGB color cube along its longest axis until each cell contains a manageable cluster of pixels. The cell centroids are the initial palette.

k-means refine

Median-cut centroids seed a k-means iteration: each pixel is reassigned to its nearest centroid, centroids are recomputed, and the process repeats until stable. This shifts cluster centers off the median-cut grid toward perceptually weighted positions.

Sort by frequency

Colors are ranked by the number of pixels assigned to each cluster, giving you a dominance-ordered palette. The largest cluster is the photo's 'mood' color; the smallest is usually an accent or highlight.

Worked examples

Input	Result	Notes
Sunset beach photograph (5 colors)	#1E3A8A, #F97316, #FCD34D, #FFF7ED, #312E81	Two-tone sky split (deep blue + orange), plus warm sand and a dark silhouette accent.
Forest landscape (8 colors)	#1B3A1B, #4A6B3A, #8FA68F, #D4C8B0, #5C4D3A, #2D2419, #B5C7A8, #F5F1E8	Multiple green tiers from canopy to undergrowth, plus warm earth tones for trunks and soil.
Brand SaaS dashboard screenshot	#FFFFFF, #F8FAFC, #1E293B, #3B82F6, #10B981	Two near-whites (surface + card), one body text near-black, the brand blue, and a success green.
Renaissance painting reference	#3A2818, #8B5A2B, #C9A87C, #2C3E50, #ECC97D	Earth-tone heavy palette: bitumen shadows, ochre midtones, and a gold leaf highlight.

Common mistakes to avoid

Picking too many colors

Past 10–12, k-means starts returning near-duplicates differing by a single channel. For most palettes, 5–8 colors give a usable, distinct set.

Assuming dominant = important

A photo's largest cluster is often the background (sky, paper). The 'brand color' may be the 3rd or 4th by frequency. Inspect the palette, not just the top swatch.

Sampling JPEGs blindly

JPEG compression introduces blocky artifacts in flat regions, producing phantom colors near the edge of solid areas. For UI extraction, prefer PNG screenshots.

Forgetting the source uses a wider gamut

Photos shot in Display-P3 or Adobe RGB get clipped to sRGB on extract. The output is faithful to the screen-rendered image, not the original camera capture.

Frequently Asked Questions

Why quantization is the right approach

A naive “dominant color” algorithm picks the most frequent pixel value. That works on flat illustrations but collapses on photographs, where every pixel is unique due to sensor noise and JPEG compression — you'd extract one arbitrary pixel and miss the actual mood. Quantization solves this by grouping similar pixels into clusters, then returning each cluster's representative center.

Median-cut (Heckbert, 1982) is the classic algorithm used in the GIF palette generation step. It builds a balanced binary tree by splitting the color cube along its longest axis at the median pixel, recursively, until you have the desired number of leaves. It's O(N log K), deterministic, and produces visually reasonable palettes. K-means refines the result by minimizing the sum of squared distances from each pixel to its assigned centroid. The combination is faster than pure k-means (because median-cut seeds it well) and more perceptually faithful than median-cut alone.

Color spaces and perceptual weighting

All the math happens in sRGB by default — the space the image was encoded in. For perceptually-weighted extraction (giving more weight to hue differences than channel differences), we can quantize in OKLab instead. The trade-off: OKLab is slightly slower, but pulls out hues your eye notices over mathematically-distant-but-perceptually-similar pixels.

From extracted palette to design system

The extracted palette is a starting point. From here you typically refine the colors (snap to the nearest sensible HEX), generate harmonies via the palette generator, build the 11-step ramps with the Tailwind palette generator, and freeze the result as design tokens. The extractor is most useful at step zero of brand or moodboard work; by the time you ship, the extracted colors will have been refined heavily.

Image Color Extractor