How to Get Every Hex Color From a UI Screenshot

You’re redesigning an old app with no style guide, and your first job is to work out which colors it actually uses. Or you’re reviewing a new screen and something feels off. A button blue looks slightly different from the one in the header, and you want to know whether it really is. Either way, you need the full list of hex codes on that screen, not one color at a time.

A color picker gives you one pixel per click. That’s fine for grabbing a brand blue. It’s useless for an audit, where the question is “what are all the colors here, and how much of the screen does each one take up?” Clicking around a dashboard for twenty minutes and pasting codes into a spreadsheet is how most people end up doing it.

What a UI color audit actually involves

A UI color audit lists every flat color in an interface, ranks them by how much of the screen they cover, and shows where each one appears. That ranking is the useful part. It tells you that 62% of the screen is one off-white, 14% is a grey, 3% is your brand blue, and 0.4% is a second blue nobody meant to add.

From there you can compare the list against your design tokens, spot near-duplicates (#2f6fed and #3070ee are almost certainly meant to be the same color), and turn the colors you keep into CSS custom properties.

Why people get stuck here

• Anti-aliased edges flood the list. Text and rounded corners are drawn with dozens of in-between shades, each covering a few pixels. Count every one and the real UI colors get buried under hundreds of junk entries. This is anti-aliasing at work, and it’s on every screen.
• JPEG and color profiles shift values slightly. One flat background can come out as #f8fafc, #f8fafd and #f9fafc in a compressed screenshot.
• Palette extractors reduce on purpose. Tools built for photos return five or six “dominant” colors, which is the opposite of what an audit needs.
• A list alone doesn’t show where a color is used. Knowing a stray color exists isn’t much help until you can see which element it’s on.

What a good color audit looks like

Exact values, ranked by coverage

Each listed color should be an exact hex code from the screenshot, with its RGB value and its share of the screen. The screenshot should be read at its real pixel size. Resizing it first blends neighbouring pixels into brand-new colors that aren’t in your UI at all.

Sensible merging and a noise floor

Near-identical colors should merge into the most common one, and you should control how close counts as “the same”. Tiny slivers below a set share of the screen should be grouped as a remainder instead of listed one by one.

You can see where each color lives

Selecting a color should fade everything else in the screenshot, so a stray off-brand blue shows up on the exact button where it’s used.

Common mistakes to avoid

• Auditing a JPEG when you have a PNG. Compression invents colors. Take a fresh PNG screenshot whenever you can.
• Treating screenshot colors as your CSS values. Your operating system may apply a display color profile when capturing, so a screenshot can differ slightly from the CSS. Compare against your design tokens before replacing anything.
• Auditing a screen with photos on it. Product images and avatars add thousands of colors. Crop to the UI, or pick a screen without photography.
• Merging too aggressively. “Loosely similar” can fold your hover state into your default state. Start with near-identical and only loosen it if the list is noisy.
• Stopping at the list. The point of an audit is the decision afterwards: which near-duplicates to collapse into one token.

How to do it with Screenshot to HTML Color Map

Screenshot to HTML Color Map reads your screenshot on a canvas in your browser tab, and all the counting happens on your device.

1. Take a screenshot of the page or app screen, then paste it with Ctrl+V, drop it on the preview, or choose the file.
2. Every pixel’s exact color is counted, and the colors are listed from most to least used, each with a swatch, hex code, RGB value and coverage.
3. Adjust Merge similar colors (Exact colors only, Near-identical, Similar or Loosely similar) and Hide colors under (0.05% to 1% of the screen) until the list shows your real UI colors.
4. Select a color to fade everything else and see exactly where it’s used.
5. Click Download HTML color map, or copy the colors as CSS variables or a plain hex list.

The downloaded HTML color map is a standalone page with a swatch, hex code, RGB value and coverage for every listed color, plus a :root block of CSS custom properties. It opens in any browser without an internet connection, which makes it handy to attach to a design review or ticket.

If you need just one color from an image, see how to pick a color from an image. For a mood-board palette from a photo rather than an exact UI audit, read how to pull a color palette out of a photo. And once you’ve decided which colors to keep, Design Token Exporter turns them into tokens.

Frequently asked questions

How do I find all the colors used on a website?

Take a screenshot of the page and run it through a screenshot color audit. Screenshot to HTML Color Map lists every flat color as a hex code with its share of the screen, which you can download as an HTML color map or copy as CSS variables.

Why doesn’t the color list add up to 100%?

Text edges, rounded corners and gradients are made of many in-between shades that each cover only a few pixels. Colors below your threshold that don’t match a listed color are reported as one remainder, so they don’t bury the real UI colors.

Are hex codes from a screenshot exact?

They’re exact for the pixels in the screenshot. A display color profile applied during capture can make them differ slightly from your CSS, so check them against your design tokens before replacing anything.

Final thought

When you’re auditing color, coverage matters more than the colors themselves. The big blocks are your real palette, and the slivers are where the inconsistencies hide. Start with a PNG, keep the merge setting tight, and use the highlight to find each stray before you decide what to fix.

Try the free Screenshot to HTML Color Map