Two ways to get colour from an image
Clicking a pixel gives you that exact colour, which is what you want when matching a specific element — the blue in a logo, the shade of a product, a particular highlight.
Extracting a palette does something different: it analyses the whole image and finds the colours that best represent it overall, along with how much of the image each accounts for. This is what you want when building a colour scheme from a photograph.
How the palette is calculated
The extraction uses k-means clustering, which groups all the pixels into a chosen number of clusters and returns the average colour of each. This is more useful than simply counting the most frequent exact values, because photographs contain thousands of near-identical shades — counting them individually would return ten barely distinguishable variants of the same colour.
Clustering instead finds genuinely distinct colour groups. The percentage shown for each swatch is how much of the image falls into that cluster, which tells you which colours dominate and which are accents.
Choosing how many colours
Five or six usually gives a usable palette. Fewer produces broad averages that lose the character of the image; more starts splitting single colours into near-duplicates. If two swatches look almost identical, reduce the count.
Building a scheme from a photograph
A common approach is to take the dominant colour as a background or base, a mid-frequency colour for supporting elements, and a low-percentage but saturated colour as an accent for buttons and links. The accent is often the most useful output, because it is the colour that gives the image its character while occupying very little of it.
One important caveat: colours pulled from a photograph rarely have adequate contrast for text without adjustment. Check any colour you intend to use for type against its background before committing.
Practical uses
Matching a brand colour when you have a logo image but no brand guidelines. Building a website palette that harmonises with a hero photograph. Extracting colours from a product shot for marketing material. Identifying the exact shade in a screenshot for a design handoff. Sampling reference colours from artwork or photography.
A note on colour accuracy
The values you get are the raw pixel values in the image file. If the image carries an embedded colour profile, or was captured on a display with a different gamut, the perceived colour may differ from what the numbers suggest. For print work or anything where exact colour matching is critical, work from the source file in a colour-managed application.
Processed in your browser
Analysis happens on a canvas locally. Your images are never uploaded.
Frequently Asked Questions
How is the dominant palette calculated?
With k-means clustering, which groups similar pixels and returns the average of each group. This finds genuinely distinct colours rather than thousands of near-identical shades.
How many colours should I extract?
Five or six usually works well. If two swatches look nearly identical, reduce the count.
What does the percentage mean?
How much of the image falls into that colour cluster. It tells you which colours dominate and which are accents.
Can I use these colours for text?
Check contrast first. Colours pulled from photographs rarely have adequate contrast for type without adjustment.
Are the colour values exact?
They are the raw pixel values. Embedded colour profiles and display gamut can affect perceived colour, so use a colour-managed application for print work.