Ever wanted the dominant colours of an image — for a theme, a tag, a swatch? You don't need a library or a server. The browser can read every pixel and cluster them. Here's a colour-palette extractor that runs 100% client-side.
🎨 Try it (drop in an image): https://dev48v.infy.uk/solve/day12-color-palette.html
Get the pixels
Draw the image to a <canvas>, then ctx.getImageData() gives you a flat array of [r,g,b,a, r,g,b,a, ...]. Downsample (sample every Nth pixel) so big photos stay fast.
Cluster with median-cut
Put all pixels in one RGB "box." Repeatedly split the box with the widest colour range at its median, until you have N boxes. Average each box → one representative colour. That's the classic median-cut quantization, and it's only ~40 lines.
Show it
Convert each RGB to hex, render swatches, click to copy. Done — no upload, fully private.
🔨 Full build (canvas pixels → downsample → median-cut → hex) on the page: https://dev48v.infy.uk/solve/day12-color-palette.html
Part of SolveFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)