Color Picker from Image

What a click actually samples

Your image is decoded and painted onto a canvas. When you click, the cursor position is converted from screen coordinates into canvas coordinates, and a single pixel is read back with getImageData. That gives four numbers: red, green, blue and alpha, each 0 to 255. The alpha is ignored, and the other three are printed three ways.

There is no averaging, no 3 by 3 or 5 by 5 sample area like Photoshop offers in its eyedropper options. It is one pixel exactly, and the status line under the image tells you which one, for example Sampled pixel at (412, 267).

That precision cuts both ways. On a flat block of colour it is perfect. On a JPEG photograph, adjacent pixels in what looks like a solid area can differ by five or ten in each channel because of compression noise, so clicking one pixel to the left gives a slightly different hex. If you are matching a large flat area, click a few spots and take the value that keeps recurring.

The 900 pixel rule worth knowing

Images wider than 900 pixels are scaled down to 900 before being drawn, so a large photo fits on screen at a workable size. Narrower images are left alone, never enlarged.

This has a consequence people rarely think about. On a 3000 pixel wide photo, the canvas has been resampled to 900, which means each canvas pixel is a smoothed blend of roughly three original pixels. The value you sample is that blend, not any single original pixel.

For photographs it makes almost no practical difference, because you are matching a region of colour anyway. It matters when you are sampling something one or two pixels wide in the original, like a hairline border or a single letter stroke, because the blend pulls the value towards the background behind it. If you need the untouched original value from a large image, crop the area of interest down to under 900 pixels wide with Crop Image first, then sample.

Which of the three values to copy

Click a warm mid-orange and you get something like #d2733a, rgb(210, 115, 58) and hsl(23, 62%, 53%). Same colour, three notations, each with its own copy button.

Hex is the default for CSS, design handoffs and anywhere you just need to paste a value into a field. Six digits, unambiguous, no spaces to break.

RGB is what you want when you are going to add an alpha channel, since rgba(210, 115, 58, 0.4) is a trivial edit from the value shown. It is also the notation most non-web software expects, including print layout and 3D tools.

HSL is the one to copy if you intend to build variations. The three numbers are hue in degrees, saturation and lightness as percentages. To make a hover state, keep hue and saturation and drop the lightness by 8 to 10 points. To make a complementary accent, add 180 to the hue. Neither of those operations is obvious from a hex code, which is the whole argument for HSL.

Once you have a text and background pair, run them through Colour Safe Checker to see whether the contrast passes accessibility thresholds before you commit to it.

The loupe, and when it will not appear

Moving the cursor over the image shows a circular magnifier at 8 times zoom, drawn with image smoothing turned off so you see hard-edged square pixels rather than a blurry enlargement. It covers about a 14 pixel square of the canvas and sits above the cursor so your hand does not hide it. The small dot in the centre marks the pixel that will be sampled.

The loupe follows mouse movement, so it does not appear on a touchscreen where there is no hover state. Tapping still samples correctly, you just do not get the magnified preview to aim with.

How the eight colour palette is built

Below the readouts is an automatic palette. It is built by quantisation, not by any perceptual clustering algorithm.

Each channel is rounded to the nearest multiple of 32, which collapses 16.7 million possible colours into 729 buckets. Pixels are counted into those buckets, sampling a stride through the image so that no more than about 20,000 pixels are examined regardless of size. The eight fullest buckets win, and each swatch shows the true average of the real pixel values that landed in it rather than the rounded bucket value. Click any swatch to copy its hex.

Understand what that means: this is a frequency ranking, not a design palette. A landscape that is 60 per cent sky will hand you eight variations of blue, because those genuinely are the most common colours. The small but important accent colour, a red sign or a yellow jacket, will not appear unless it occupies a decent share of the frame. For accents, crop to the subject or sample by hand. The palette is also calculated once when the image loads and is not recalculated afterwards.

Screenshots, colour profiles and small discrepancies

If you screenshot an app and sample it here, the number you get may not match the value in that app's source code. Canvas pixel data is handled in sRGB, so an image tagged with a wider gamut profile like Display P3 or Adobe RGB gets converted on the way in, and saturated colours shift slightly during that conversion. Desaturated and neutral colours are barely affected.

Two other sources of difference: any screen colour calibration applied by the operating system can be baked into a screenshot, and if the element you screenshotted had any opacity or a blend mode, you are sampling the composited result rather than the declared colour.

PNG, JPG and WebP are accepted. Everything runs in your browser, so your files never leave your device. If you want to build something with the colours you find, Add Text to Image is a reasonable next stop.

Questions about sampling

Why does the same flat area give different hex codes?

JPEG compression introduces small variations between neighbouring pixels, so an area that looks uniform is not. Sample two or three points and use the value that repeats.

Can I sample a colour from anywhere on my screen?

Not from this page. A web page cannot read pixels outside itself. Take a screenshot with your operating system, drop that file here, and sample it.

Why does my palette look monotonous?

Because it ranks by how often colours occur. If a large area of similar tone dominates the image, it will dominate the palette too. Crop to the part you care about and reload it to get a more varied result.

Does the loupe work on a phone or tablet?

No, it needs a hovering cursor. Tapping the image still samples the pixel you touched and fills in the hex, RGB and HSL values.

Can I pick a colour from a GIF or a HEIC?

Not directly. Only PNG, JPG and WebP are accepted. Convert other formats with Image Converter first, then bring the result back here.