About the Image Color Palette Extractor
This tool extracts the dominant colours from any photo you upload and returns them as a hex palette, ready to copy into a design tool or drop straight into CSS as custom properties. It works by downsampling the image and grouping similar pixel colours together in your browser, so the extraction happens locally and the photo itself is never uploaded anywhere.
How to use the Image Color Palette Extractor
- 1
Upload the photo you want to extract a palette from.
- 2
Choose how many colours to extract using the slider.
- 3
Review the swatches, each labelled with its hex code and the share of the image it covers.
- 4
Copy an individual hex code, or copy the full block of CSS custom properties underneath.
What people use it for
Building a colour scheme from a photo
Pull a palette from a product photo, a piece of art or a mood-board image to use as the basis for a website or presentation's colour scheme.
Matching brand colours to a logo photo
Extract the exact colours from a scanned or photographed logo when the original design file with exact colour values is not available.
Checking colour balance in a photo
See at a glance which tones actually dominate an image, useful when judging whether a photo edit has shifted the overall colour balance too far.
How the dominant colours are found
The image is first shrunk to a small working size, since a full-resolution photo can contain millions of individually distinct pixel colours and analysing every one is unnecessary. Every remaining pixel's colour is then sorted into a coarse three-dimensional grid, where nearby shades of red, green and blue fall into the same cell. The cells containing the most pixels become the palette, and each is reported as the true average colour of every pixel inside it, rather than an arbitrary single sample, which gives a more representative result than just picking one pixel per group.
Why this differs from true colour clustering
Professional colour quantisation techniques such as k-means clustering work in a perceptually uniform colour space and iteratively refine cluster centres to minimise visual difference within each group. This tool uses a simpler, much faster frequency-grid approach that groups strictly by numerical closeness in red, green and blue rather than by how humans actually perceive colour similarity. In practice this gives very good results for genuinely dominant tones, but a single visually consistent colour can occasionally split across two adjacent grid cells if it sits near a boundary, showing up as two very similar swatches instead of one.
Tips
- Increase the colour count if the palette feels too sparse for a busy or highly varied photo.
- A photo with large, flat areas of colour — a product shot on a plain background, for example — produces a cleaner palette than a highly textured scene.
- The percentage next to each swatch is the share of sampled pixels, not physical image area, so a small but concentrated region can still register as a large percentage.