Image Color Extractor

What this tool does

Image Color Extractor clusters the pixels of an uploaded photo or screenshot into a small palette of representative colours using k-means, so you can see at a glance which hues dominate a picture and roughly how much of the frame each one covers. Click anywhere on the image to read the exact colour under your cursor in every common CSS notation.

Matching a new design to a photograph, a product shot or a piece of artwork usually starts with figuring out which colours actually dominate the image, not just guessing from memory. Doing this by eye is unreliable because screens and lighting shift how a colour reads, and because a picture rarely contains just one shade of each hue.

This tool draws your image onto a canvas entirely in the browser, samples a downscaled copy for speed, and groups the sampled pixels into clusters with a k-means algorithm. Each cluster becomes a swatch, sized by how large a share of the sampled pixels fall into it, so the first swatches are genuinely the most common colours rather than an arbitrary top list. Clicking the full-resolution image separately reads the exact pixel you tap, for cases where you need one precise value rather than a summary.

How to use Image Color Extractor

1. Drop or browse to an image file; it is decoded and drawn on screen without leaving your device.
2. Wait a moment while the tool samples and clusters the pixels into roughly eight swatches.
3. Read each swatch’s HEX code and the percentage of the sampled image it represents.
4. Click any swatch to load its colour into the Sampled pixel panel and see every notation.
5. Or click directly on the image to read the exact colour at that point instead of a cluster average.
6. Copy whichever HEX, RGB, HSL or OKLCH value you need with the copy buttons.

Tips for better results

• Busy photos with many gradients produce more evenly sized swatches than flat illustrations or logos, which usually show one or two dominant colours and several tiny ones.
• If a swatch looks slightly off from what you expected, click the exact spot on the image instead; clustering averages nearby shades together.
• Transparent pixels in PNGs are ignored when building the palette, so cut-out product photos still give a clean result.
• For brand colour extraction, crop the image to the logo or key area first so the background does not dilute the palette.

Common use cases

• Building a website or slide colour scheme that matches a hero photo or illustration.
• Pulling a quick brand palette from a logo image when no style guide is available.
• Checking what colours a product photo is dominated by before choosing packaging or background colours.
• Sampling a specific pixel in a screenshot, such as a button colour, without opening a design tool.

Common mistakes to avoid

• Expecting the palette to exactly match a brand guideline; JPEG compression and lighting shift the sampled pixels slightly from the official value.
• Using a very small or heavily compressed image, which can make the clustering pick up compression artefacts rather than real colours.
• Assuming the percentage is exact to the pixel; it is measured on a downscaled sample for speed, so it is a close estimate, not a precise count.