Colour Palette From Image

How to use the colour palette from image

1. Open an image.
2. Adjust how many colours you want.
3. Copy individual values or the whole set as CSS variables.

About this tool

Colours are grouped using median-cut quantisation: the tool repeatedly splits the set of pixels along whichever colour channel varies most, then averages each group. It is the classic approach for this, and it produces colours that genuinely represent the image rather than a handful of extremes.

The image is sampled down before analysis, so a 20-megapixel photo is as fast as a thumbnail without changing which colours dominate. Each swatch shows its share of the picture, so you can tell a background colour from an accent.

Contrast against white and black is shown for each colour, because a palette pulled from a photograph often looks lovely and fails as text.

Common uses

• Building a theme around a hero photograph.
• Matching a design to a brand image.
• Finding the dominant colour for a placeholder background.

Frequently asked questions

Why are the colours slightly different from the picture?

Each swatch is the average of a group of similar pixels, so it represents a region rather than one exact pixel. Ask for more colours to get finer distinctions.

Are transparent areas included?

No. Pixels that are mostly transparent are skipped, so a logo on transparency gives the logo's colours rather than a wash of grey.