Recently I wanted to build a feature that extracts the dominant color from a blog post's header image, which reminded me of a post I wrote ages ago about using the median-cut algorithm to extract colors from images.
Median-Cut Algorithm vs. K-Means Clustering
The median-cut algorithm is based on the color histogram; it recursively divides the color space into small cubes, and the color value of each cube is represented by the median color inside that cube. When an image's color distribution is uneven, this algorithm tends to produce obvious color deviations, causing the extracted colors to be inaccurate—for example, if an image has a lot of red and a little green, the extracted colors will lean toward red. Also, with the median-cut algorithm, the same image will yield the same colors every time.
In contrast, K-Means clustering is better at handling uneven color distributions, and because it uses randomly initialized cluster centers, the extracted colors can be different each time.
Of course, K-Means converges more slowly, so very large images may take a while; but for typical blog images the cost is negligible. Like the median-cut algorithm, K-Means also draws the image onto a canvas, so cross-origin issues can still taint the canvas.
Result
Here’s how it looks after applying it to the site. If your browser supports web theme colors, you’ll see the status-bar color change to a random color from the header image.

Status-bar color
Below is a live demo that uses K-Means clustering to extract five colors from an image:
K-Means Clustering Algorithm JavaScript Code
The main JavaScript code is as follows:
Mini-batch K-Means Algorithm
Mini-batch K-Means is an optimized version of K-Means. Because it randomly selects only a subset of the data for each iteration, it reduces computational cost and processes large datasets faster. However, since only a random subset is used, the results are less accurate than standard K-Means.
Below is the result optimized with mini-batch K-Means: