How to Find the HEX Color Code in an Image

By Photoyam team Updated October 21, 2026 9 min read

You need the exact color from a logo, screenshot or photo. Clicking the pixel gets you a code in a second; getting the right code takes a little more care, because compression, shading and smoothed edges all nudge pixel values. This guide covers the quick pick and how to trust the number you copy.

HEX, RGB and HSL in one minute

A screen color is three numbers: how much red, green and blue light to mix, each from 0 to 255. The three common codes are just different ways of writing those numbers down.

HEX and RGB carry the same information. HSL is rounded to whole numbers, so for an exact match, copy the HEX.

The quick way: pick a color on the page

The Color Picker page opens your image right in the page. The image is read inside your browser tab and never leaves your device.

1. Open the image. Go to /color-picker and choose a file or drop it anywhere on the page. JPG, PNG, WebP, GIF and iPhone HEIC photos all work, up to 100 megapixels.
2. Aim with the magnifier. Move the pointer over the image. A round magnifier enlarges the 11 × 11 pixels around the pointer and shows the HEX code of the center one, so you can see whether you are on a flat area or on an edge.
3. Click to pick. Click the pixel you want. The HEX code goes straight to your clipboard, and the panel shows a large swatch with the HEX, RGB and HSL values. The status line confirms “HEX copied”.
4. Copy another format. Each of the HEX, RGB and HSL rows has its own Copy button. Use it when the place you are pasting into wants rgb(…) rather than a hash code.
5. Check a few spots. Click two or three more points in the same area. Each lands in Your picks (the last eight are kept). If they disagree, see the accuracy section below.
6. Grab the palette. Under Dominant colors, click any swatch to make it the current color and copy its HEX, or press Copy all HEX codes to copy the whole palette at once.

Get the whole palette

For a photo, or a color scheme that “feels like” an image, the Dominant colors list is faster. It groups similar pixels into up to eight clusters and shows each cluster’s average color with its share of the image, largest first.

A palette swatch is an average of many pixels. On our test flyer, the big navy panel drawn as #1B2A41 came out as #1C2A42 (42% of the image), almost exact, but the small coral logo was blended with warm sunset tones into a muddier #D0736E. For small logos and buttons, pick directly.

Why the code can be slightly off

We drew the test flyer with exact colors, saved it as an ordinary JPG, and sampled it. Here is what came back:

The usual culprits, roughly in order of how often they matter:

• Edges and text. Edges use in-between pixels to look smooth, so a pick near an edge is a blend. Sample the middle of a shape.
• JPEG compression. JPG approximates colors in small blocks and keeps color detail at reduced resolution. Big flat areas come through almost unchanged; thin lines and small shapes drift. A PNG of the same logo would have sampled exactly.
• Lighting and shading. A photographed wall or product has no single color: shadows are darker, highlights paler. Sample an evenly lit area, and don’t expect it to match a paint chip.
• Noise. Phone photos, especially in dim light, have grain, so neighboring pixels differ by several values. Averaging fixes this (next section).
• Color profiles. Browsers generally convert images that carry a color profile, such as Display P3 from recent phones, into sRGB when they decode them, and the codes you get are sRGB codes, which is what CSS and most web tools expect. Saturated colors outside the sRGB range are pulled in to the nearest color that fits, so an extremely vivid red may read a little duller than the original file.

Averaging and saving colors in the editor

The page tool reads a single pixel. When you need an average, or want to keep a set of colors to paint with, open the image in the editor (the Edit further in the editor button on the Color Picker page hands the image over directly).

1. Choose the Eyedropper. Press I, or pick Eyedropper in the toolbar. It shares a slot with the Ruler, Protractor, Count and Note tools.
2. Set the Sample Size. In the options bar, change Sample Size from Point Sample to 3 by 3 Average or 5 by 5 Average. The 5 × 5 setting averages 25 pixels around the click, which smooths out JPEG drift and photo noise. Fully transparent pixels are skipped, so sampling next to a cut-out edge stays clean.
3. Click the color. A click sets the active color, the foreground by default. Alt+click (Option+click on a Mac) sets the other one, so you can grab two colors without switching. The Eyedropper reads what you see: all visible layers combined, not just the active layer. Picking a color is not an edit, so it adds nothing to History.
4. Read the code. Open the Color panel (Window › Color). Its Hex field shows the picked color, with R, G and B fields below. Hovering over the image updates the Info panel with the HEX, RGB, HSB and an approximate CMYK of the pixel under the cursor, plus its X and Y position, without clicking.
5. Save it as a swatch. Press + (Add swatch) at the end of the swatch row in the Color panel. Swatches are kept in this browser between visits; click one to use it again, or its × to remove it.

On a flat graphic, point and average samples agree (both gave #F35C55 on the coral ring). On a noisy photo the point samples scatter while the average stays put, so use 5 by 5 Average by default and Point Sample only for one-pixel details.

Check the color before you use it

A color that looks fine in a logo can be hard to read as text. More › Color Tools… in the editor has a Contrast tab that computes the WCAG contrast ratio between two colors and shows pass or fail for normal and large text.

1. Enter the color. Open More › Color Tools…. On the Convert tab, paste your HEX code into the HEX field. The tool starts at black each time, so paste the code even if it is already your foreground color.
2. Set the background. Switch to Contrast and set Background to the color the text will sit on. The preview and the ratio update immediately.
3. Read the result. AA (normal) needs 4.5:1 and is the usual minimum for body text; AA (large) needs 3:1 and applies to large or bold headings.

On our flyer the results were clear-cut. Navy on cream scored 12.83:1 and passed every grade. The blue button color scored 4.06:1, enough only for large text, and coral scored 2.88:1 and failed everything. So body text should use the navy. The Convert tab also shows the color as RGB, HSL, HSV and CMYK with copy buttons (the CMYK figures are a simple conversion, not a print proof).

Troubleshooting

Every click gives a slightly different code

The area is noisy or shaded. Use the editor’s Eyedropper with 5 by 5 Average, or pick several points and use the value that repeats.

The code was not copied

Some browsers block clipboard access in certain situations. The status line then shows only “Picked” and the code, without “HEX copied”. Select the code shown next to HEX and copy it with Ctrl+C (Cmd+C on a Mac).

The picker says the pixel is transparent

On a PNG with transparency, the panel notes how transparent the pixel is, and the codes show its color without the transparency. Pick inside the solid part of the shape.

FAQ