Dominant colour finder
Drop in an image and get the colours that actually carry it, clustered in Oklab so the results are colours you can point at in the picture rather than muddy arithmetic averages. Built for pulling a palette off an image and pasting it into a stylesheet.
Large images are scaled to 200px on the long edge before clustering, which is plenty for a palette and keeps it instant.
Waiting for an image.
Palette
CSS custom properties
Each colour is written as oklch() with its hex kept alongside, so a
browser that does not do oklch() still has something to fall back on.
Why Oklab and not RGB
Averaging colours in RGB cuts straight through the middle of the colour solid, so the centre of a warm red cluster and a cool red cluster lands on a grey-brown that appears nowhere in the picture. Oklab is built so equal distances look like equal differences, which means a cluster centre is a colour you can actually point at in the image. That is the whole reason the clustering happens there.
How it works
The image is drawn to a canvas at reduced size, every pixel is converted to Oklab, and k-means runs with k-means++ seeding for up to 24 passes or until the centres stop moving. Pixels below about 8 percent alpha are skipped so a transparent background does not vote. Clusters come back sorted by how much of the image they hold.
Calibrating a page to an image
Set the prefix to the name you want, drop in the portrait, copy the block. The percentages tell you which colour is load-bearing and which is a highlight worth a fraction of the frame. The largest cluster is usually the background, so the second or third is normally the one worth promoting to an accent.
Runs entirely in your browser. Nothing is uploaded, nothing is stored, nothing is logged. All tools