An image color extractor for designers and developers
Whether you want to match a website to a hero photo, build a theme from a product shot or document a brand from its logo, you need the colours that actually dominate the image. This image color extractor analyses the pixels in your browser and returns a palette of 2 to 12 colours with the percentage of the image each one represents.
How the colours are found
The image is scaled down (to about 320 pixels on the long side) so analysis is instant even for large photos. Transparent pixels are ignored. The remaining pixels are grouped with k-means clustering: the algorithm starts with well-separated seed colours, assigns every pixel to its nearest colour, moves each colour to the average of its pixels and repeats until the palette stops changing. The result is a set of colours that best represent the image as a whole, not just the brightest spots.
Because the seeds are chosen deterministically, the same image and colour count always produce the same palette — handy when you document a design decision.
Choosing the number of colours
- 2–4 colours: the overall mood; good for a background and one accent.
- 5–6 colours: a typical UI palette with neutrals, a primary and accents.
- 8–12 colours: detailed palettes for illustration or data visualisation.
Small but striking details, such as a red logo on a white page, can disappear into a larger cluster when you pick too few colours. Increase the count until they appear as their own swatch.
Example output
:root {
--image-1: #fcd34d;
--image-2: #312e81;
--image-3: #7c3aed;
}Each swatch also shows its share, for example "34.5% of pixels", which helps you decide which colour should be the background and which the accent.
Related tools
To grab the exact colour of a single pixel, use the image color picker. For one representative colour — say, for a loading placeholder — the average color finder is quicker. Once you have your palette, generate lighter and darker steps with the tints and shades generator.
Tips for better palettes
Crop the image to the area you care about before extracting — a product shot with a large white studio background will otherwise return mostly whites and greys. Photos with strong gradients, such as sunsets, produce smoother palettes when you ask for more colours. For screenshots of websites, six colours usually recover the background, text and main accent colours accurately. If you plan to use the palette for text and backgrounds, remember that a colour taken from a photo says nothing about readability, so test your pairs with the contrast checker.
Exporting the palette
The code panel offers three formats. CSS produces numbered custom properties (--image-1 to --image-n) in order of coverage; the HEX tab is a plain list for design tools; JSON includes each colour's share so scripts can, for example, pick the most common colour automatically. Rename the variables after pasting to reflect their role, such as --surface or --accent.
Privacy
Everything happens locally in your browser with JavaScript and the Canvas API. Your images are never uploaded to our servers, so the tool also works with confidential screenshots and personal photos.