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
- Wie funktioniert die clientseitige Farbextraktion?
- Der Algorithmus verwendet Median-Cut-Quantisierung vollständig im Browser, um repräsentative Farbbereiche ohne Serveranfragen zu bestimmen.
- Werden meine Bilder an Server übertragen?
- Nein. Alle Operationen erfolgen zu 100% lokal in Ihrer Browser-Sandbox.