How to Get the Hex Code from an Image

Published July 20, 2026

You've found the perfect shade — in a photo, a logo, a screenshot of someone else's website — and now you need it as a code you can actually use. The fastest way to get hex from an image is a color picker: upload the picture, click the exact pixel, and copy the value. No Photoshop, no app install, and nothing leaves your computer. This guide shows you how, plus a few tricks for picking the right pixel so your color matches perfectly.

What a hex code actually is

A hex code is a six-character label for one exact color, written like #1657D8. The six characters are really three pairs — red, green, and blue — each written in hexadecimal (base 16), where values run from 00 (none) to FF (full strength). So #1657D8 means "a little red (16), some green (57), a lot of blue (D8)" — a strong blue.

That means HEX and RGB are the same information in two outfits: #1657D8 and rgb(22, 87, 216) describe one identical color. Any good rgb color picker from image files will hand you both at once, so you can paste whichever format your app expects — CSS and design tools usually want HEX, while some editors and scripts ask for the three RGB numbers.

Get the hex code from an image: step by step

The Toolyard Image Color Picker works with any JPG, PNG, WebP or screenshot, and the whole process takes under a minute:

1. Open the Image Color Picker and drop in your image — or paste a screenshot straight from your clipboard.
2. Move your cursor over the picture. A magnified preview follows the pointer so you can see individual pixels before you commit.
3. Click the exact spot you want. The tool reads that pixel and shows its HEX code and RGB values side by side.
4. Click the code to copy it. Keep clicking other areas to build a small palette of every color you need from the image.
5. Paste the code into your CSS, Canva, Figma, PowerPoint, or wherever the color is going.

That's the entire workflow — no eyedropper plug-ins, no uploading your image to a stranger's server, no account.

A reliable hex code finder from image files of any kind

People reach for a picker in a few common situations, and each has a small trick worth knowing.

Matching a brand color from a logo

Click the flattest, most solid area of the logo — the middle of a letter or shape, away from any edge. Logo edges are anti-aliased (softly blended into the background), so a pixel on the boundary is a mix of two colors, not the true brand shade.

Turning a pic into a hex code for your palette

Building a color scheme from a photo you love? Pick from the broad areas — sky, wall, fabric — rather than highlights or shadows. Sample the same surface in two or three spots; if the codes are close, average-eye them and pick the middle one. That gives you a color that reads like the photo instead of like one stray bright pixel.

Copying a color from a website or app

Take a screenshot, then pick from that. Screenshots are pixel-perfect PNGs, so the code you get is exactly what the site uses. This is often faster than digging through a page's CSS — and it works on apps, PDFs, and video frames too.

Why the color looks slightly "off" sometimes

If your picked color doesn't quite match what you expected, one of these is usually the reason:

• JPG compression. JPG subtly shifts pixel colors to save space, especially near sharp edges. When you can, pick from a PNG or screenshot instead of a heavily compressed JPG.
• Anti-aliased edges. The border pixels between two colors are blends. Zoom in and click the solid center of the area.
• Gradients and photos of screens. A surface that looks like "one color" can span dozens of neighboring shades. Sample a few points and choose the most representative one.
• Lighting in photos. A red mug photographed in warm evening light will pick as orange-red. Pick from the most neutrally lit part of the object.

None of this is a flaw in the picker — it's reporting exactly what the pixel contains. The tips above just help you choose a pixel that represents the color you mean.

HEX or RGB — which one should you copy?

Copy whichever the destination asks for; they're interchangeable. As a rule of thumb: HEX for CSS, Figma, Canva, and most design or website settings; RGB for Microsoft Office color dialogs, some video editors, and any code that wants three separate numbers. If you ever need a third format like HSL, run the code through the free Color Converter — it translates between HEX, RGB, and HSL instantly.

Is it private and free?

Yes. The Image Color Picker reads pixels with JavaScript entirely inside your browser — your image is never uploaded to a server, so private screenshots and client files stay on your machine. It's completely free, with no sign-up, no watermark, and no limit on how many colors you pick.