Extracting Dominant Color Palettes from Images in the Browser

Extracting colors from product imagery, photographs, and logos is a fundamental step in building dynamic UI themes, ambient background glows, and brand guidelines.

Try our free client-side extractors:

• Pick individual pixel colors and swatches with the Color Extractor
• Extract full harmonic palettes automatically with the Image Palette Extractor

How Client-Side Color Quantization Works

When an image is loaded onto an HTML5 Canvas:

1. Pixel Sampling: Canvas getImageData() reads the raw RGBA buffer of all pixels.
2. Filtering Outliers: Transparent pixels, extreme pure whites, or pure blacks can optionally be ignored.
3. Quantization Algorithm:
   • Median Cut: Recursively splits color bounding boxes along their widest color axis until K distinct color clusters are formed.
   • K-Means Clustering: Iteratively groups pixels around K centroid points in RGB or LAB color space until centroids stabilize.
4. Dominance Scoring: Clusters are ranked by pixel frequency, yielding a primary dominant color and accompanying accent swatches.

// Example: Reading canvas pixels for color extraction
const ctx = canvas.getContext("2d");
const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
// data is a Uint8ClampedArray [r, g, b, a, r, g, b, a, ...]

All processing in the Image Palette Extractor runs 100% locally in your browser—no images are uploaded to any server.