◈
Image Palette
Drop an image and pull 5–8 dominant colours (Median Cut quantisation), copy any HEX, and export CSS variables / JSON / a Tailwind theme block; the image is decoded locally and never uploaded.
Runs in browserPaletteColour
Loading tool…
How to use
- Drop an image in, or click to pick one. It is decoded in the browser and never uploaded — no server is involved.
- Dominant colours are ordered by area, not by lightness. The first swatch is whatever covers the most of the frame, not the one that catches your eye.
- Quantisation is Median Cut, but the cut lands on the largest gap in a channel rather than the median. Cutting at the median turns an 80% white / 20% black image into #999999 and #ffffff — two clean blocks in, not one of them out.
- Transparent pixels are skipped. Counting the transparent background of a PNG icon as a colour would make its dominant colour “nothing at all”.
- This reads pixel distribution, not meaning. It will not tell you “that is sky blue” — only that this blue covers 32% of the frame.
- Three exports: CSS variables (numbered from --swatch-1), JSON, and a Tailwind v4 @theme block.