Extract All CSS Colors From a Website in One Click

A quick audit of any site's colors

Sometimes you're debugging your own site and want to confirm you're not using seventeen slightly different shades of grey when you meant to use three. Sometimes you're auditing a client's site to find inconsistencies before a redesign. Sometimes you're just curious what colors a well-designed site is actually using under the hood.

In all three cases, you want a complete list of every color in the CSS — not a sampled approximation, not a partial list from manual inspection. All of them.

Why DevTools falls short here

DevTools is great for inspecting individual elements. It's not designed for aggregate analysis. If you want to know how many distinct background colors a site uses, you'd have to click through every element, note the colors, and compile the list yourself.

The Coverage panel can tell you which CSS rules are firing, but it doesn't surface colors in any meaningful way.

There's no built-in tool in Chrome that says "here are all the colors on this page."

How Color Palette Extractor works

Color Palette Extractor walks the entire DOM and collects color values from computed styles. That means:

• It sees the final computed color, not just the declared CSS rule — so inherited colors and cascade overrides are handled correctly
• It resolves CSS custom properties to their actual hex/rgb values
• It deduplicates, so if fifty elements share the same background-color, that color appears once in the output

Installing and running it

Install Color Palette Extractor from the Chrome Web Store. On any page, click the extension icon. The palette appears immediately.

The output is organized by property type — background colors, text colors, border colors — so you can see at a glance whether the site has a consistent border palette or is using random values throughout.

• For each color you'll see:
• The swatch
• The hex code
• The number of elements using that color (helps identify primary vs. accent vs. rare colors)
• The CSS property name it was found in

If the site uses CSS custom properties, you'll also see the variable name next to the resolved value. This lets you reverse-engineer the design token structure.

Using it for consistency audits

Load your site, open the extension, and look at the text color group. If you see eight similar but not identical greys, you have a consistency problem. Design systems should have a small, intentional set of text colors — usually primary text, secondary text, muted, and disabled.

Same for backgrounds. More than five or six distinct background colors usually means something crept in that wasn't intentional.

The count column is useful here. Colors used on only one or two elements are probably candidates for consolidation with a close neighbor.

Copying to your clipboard

Click any individual swatch to copy its hex code. Click "Copy All" to get the full list. The export options let you choose:

• Hex list (one per line)
• CSS custom properties block
• JSON array

For a Figma handoff, the hex list is fastest. For a CSS refactor, the custom properties block gives you something you can paste directly into your variables file.

Conclusion

One-click color extraction saves real time for anyone doing design research, site audits, or CSS cleanup. Color Palette Extractor gives you the full picture — including CSS variables and usage counts — rather than a subset you had to manually track down.