Color Picker from Image

How to use Color Picker from Image

1. Drop an image onto the canvas.
2. Click or drag anywhere on the image to sample a pixel — the magnifier shows the exact color under the cursor.
3. Read the auto-generated dominant color palette below, and click any swatch to copy it.

How does dominant color extraction work?

By median-cut quantization, the same algorithm that reduced photographs to 256-color GIFs in the 1990s.

Every pixel is a point in a three-dimensional RGB space. The algorithm puts all of them in one box, finds the axis along which the colors are most spread out, and splits the box at the median value along that axis. It then repeats on the resulting boxes, always splitting the one with the greatest spread, until it has as many boxes as you asked for colors. The average of each box becomes a palette entry.

Median cut is used rather than simple frequency counting because frequency alone gives poor results: photographs contain thousands of near-identical shades, so the top six most-common colors in a landscape are usually six barely distinguishable blues. Median cut guarantees the palette spans the image’s actual color range.

What is the difference between dominant and average color?

Average color is the arithmetic mean of every pixel, and it is almost always a disappointing brown-grey. Averaging a vivid red sunset against a deep blue sea gives you mud, because opposite hues cancel.

Dominant colors are the colors actually present in significant quantity. A palette of six dominants from that same sunset gives you the orange, the deep blue, the pink and the near-black — which is what a person would describe if you asked them the colors in the photo.

The average is occasionally useful as a placeholder background while an image loads, since it minimizes the perceived flash. For anything else — building a brand palette, matching a UI to a hero image, picking a theme color — use the dominants.

Why does the picked color look different from what I see?

Three reasons, and all three are worth understanding if you are matching colors precisely.

The first is JPEG compression. Chroma subsampling stores color at half resolution, so pixels near a hard color boundary carry averaged values that appear in neither original region. Sample from the middle of a flat area rather than near an edge.

The second is your display profile. A wide-gamut monitor renders sRGB values more saturated than a standard one, so the color you see is not the color in the file. The sampled value is the file’s value, which is the correct one to use.

The third is simultaneous contrast — a perceptual effect where surrounding colors shift how a color appears. A grey square looks warm on a blue background and cool on an orange one. The eyedropper reports the actual pixel value, which can genuinely differ from your perception of it.

How many colors should a palette have?

For a brand or interface palette, five to seven works: one or two primaries, one accent, and two or three neutrals. Beyond about eight, the colors stop being individually memorable and the system becomes hard to apply consistently.

For matching a UI to a specific image — a music player themed to album art, a product page themed to a photo — three is usually enough: a dominant for the background, a contrasting one for text, and an accent.

Whatever you extract, check the contrast before using it. Two colors pulled from the same photograph frequently sit at similar luminance, which looks harmonious and fails WCAG AA badly when used as text on background. Run the pair through the Color Converter to check the ratio.

Frequently asked questions