Image Color Picker

Why one pixel is often the wrong answer

Zoom right into a photograph of a plain red wall and it is not one red: every pixel is slightly different because of sensor noise, texture and JPEG compression. Click a single pixel and you get whichever one you happened to land on, which may be noticeably lighter, darker or more orange than the wall looks. Click again a few pixels away and you get a different answer.

JPEG makes this worse in a specific way. Nearly every JPEG stores colour at half the resolution of brightness (a scheme called 4:2:0 chroma subsampling) and compresses in 8 × 8 blocks, so colour near edges smears and blocks can shift slightly in tone. Averaging a small area cancels most of that out. The 3 × 3 option averages nine pixels and is the right default for photographs; 5 × 5 averages twenty-five and is steadier still on noisy or heavily compressed images.

For flat graphics — a logo, an icon, a screenshot of an interface, a PNG chart — use 1 × 1. There every pixel inside a shape is identical, and averaging near an edge would blend in the neighbouring colour. The magnifier outlines exactly which pixels are being averaged, so you can see when the sample straddles an edge.

HEX, RGB and HSL

All three describe the same sRGB colour. HEX (#2563EB) is the red, green and blue values from 0 to 255 written in hexadecimal, two digits each; it is what CSS, design tools and brand guidelines use most. RGB (rgb(37, 99, 235)) is the same three numbers in decimal, which is easier to read and is what many programming libraries and office applications ask for.

HSL (hsl(221, 83%, 53%)) describes the colour as a hue angle on the colour wheel, a saturation and a lightness. It is the most useful form for making variations: keep the hue and saturation and change only the lightness to get a darker shade for a hover state or a paler tint for a background. Values are rounded to whole numbers, which is precise enough to reproduce the colour.

If a sampled area is partly transparent, the average is weighted by opacity so transparent pixels — which store black behind the scenes — do not darken the result, and the opacity is shown separately.

Accuracy and colour profiles

The values reported are the pixel values your browser decoded the image to, in the sRGB colour space of the canvas it is drawn on. For the great majority of images — anything from the web, screenshots, most phone photos shared through apps — that is exactly the number you would put in CSS.

Some photos carry a wider-gamut colour profile, such as the Display P3 profile modern iPhones use. Browsers convert those to sRGB when drawing them, so the picker reports the sRGB equivalent; a desktop editor working in P3 or Adobe RGB would show different numbers for the same pixel. Neither is wrong, but if you are matching a colour for print, take it from the original artwork or brand guide rather than from a photo of it — a photograph of a logo is also affected by the lighting and white balance of the shot.

Very large images are sampled at the largest size the browser can hold, which on iPhones is about 16.7 megapixels; the page notes when that happens. Averaging makes the difference negligible.

Picking on a phone, with the keyboard, or from the screen

On a touchscreen, put your finger on the picture and the magnifier appears above it, so your finger does not hide the pixels you are aiming at; slide to adjust and lift to pick. With a keyboard, focus the picture and move the crosshair with the arrow keys — one pixel per press, ten with Shift — and press Enter to pick. The colour under the crosshair is shown as you move.

In Chrome and Edge on desktop there is also a Pick from anywhere on screen button, which uses the browser's built-in eyedropper to sample any pixel on your display — another tab, a desktop application, a video. Other browsers do not offer that feature yet, so the button only appears where it works.

History and dominant colours

Every colour you pick goes into a history of up to 24 swatches, newest first, with duplicates removed. Click one to bring its values back, or copy all of them as a comma-separated list of HEX codes, ready to paste into a stylesheet or a design file.

The dominant colours strip shows eight colours representing the whole image, found by median-cut quantisation, which repeatedly splits the image's colours along their widest range. It is a quick way to see the overall scheme of a photo. For building a palette to work with, and for checking whether two colours have enough contrast for readable text under the WCAG guidelines, use the colour palette and contrast checker on this site.

The image is read on your device and never uploaded.