About Image Color Picker

Image Color Picker reads an image and reports the handful of colours that cover the most of it, each as a hex code with a rough percentage. It is for matching a design to a photo, or lifting a scheme from a screenshot or a competitor's site.

The image is scaled down and analysed on a canvas in the page. It is never uploaded.

How to use it

  1. Drop an image, or click to choose one.
  2. Set how many colours you want with the slider, from 2 to 12.
  3. Click a swatch to copy its hex, or use Copy all hex or Copy as CSS variables.
  4. Each swatch shows roughly what share of the image that colour covers.

Common questions

Is the image uploaded?

No. It is drawn to a canvas and analysed in the open tab. Nothing leaves your device.

How are the colours chosen?

A median-cut pass groups every pixel into the number of buckets you asked for and averages each one, weighted by how much of the image it covers.

Why do the colours change when I move the slider?

A different count re-groups every pixel from scratch, so the averages shift. The result for a fixed count is always the same.

Can it read a designed palette exactly?

It reports the colours that are present. Flat graphics come out clean; photos with gradients produce muddier midtones.