Online Tool Store
Screenshot to HTML Color Map
List the exact hex colors in a UI screenshot with the share of the screen each covers, see where each is used, and export an HTML color map or CSS variables.
This works right here on your device — nothing gets sent out.
or paste with Ctrl+V. Nothing is uploaded.
Example shown — paste, drop, or choose your own screenshot to replace it.
Color map — select a color to see where it's used
How Screenshot to HTML Color Map works
- Paste a screenshot of a website or app with Ctrl+V, drop it on the preview, or choose the file.
- Every pixel's exact color is counted, and the colors are listed from most to least used, each with its hex code, RGB value and share of the screen.
- Select a color to fade everything else, so you can see exactly where it's used — a stray off-brand blue shows up immediately.
- Download the HTML color map, or copy the colors as CSS variables or a plain hex list.
The method
The screenshot is read at its real pixel size, because resizing would blend neighbouring colors into new ones. Colors are counted exactly, then grouped from the most common down: each color joins the closest more-common color within the merge distance, measured as the straight-line distance between RGB values. Coverage is a group's pixels divided by all opaque pixels:
distance = √((R₁−R₂)² + (G₁−G₂)² + (B₁−B₂)²) · coverage = group pixels ÷ opaque pixels
Example: with "Near-identical" (distance 8), #2f6fed and #306fed are 1 apart and count as one blue, while #2f6fed and #bfdbfe stay separate.
FAQ
How do I get all the colors used on a website?
Take a screenshot of the page, then paste it here with Ctrl+V (or drop the file). Every flat color is listed as a hex code with the share of the screen it covers, ready to download as an HTML color map or copy as CSS variables.
Why is part of the screenshot not assigned to any color?
Text and rounded corners are anti-aliased: their edges are drawn with many in-between shades that each cover only a few pixels. Listing them would bury the real UI colors, so colors below your threshold that do not match a listed color are reported as one remainder instead.
What does "Merge similar colors" do?
Colors whose RGB values are within the chosen distance of a more common color are counted as that color. "Near-identical" absorbs the 1–2 unit differences that JPEG compression and color profiles introduce; choose "Exact colors only" for lossless PNG screenshots where every value matters.
Are the hex codes exact?
Yes, for the pixels in your screenshot. Each listed color is the most common exact value in its group. Screenshots can differ slightly from your CSS if the operating system applied a display color profile, so compare against your design tokens before replacing them.
What is in the HTML color map file?
A standalone .html 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 and needs no internet connection.
Is my screenshot uploaded?
No. The screenshot is read on a canvas in this browser tab and all counting happens on your device.
How we compare
| Feature | Online Tool Store | HTML Color Codes image picker | Color Picker Web |
|---|---|---|---|
| Lists every UI color with its share of the screen | Yes — exact colors with coverage | One pixel at a time | Six dominant colors |
| Shows where each color is used | Yes — highlight on the screenshot | Not listed | Not listed |
| Export the colors | HTML color map, CSS variables or hex list | Copy a single code | CSS variables |
| Screenshot processed in your browser | Yes | Not stated on its page | Yes |
If you need the full, exact set of colors a screen uses — and where each one appears — Screenshot to HTML Color Map audits it in one paste, right in this tab.