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. It comes down to what's being measured, and this page tells you exactly what that is.

The sample comes from the file itself

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

This matters more than it sounds. If you read from a downscaled preview, you get whatever the browser's scaler happened to average together, and that's often 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 right when you want the exact value of a flat fill, like a logo, a button or a solid background.

For photographs, widen the box. 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 person 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. Reach for HSL when you want a lighter version of the same colour: hold the hue and saturation and move the lightness.

CMYK is labelled uncalibrated and device-dependent, and that label is the important bit. The conversion is the naive arithmetic one, with no ICC profile and no knowledge of your press, paper or ink. Use it as a starting point for a conversation with your printer, and don't hand it over as a separation. A profiled conversion will differ, sometimes substantially, in saturated colours. If you want to convert 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 what makes it represent the whole image. Click any swatch to make it the selected colour.

Everything you select stays in a list for the session, so if you're comparing three greens from different corners of a photo, you won't have to hunt for them twice.

Getting the values out

The copy button uses the browser clipboard. Some embedded and non-secure contexts refuse access, and when that happens you get a clear message plus the value to select by hand, so a failure never looks like a success.

The download is a plain text file with 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 doesn't do

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

There's no contrast checker either. Contrast is a property of a pair of colours measured against a threshold, so it's a different instrument from a picker. The only contrast test on this site is in QR Generator, where it decides whether a code will scan (not whether text will be legible).