Palette Extractor

Drop in an image and pull its colours out as usable tokens.

IntermediateWeb appDev tool8–16hAI-buildable 4/5no setupworth shipping

Extract a dominant palette from an image using colour quantisation, then output it as CSS variables or design tokens. Implementing median-cut or k-means yourself rather than sampling a few pixels is what makes the results actually good.

Logic

Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

Drop an image to extract its palette
A configurable number of colours is returned
Colours are ordered by prominence with their proportion shown
Each swatch shows hex, RGB and HSL values
Contrast between extracted colours is indicated
Output as CSS custom properties or a token JSON file
Extraction runs off the main thread for large images

The interesting part

Implementing quantisation that finds meaningful colours, not muddy averages
Perceptual colour distance rather than naive RGB distance
Processing megapixel images without blocking the UI

Once it works

Add a colour harmony suggestion based on the extracted palette
Add extraction from a specific region of the image
Add accessible-pairing suggestions from the palette

Suggested stack