How Client-Side Image Palette Extraction Works
Extracting a cohesive, representative color palette from an image is essential for brand design, user interface theming, and accessibility audits. Our tool performs this entire workflow directly inside your local browser using deterministic Median Cut color quantization.
The Median Cut Color Quantization Algorithm
Median Cut is a spatial subdivision algorithm that maps RGB pixel data into a three-dimensional color space (a cube with Red, Green, and Blue axes ranging from 0 to 255).
- Alpha Filtering: Fully transparent pixels (alpha = 0) and low-opacity pixels are filtered out before quantization so background transparency does not dilute the palette.
- Bounding Box Computation: The algorithm finds the minimum and maximum coordinates along the R, G, and B color channels for all pixels in the current color box.
- Longest-Axis Bisection: It identifies the color dimension exhibiting the widest spread and sorts the pixel population along that axis. The box is then split at the weighted median index.
- Recursive Partitioning: This process repeats recursively until the exact requested palette size (5 to 8 clusters) is achieved.
- Representative Averaging: Each final box calculates its weighted centroid average to determine the definitive representative opaque color.
Deterministic Color Conversion and Format Export
Each extracted color cluster is simultaneously converted into mutually consistent format representations:
Palettes are sorted in deterministic descending order based on pixel cluster prominence, allowing developers and designers to instantly export design tokens as standard CSS custom properties (--palette-color-1 through --palette-color-N) or structured JSON.
Frequently Asked Questions
- How does client-side image palette extraction work?
- The extractor uses a deterministic Median Cut color quantization algorithm entirely in your browser. It samples opaque image pixels, constructs three-dimensional RGB color boxes, and recursively partitions them along the highest-range color channels until the requested number of representative clusters is found.
- Are my photos or images sent to any remote server?
- Never. All decoding, pixel processing, color clustering, and code generation occur 100% locally on your device within your browser sandbox. No image data is ever uploaded or transmitted.
- How are transparent or semi-transparent pixels handled?
- Fully transparent pixels (alpha = 0) and low-opacity pixels are strictly excluded prior to clustering, ensuring the extracted palette contains only genuine opaque colors from your subject.