Color Picker from Image

About Color Picker

A color picker from an image tells you the exact code of any colour in a photo, screenshot, or logo. Drop the image in, click the spot you want, and you get its HEX, RGB, and HSL values ready to copy — plus a swatch of everything you've picked so far. The image is read on your own device and never uploaded, so it's safe for artwork and screenshots you haven't published.

How an image color picker reads a pixel

Every pixel in an image holds three numbers: how much red, green, and blue it contains, each on a scale of 0 to 255. Clicking reads those three numbers at that one point and converts them into the HEX and HSL codes shown beside the swatch. It samples a single pixel rather than averaging the area around it, so what you get is exactly the colour under the pointer — not a blend of its neighbours.

When a large photo is scaled down to fit the window, the point you click is mapped back onto the original pixel grid before it is read. The code therefore comes from the full-size image rather than the smaller preview on screen. The trade-off is that one pixel on screen may stand for several real ones, so on fine detail a click a hair to the left can land on a different colour than you intended.

Picking a color from your screen, a website, or a PDF

This reads an image file, not your live screen, so anything you can capture as an image works: a web page, a PDF, a video frame, a slide, or another program's window. Take a screenshot, save it, then drop the file in and click the colour you want.

On Windows, Print Screen with the Windows key saves a full-screen capture straight into your Pictures folder; Shift and the Windows key with S grabs just a region, which you then save from the snip window. On a Mac, Command-Shift-4 lets you drag a box and drops the file on your desktop ready to use.

Getting a color accurate enough for design work

Two things quietly move a colour away from its true value. Compression is the first: formats like JPEG store an approximation, so what looks like one flat area of brand blue is often a spread of slightly different values. Click well inside a solid region rather than near its edge, and pick twice in different spots to check you get the same code.

Anti-aliasing is the second. The pixels along any edge, and every pixel in text, are deliberate blends of the foreground and background colours — so sampling there returns a colour that appears nowhere in the design. For an exact brand colour, take it from the original design file or the brand guide; a screenshot should be treated as a close match, not the source of truth.

Frequently asked questions

How do I pick a colour from an image?

Drop the image in, then click the spot you want. The exact colour of that pixel appears with its HEX, RGB, and HSL codes, and each one has a copy button. Every colour you click is kept in a row of swatches below, so you can pull several out of the same picture.

Are my images uploaded to a server?

No. The image is drawn and read in your browser and never leaves your device. That matters for unreleased artwork, client mockups, and screenshots that show private information.

Why isn't the colour quite what I expected?

Two usual causes. JPEG compression subtly shifts colours, so a flat area may not be one single value; and edges are anti-aliased, meaning the pixels there are blends of two colours. Click well inside a flat area rather than near a border.

Can I pick a colour from a website or from my screen?

Not directly — this reads an image file, not your screen. Take a screenshot, drop it in, and click the colour you want. That works for anything you can see.

What's the difference between HEX, RGB, and HSL?

They describe the same colour three ways. HEX (#3b82f6) is the usual shorthand in CSS and design tools. RGB gives the red, green, and blue amounts. HSL gives hue, saturation, and lightness, which is the easiest one to tweak by hand when you want a lighter or duller version.