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.

Picking a color on a phone or tablet

The same picker works on mobile, with one adjustment: your fingertip covers roughly forty pixels, so precision is the problem rather than the tool. Open the page in Safari or Chrome, tap the drop area and choose Photo Library, then pinch to zoom into the image before you tap. Zooming enlarges the target on screen without changing the underlying pixels, so you can land on the exact spot you mean.

If you're pulling a color out of an app rather than a saved photo, screenshot the app first — side button and volume up on an iPhone, power and volume down on most Android phones — then pick from the screenshot. That also solves the other mobile annoyance: plenty of apps won't let you export an image, but every phone will screenshot one.

The built-in pickers on Windows and macOS

Your computer already ships with a picker, and it's worth knowing about for the times you want a color from something that isn't an image file — a running app, a paused video, a menu bar.

• macOS: open Digital Color Meter (Applications → Utilities). Point at anything on screen and it reads the pixel live. Switch the display mode to Display in sRGB first, or the numbers won't match what a browser shows — that mismatch is the single most common complaint about this app.
• Windows: install PowerToys (free, from Microsoft) and press Win + Shift + C. It grabs the pixel under the cursor and copies the hex straight to your clipboard.

Both are excellent for live screen picking and awkward for the more common job — pulling several colors out of a photo someone emailed you, comparing them, and keeping a list. That's where a browser picker wins, because it holds the image still and lets you collect codes as you go.

From one hex code to a whole palette

Most people don't need one color; they need four or five that work together. There are two reliable routes. The first is to keep sampling the same image — photographs are naturally harmonious because everything in them was lit by the same light source, so colors pulled from a single photo tend to sit well together without any effort.

The second is to convert your hex code to HSL and build variations mathematically. HSL splits a color into hue, saturation and lightness, which lets you hold the hue steady and change only the lightness to get a true light and dark version of the same color — something that is nearly impossible to do by eye in hex. Run your code through the HEX to HSL converter and adjust the third number: an L value around 95% gives you a background tint, and around 25% gives you a text-safe dark shade. Our guide on RGB vs HEX vs HSL explains why this works.

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.