What colors dominate this image? (palette from image)
Upload a photo / screenshot / mockup - the tool pulls out 4-12 dominant colors using k-means clustering with k++ initialization (smarter than purely random).
Each color shows its share of the pixels. Export as CSS variables, Tailwind config, JSON.
All local - your image never leaves the browser.
Perfect for brand audits, design references, mood boards.
How to use it
- Upload an image - PNG, JPG, WebP, AVIF, HEIC. The file is downsampled to max 200×200 pixels (so k-means runs ~50ms instead of 5s on a 4K image).
- Pick a color count: 4 (just the dominants), 6 (balanced), 8 (detailed), 10 or 12 (complementary).
- The top bar shows the palette proportionally - wider swatch = more pixels. Click to copy HEX.
- "Details" table gives each color in 4 formats (HEX, RGB, HSL, OKLCH).
- Three export blocks: CSS variables (drop into `:root`), Tailwind config (drop into `theme.extend.colors`), JSON (for other tooling).
When this is useful
Where the palette extractor pays off - typical scenarios:
- Brand audit - upload logo / mockup, check if your colors are consistent.
- Design inspiration - a beautiful sunset photo → 6-color palette for a landing page.
- Reverse-engineering - want to recreate someone else's palette - screenshot → extract.
- Mood board - collect Pinterest images, pull a shared color vibe.
- Web design - a product photo as the "anchor color" for the whole page.
- Print design - extract from photography for paper / packaging.
- Education - notice how a "white-and-blue photo" actually contains 30% gray, 25% blue, 20% white - perceptually different from how it looks.
Questions and answers
K-means = clustering algorithm - splits points (here: pixel colors) into K groups so every point is close to its center. k++ initialization (David Arthur 2007) picks initial centers weighted by distance - better than purely random. 10 k-means iterations give a stable palette (more rarely change anything visible).