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
- 本地调色板提取的算法原理是什么？
- 提取器在浏览器内部使用中位切割（Median Cut）量化算法。它首先自动过滤透明像素，构建 RGB 三维色彩空间盒子，并沿着色彩跨度最大的维度递归二分，直到生成指定数量的聚类代表色。
- 我的图片会被上传到外部服务器吗？
- 绝对不会。所有的解码、色彩聚类与代码生成均 100% 在您的本地浏览器沙箱中完成，没有任何图像数据会被上传或外传。