Image Color Extractor

An image colour extractor analyses a picture and returns the dominant colours as a palette. Unlike a manual colour picker, which samples one pixel at a time, the extractor looks at every pixel and groups similar ones into buckets to produce a representative swatch set. The resulting palette captures the image's overall "feel" — the muted greens of a forest photograph, the electric pinks of a neon sign, the beige-and-chrome of a product shot.

The algorithm behind the scenes is median-cut colour quantisation, the same technique GIF encoders used in the 1980s to reduce images to 256 colours. Every pixel lives in a 3D RGB colour cube; the algorithm recursively splits the cube along its longest axis, producing a set of smaller cubes that contain roughly equal numbers of pixels. The centre of each cube becomes one palette colour. The result is stable, fast, and looks right for almost any image. We use the Color Thief library (tiny, ~3KB gzipped) which implements this algorithm cleanly.

Use cases. Designers pull palettes from brand imagery for new marketing collateral. Content managers generate accent colours for blog-post hero cards. Developers configure Tailwind palettes from a logo or hero photo. Photographers check whether a set of photographs share a cohesive palette (for an exhibition or print book). Data-visualisation designers sample colours from a photograph to theme charts sympathetically.

Choosing the palette size. Three colours give a stark identity palette; five to six give a useable design system; eight to ten feel like a full moodboard. Past twelve, the palette starts to lose distinctness because many buckets wind up with near-duplicate colours. Start at six and adjust.

Output formats. Every swatch has a HEX value you can copy individually or as a full comma-separated list. For Tailwind projects, the included config snippet drops straight into tailwind.config.ts under theme.extend.colors. For design tools, HEX copies paste correctly into Figma, Sketch, and Illustrator swatch panels.

Privacy: the image is analysed in your browser. No upload, no cloud API call, no logging. A palette extracted from a private photo (new product shot, client logo under embargo, family photograph) stays entirely on your device.

1. Upload an image. JPEG, PNG, WebP, or GIF.
2. Set palette size. 5–6 for design systems; 3 for minimalism; 10+ for moodboards.
3. Review the palette. The dominant colour appears at the top; the bucket sizes vary.
4. Copy colours individually, as a list, or as a Tailwind config snippet.

• Median-cut quantisation for stable, natural palettes.
• Dominant colour plus configurable palette (3–12 swatches).
• Per-swatch copy and full-palette copy.
• Tailwind config snippet output.
• 100% local — images never leave your browser.