How to use it
- Choose an image or drop it onto the box.
- Move the pointer over the image; the magnifier shows the pixels around it.
- Click or tap to pick the colour and copy it as HEX, RGB or HSL.
- Scroll down for the dominant colours, choose how many you want, and copy them or download them as CSS variables.
How it works
The image is drawn onto a canvas in your browser and the colour of the exact pixel under the pointer is read from it. The magnifier shows an 11 × 11 pixel area enlarged, with the chosen pixel outlined. Images larger than 4096 pixels on a side are scaled down first, so on very large photos one picked pixel is the average of a few original pixels.
The dominant colours are found with k-means clustering: pixels are first grouped into 32,768 small colour buckets, then the buckets are merged into the number of colours you choose, weighted by how many pixels each holds. The starting points are chosen deterministically, so the same image always gives the same palette.
Colours are read in the sRGB space the browser uses for display. If an image has an embedded wide-gamut colour profile, values can differ slightly from what a photo editor shows. In browsers that support it (Chrome and Edge on desktop), the Pick from screen button uses the built-in EyeDropper to take a colour from anywhere on your screen.
Examples
Matching a brand colour
Upload a screenshot of a logo, click its main colour and copy #1a73e8 or rgb(26, 115, 232) into your CSS.
Palette from a photo
A beach photo split into 6 colours gives sand, sea and sky tones, each with the share of the image it covers, sorted from the largest to the smallest.
Checking a shade
Zoom in with the magnifier to pick the exact pixel of a thin line rather than the anti-aliased edge next to it.
Frequently asked questions
Why does the colour differ slightly from my photo editor?
Browsers convert images to sRGB for display. Photos with a wide-gamut profile (Display P3, Adobe RGB) may show slightly different values in an editor that keeps the original profile.
Why is the Pick from screen button missing?
It needs the EyeDropper API, which only some browsers support, currently Chrome and Edge on desktop. Picking from the uploaded image works everywhere.
How are the dominant colours chosen?
By k-means clustering of all pixels, weighted by how often each colour occurs. Small but vivid details can be merged into a larger nearby colour; increase the number of colours to separate them.
Is the image uploaded?
No. It is decoded and analysed by this page in your browser and never leaves your device.
Privacy
The image is processed entirely in your browser. It is not uploaded, and picked colours are not sent or stored.