Image palette extraction — Verify the result

Worked example

Compare each swatch with its source area, test color pairs for readability, and check the copied codes match your design.

Start with the swatch against the source: put the image and the swatches next to each other and ask whether each swatch is obviously present in the picture. Then take the picker on the same page and click the matching region; a swatch should be within roughly 12 units per channel of that pixel, because of the rounding, and a larger gap suggests the region is a gradient.

A freelance designer delivering a style tile should paste the HEX values into a blank page as large squares and set the proposed text colour on the proposed background. For body text, published accessibility guidance asks for a contrast ratio of at least 4.5 to 1, and 3 to 1 for large text, which any contrast checker can measure.

The usual mistake is assuming a palette proves anything about contrast or brand accuracy. It only reports which colours are common. A pastel yellow and a white swatch can both be real colours of the photo and still be unreadable together, so test pairs, not single swatches.

Finally, copy a HEX and an RGB value, paste them into a scratch file, and check that they agree: #D83030 should be rgb(216, 48, 48). If the image had few colours, expect fewer than eight swatches, which is correct behaviour, not an error.

Image with several dominant colors

Palette swatches and color codes

A good-looking palette is a starting point; accessibility and brand match still need their own check.