Color Palette Extractor

The tool uses K-means clustering — a machine learning algorithm — to find the most representative colors in your image. It samples up to 10,000 pixels, groups them into color clusters, and returns the center of each cluster as a dominant color. The image is downsampled to 300×300 for speed; the color analysis is still accurate for most photos.

Export as CSS custom properties (variables) to paste directly into a stylesheet, as a Tailwind CSS config to extend your theme, or as JSON for use in any design system. You can also click any swatch to copy the hex code directly to your clipboard.

K-means can converge to nearby clusters if an image has a dominant hue with lots of tonal variation (like a blue sky at sunset). Try reducing the color count to 4 or 5 to merge similar tones into a tighter palette, or increase to 8 for more variety.

No. All pixel analysis runs in your browser using the Canvas API. Your image is never transmitted anywhere — not to a server, not to any analytics system. It's processed entirely in your browser tab.

JPG, PNG, WebP, and GIF. The tool reads the pixel data from any format the browser can render. Transparent areas (PNG alpha channel) are skipped during color sampling so transparent backgrounds don't skew the palette.

Click "Tailwind Config" → Copy, then paste it into your tailwind.config.js file (or merge with your existing theme.extend.colors block). Your palette colors become available as `palette-1`, `palette-2`, etc. throughout your project.