Color Palette Extractor — Extract Colors from Any Image, Free & Private

How to extract a color palette from an image

Drop an image onto the upload area, click to browse, or paste directly from your clipboard (Ctrl+V / Cmd+V). The palette extracts instantly — no server involved.

Use the slider to choose how many dominant colors to extract (3–20). The tool re-analyzes the image live as you move the slider. Each swatch shows a percentage bar indicating how much of the image that color covers.

Each color shows HEX, RGB, HSL, and OKLCH values — click Copy next to any format. To replace the image, drag a new one onto the page or paste from clipboard at any time. Export your palette as PNG, SVG, or JSON.

Frequently asked questions

Is my image uploaded to a server?

No. The image never leaves your device. All pixel analysis happens in your browser using the HTML5 Canvas API. Nothing is uploaded, stored, or transmitted.

How does the color extraction work?

The tool samples pixels from your image, groups similar colors together using a quantization step, and returns the most frequently occurring distinct shades. Similar colors are deduplicated so the palette shows genuinely different dominant hues. Each color's percentage is calculated by assigning every pixel to its nearest palette color, so the numbers always add up to 100%.

What image formats are supported?

Any format your browser can display: JPEG, PNG, WebP, GIF, SVG, AVIF, and more. You can also paste screenshots directly from your clipboard.

Why are the extracted colors slightly different from the exact pixels?

The tool intentionally quantizes (rounds) color values to group near-identical shades together. This produces a cleaner palette of truly dominant colors rather than a list of subtly different pixels.

What is the difference between the PNG, SVG, and JSON exports?

The PNG export is a horizontal swatch strip — useful for pasting into design tools like Figma, Photoshop, or presentation slides. The SVG export is the same strip as a scalable vector file with hex and percentage labels embedded. The JSON export contains full data (HEX, RGB, HSL, and OKLCH values plus coverage percentage for each color), useful for feeding into code or design tokens.

What is OKLCH and why is it useful?

OKLCH is a modern CSS color format (supported in all major browsers) that represents colors in terms of Lightness, Chroma (colorfulness), and Hue. Unlike HSL, it is perceptually uniform — equal numeric steps look equally different to the human eye. It is useful for building accessible color scales and is the format recommended by the CSS Color Level 4 specification.

Can I use this on a mobile device?

Yes. On mobile you can tap the drop zone to open your photo library or camera. Clipboard paste also works on devices that support it.