How to Get the Hex Code of Any Color in an Image

Q: What's the difference between hex and RGB?

They describe the same color. Hex (`#3B82F6`) is a compact six-digit form used in CSS and design tools; RGB (`59, 130, 246`) lists the red/green/blue channels as numbers. Most tools, including this one, give you both.

2026-05-15

Short answer: Drop the image into ToolKoala's color picker, click the pixel you want, and copy the hex (and RGB) value — all in your browser, with nothing uploaded to a server. It's the fastest way to grab the exact color out of a screenshot, photo, or design mockup without installing anything.

How to grab the hex code

Open the color picker and drag in your image or screenshot (PNG, JPG, WebP all work).
Move your cursor over the image. A magnified loupe shows the pixel you're about to sample so you don't miss by one.
Click the exact pixel. The tool reads that pixel's RGB values straight off a canvas in memory.
Copy the hex code (like #3B82F6) or the RGB string. Repeat on as many pixels as you want.

Because it's reading the pixel data locally, there's no round-trip to a server and no waiting. Open your browser's DevTools Network tab while you use it — you'll see zero upload requests. That's the whole point.

What I actually use this for

Matching a brand color. A client sends a logo as a flat PNG with no brand guide. Sample the blue, get #1D4ED8, done.
Building a palette. Sample five or six colors off a photo or a screenshot you like, and you've got a starting palette without guessing.
Fixing a mismatch. "This button is slightly the wrong shade" — sample both, compare the hex, find the off-by-a-bit value.

If your browser is recent (Chrome, Edge), there's also the native EyeDropper API that can sample any pixel on screen, not just inside an uploaded image. ToolKoala's picker leans on a canvas instead so it works the same across browsers and on files you haven't opened anywhere else.

Honest comparison with other tools

macOS Digital Color Meter — free, built into macOS. Great for sampling anything on screen, but it defaults to a weird color space and the copy-to-hex flow is fiddly (you have to dig into settings). No Windows version.
Chrome DevTools eyedropper — free, already in your browser. Open the Styles pane, click a color swatch, hit the eyedropper. Works well but it's buried in dev tooling and only samples the rendered page.
Photoshop (~$23/mo) — the eyedropper is excellent and precise, but launching a $20-plus-a-month app to read one pixel is overkill.
Browser color-picker extensions — convenient, but here's the trade-off: an extension that can eyedrop any page usually requests permission to read every page you visit. That's a lot of trust for a color picker. I'd rather drop a file into a tab that uploads nothing than hand a background extension blanket read access.

FAQ

How do I get the hex code from a screenshot? Take the screenshot, drop it into a browser color picker like ToolKoala's, and click the pixel you want. You get the hex and RGB instantly without uploading the image.

What's the difference between hex and RGB? They describe the same color. Hex (#3B82F6) is a compact six-digit form used in CSS and design tools; RGB (59, 130, 246) lists the red/green/blue channels as numbers. Most tools, including this one, give you both.

Can I pick a color from a live website instead of a file? Yes — use Chrome DevTools' eyedropper or the browser's native EyeDropper API for on-screen sampling. For sampling from an image file you already have, the upload-free color picker is simpler.

Is it accurate to the exact pixel? Yes, as long as you sample the original image. If the image was compressed (heavy JPG) or scaled, the color you see may already be slightly shifted from the source — that's the file, not the picker.

— Milo 🐨