How K-Means Clustering Works (Explained by Extracting Colors from Images)

Every color palette extractor you've used runs K-Means clustering. Coolors, Canva, Adobe. They all use the same algorithm to find dominant colors. Most of them run it on a server. Ours runs it on your GPU, entirely in the browser. We built a free Palette Extractor that processes 65,536 pixels in 12ms using a WebGL2 fragment shader. This post walks through how K-Means works, why color extraction is the perfect demo, and how 15 lines of GLSL turn the GPU into a parallel K-Means engine. K-Means in 30 Seconds The algorithm repeats two steps: Assign every data point to the nearest centroid Update each centroid to the mean of its assigned points Loop until nothing changes. For color extraction, data points are pixels (RGB values) and centroids become your palette colors. It's the most widely used clustering algorithm in ML ( IBM ), and it scales at O(n). The Five Steps (With Colors) Choose K : How many palette colors do you want? K=6 means 6 clusters. Initialize : Pick K random pixels as sta