Color Picker

Reading a Colour Off an Image Honestly

Sampling a colour looks trivial until you notice how many tools return a value that appears nowhere in the file you loaded. The difference comes down to what is being measured, and this page is explicit about it.

The sample comes from the file, not the picture on screen

The preview is scaled down to fit your display. The sample is not taken from it. A click reads the pixel at the corresponding coordinate of the full-resolution source, drawn at one-to-one with smoothing switched off.

That distinction matters more than it sounds. Reading a downscaled preview returns whatever the browser's scaler happened to average together, which is frequently a colour that exists in no pixel of your original.

The averaging box

Sample size runs from a single pixel up to an 11 by 11 block. One pixel is correct when you want the exact value of a flat fill — a logo, a button, a solid background.

Widen the box for photographs. JPEG compression leaves neighbouring pixels several values apart, so a single reading is as likely to catch an artefact as the colour you were aiming at. An averaged block gives you the colour a human would say they were looking at.

Four notations, one of them approximate

HEX and RGB describe the same sRGB triple in different clothing. HSL restates it as hue, saturation and lightness, which is the notation to reach for when you want a lighter version of a colour rather than a different colour: hold the hue and saturation, move the lightness.

CMYK is labelled uncalibrated and device-dependent, and that label is the important part of it. The conversion is the naive arithmetic one, with no ICC profile and no knowledge of your press, paper or ink. Treat it as a starting point for a conversation with a printer, never as a separation to hand over. A profiled conversion will differ, sometimes substantially, in saturated colours. For converting between notations without an image in front of you, Color Converter is the better page.

Dominant colours and session history

Eight swatches are extracted by bucketing a downscaled copy of the image and ranking the buckets by pixel count. The downscale is deliberate here: a palette is a summary, and averaging is exactly what makes it representative rather than accidental. Click any swatch to adopt it as the selected colour.

Everything you select is kept in a list for the session, so comparing three greens from different corners of a photograph does not mean hunting for them twice.

Getting the values out

The copy button uses the browser clipboard, and when the browser refuses — which happens in some embedded and non-secure contexts — you get an explicit message and the value to select by hand, rather than a silent failure that looks exactly like success.

The download is a plain text file containing the selected colour in all four notations, the dominant palette, every colour picked during the session, and a :root block of CSS custom properties ready to paste into a stylesheet.

Two things this tool does not do

There is no screen eyedropper. Sampling colours from other windows requires the browser's own EyeDropper API, which is not wired up here. This tool reads the image you load and nothing else on your display.

There is no contrast checker either. Contrast is a property of a pair of colours measured against a threshold, which makes it a different instrument from a picker. The only contrast test on this site lives in QR Generator, where it decides whether a code will scan rather than whether text will be legible.