WebyTooly

Extract colours from an image

Upload an image and get its dominant colour palette, with the HEX code and the weight of each colour.

Espacio publicitario

Drag your image here or click to choose it

Supports JPG, PNG and WebP

Espacio publicitario

How the dominant palette is computed

The image is painted on a canvas and its pixels are read. To keep the analysis fast even on huge photos, a regular sample of pixels is taken instead of walking through all of them, and transparent ones are skipped.

percentage = box pixels ÷ analysed pixels × 100

Pixels are grouped into a 5-bit-per-channel 3D histogram, and a median-cut algorithm runs over those groups: the colour box holding the most pixels is repeatedly split along its widest channel until there are as many boxes as colours you asked for.

The final colour of each box is the true average of the pixels inside it, and its percentage says how much of the image it represents. Sorted by weight, the first ones are the colours that visually define the photo.

Worked example

On a beach photo at sunset, a 6-colour palette typically returns a warm orange at around 30%, two blues from the sea and sky, a sand tone and two dark shades from the silhouettes.

Frequently asked questions

Why aren't the colours exactly those in the photo?
Each palette colour is the average of a group of similar shades. If you need the exact value of one spot, use the image colour picker.
What is a dominant palette good for?
Designing around an image: choosing a card background, a button colour over a hero photo, or generating a theme that matches your brand.
How many colours should I extract?
Five to eight is the usual range. Fewer loses nuance, many more starts returning nearly identical shades.
Are transparent areas taken into account?
No. Nearly transparent pixels are discarded so a cut-out PNG does not return the colour of empty background.

Related calculators