Image Color Extractor

Drop any image and instantly extract its dominant color palette using the Median Cut algorithm, entirely in your browser.

100% Client-Side - Your images never leave your device

Drop an image here

or click to browse files

PNG, JPG, WebP, GIF, BMP, SVG

What Is the Median Cut Algorithm?

Median Cut is a color quantization algorithm invented by Paul Heckbert in 1982. The goal is to reduce an image containing millions of unique pixel colors to a small representative palette of N colors. It does this by recursively partitioning the color space (represented as a 3D cube of R, G, B values) into N regions and averaging each region.

The algorithm finds which of the three color channels (red, green, or blue) has the widest range across the current pixel bucket, sorts the pixels along that axis, and splits at the median. This is repeated until N buckets exist. The average color of each bucket becomes one palette entry. The result tends to capture the dominant visual tones without over-representing outliers.

How This Tool Works

1. Decode

The image is drawn onto an HTML <canvas> element scaled to at most 100×100 pixels. getImageData() reads back the raw RGBA pixel array from GPU memory into JavaScript.

2. Filter

Fully transparent pixels (alpha = 0) are skipped. This prevents PNG or GIF transparency from producing a washed-out "phantom white" entry in the palette.

3. Quantize & Sort

Median Cut runs on the filtered pixel array, producing N color buckets. Results are sorted by pixel count (most dominant first) and displayed with a proportion bar.

Use Cases

Brand Color Extraction

Drop a brand's logo or hero image to extract its color palette. Use the extracted swatches as the starting point for building a design system that feels consistent with the brand's visual identity.

Photo-Matched Design

Designing a landing page around a hero photo? Extract the dominant tones to use as background and accent colors, ensuring the typography and UI elements feel in harmony with the photography.

Art Direction

Analyze reference images from films, paintings, or photography to understand their color story and mood. Extract the palette, run it through the Harmony generator, and adapt it for your own work.

Privacy-First Analysis

All processing runs in your browser using the Canvas API. No image data is ever uploaded to a server. This makes it safe to analyze sensitive visual assets: confidential mockups, unreleased product photography, internal brand materials.

Limitations of Median Cut

Dominant ≠ visually interesting - a blue sky image may produce mostly near-identical pale blue entries. Increase the swatch count to surface rarer but more impactful accent colors.
RGB-based splitting - Median Cut operates in RGB, which is not perceptually uniform. OKLCH-based quantization would produce more visually distinct swatches, but at higher computational cost in the browser.
Downsampling trade-off - images are scaled to 100×100px before analysis. Small detail colors (logos, text) in large images may be lost entirely during downsampling.