devShakib

Loading devShakib…

Palette Extractor

Pull the dominant color palette from an image and export it as CSS variables.

Extracting a palette is clustering: quantise the pixels into a smaller set of colours and report the largest clusters. The result is dominant by *area*, which is not the same as important — a photograph with a big pale sky returns a lot of pale blue even when the subject is the red jacket in the corner.

Exporting as CSS variables is where it becomes useful rather than decorative, since a palette pulled from a hero image gives the rest of a page something to be consistent with. Check contrast separately before using any of them for text; a palette derived from a photo has no reason to be readable.