Color Picker

About Color Picker

Drop in an image and the tool draws it onto a canvas, then reads the pixel under your click and reports it as HEX, RGB and HSL. A 6x magnifier helps you land on the exact pixel, and the last eight colors you picked stay in a history strip.

An eyedropper looks trivial, but pulling the right color out of a photo or screenshot has a few traps. Below is why the same spot can give slightly different values, and where the browser's own screen-wide picker, the EyeDropper API, stands today.

Why the same area gives different values

JPEG compresses in 8×8 blocks and usually stores color (chroma) at half resolution in each direction. Even on a flat logo, moving one pixel can turn #2F6FD1 into #3070D2, and near edges such as the outline of text you get in-between colors that were never in the design. Click inside a flat area a few pixels away from any edge, sample two or three spots, and use the value that repeats.

Images whose long side exceeds 1,600 pixels are shown scaled down to 1,600, but the color is read from the original-resolution pixel: the click position is mapped back to source coordinates. A one-pixel rule in a 4K screenshot therefore comes back unmixed with its surroundings. Hitting such a thin line on the scaled-down view is fiddly, though, so watch the magnifier or crop that region first.

Color profiles and the color you saw

Photos from iPhones and screenshots from Macs are often tagged with a Display P3 profile. When a browser draws such an image into a canvas it converts it into the canvas color space, which is sRGB by default, so the values here are sRGB values. Very saturated reds and greens that exist only in P3 get clipped to the edge of sRGB. If you are pasting the result into ordinary CSS, sRGB is what you want anyway.

For transparent PNGs the alpha channel is read too and shown as rgba(). The HEX field is always six digits without alpha, so using the HEX of a half-transparent pixel gives you a color that is darker or stronger than what you saw on screen.

The EyeDropper API: picking from anywhere on screen

Chrome and Edge (since version 95) ship the EyeDropper API, which lets a web page open a system-level picker that can sample any pixel on screen, including outside the browser window. It only works on HTTPS pages and only in response to a user gesture such as a click; the cursor turns into a magnifier and Escape cancels, so a page cannot quietly read your screen. MDN lists it as experimental and not Baseline because Firefox and Safari do not support it.

In browsers that support EyeDropper this tool shows a "Pick a color from the screen" button, which samples anywhere on screen, including other apps. Firefox and Safari do not get the button; there, take a screenshot and load that. On Windows with HDR turned on, screenshots can come out washed out, which shifts every color you sample.

Which format to copy

HEX is the most compact and what design tools and brand guides usually quote. rgb() is easier to read and to add alpha to. HSL is useful when you want a lighter or darker version of the sampled color: keep H and S and change L. HSL lightness is not perceptual brightness, though; a yellow and a blue at the same L look very different in brightness, so check real contrast before using a derived shade for text.

Worked examples

How to use it

1. Drop or choose an image.
2. Use the magnifier to aim, then click the pixel you want.
3. Copy HEX, RGB or HSL; click a swatch in the history to bring back an earlier pick.

Frequently asked questions

Related guides

• Color Contrast and Accessibility: Where the WCAG Formula Comes From, Its Limits, and the Law