Image color extractor

Pull a representative color palette from an image.

Select an image or drag and drop it here

You have a product photo, a book cover or a screenshot, and you want a site palette that sits well beside it. This tool reads the image and returns the six colours that cover the most area, each as a HEX code. Click a swatch to copy it straight into your CSS or design tool.

How it works

How the palette is chosen

The image is first scaled down to 80 pixels wide, which averages out compression noise and keeps the analysis instant. Each pixel's red, green and blue values are then rounded into 16 steps per channel, so near-identical shades fall into the same group. Those groups are ranked by how many pixels landed in each, and the six largest are shown. Each swatch is the true average of the pixels in its group, not the rounded value, so the HEX code you copy is a real colour from the image.

Reading the result

The ordering is by area, not by importance. A photo with a large sky will fill the top places with several near-identical blues, while the accent colour you actually want may sit fifth - or be missing entirely because it covers too few pixels. Cropping to the region you care about before uploading is the fastest way to steer the result.

Copying and using the colours

Click any swatch to copy its HEX code to the clipboard. Pixels that are more than half transparent are skipped, so a logo on a transparent background yields only the logo's own colours. Before pairing two extracted colours as text and background, run them through a contrast checker - colours taken from the same photograph are often too close in lightness to be readable.

Terms explained

HEX code: A colour written as six hexadecimal digits, two each for red, green and blue - for example #1A56DB. The usual format in CSS and design tools.
Quantization: Rounding colour values into a smaller number of steps so nearly identical shades count as one. This tool uses 16 steps per channel.
Colour bucket: A group of pixels sharing the same rounded colour. The swatch displayed is the average of the real pixel values inside that group.
Downsampling: Shrinking the image before analysis. It strips compression noise and makes the counts reflect broad areas rather than stray single pixels.
Alpha: A pixel's opacity. Pixels more than half transparent are ignored so an empty background cannot dominate the palette.

Frequently asked questions

Why are several swatches almost the same colour?

Ranking is purely by pixel count, so one large gradient - a sky, a soft shadow, a blurred backdrop - can take several of the top places with very similar tones. Crop to a smaller region for more variety.

Can I get more than six colours?

Not in a single pass; the tool shows the six largest groups. Running it again on different crops of the same image is a practical way to build a longer palette.

Is the extracted colour exact?

Each swatch is the average of a group of similar pixels, so it is representative rather than a reading of one specific pixel. For an exact value, crop tightly to the area you want or use a screen colour picker.

Does it work with transparent PNGs?

Yes. Pixels that are more than half transparent are ignored, so the palette reflects the visible artwork rather than the empty background.

Is my image uploaded anywhere?

No. The file is read and analysed locally in your browser using a canvas, and it is never sent to a server.