How to Copy the Exact Color Palette From Any Website Design

Why copying a color palette matters

When you find a website with a color scheme you love — maybe a competitor's site, a design you're inspired by, or a brand you're studying — you want those colors. Not a rough approximation. The exact hex codes.

Designers do this constantly. It's not plagiarism; it's research. Understanding how real products use color is how you develop taste.

The problem is that extracting colors manually is tedious.

What most people do (and why it's slow)

The typical workflow is to open Chrome DevTools, click on an element, dig through the CSS properties to find a color value, copy it, and repeat for every element you care about.

For a simple page this might take five minutes. For a site with a sophisticated design using ten or fifteen distinct colors — backgrounds, borders, text, hover states, icons, CTAs — it can take twenty minutes or more. And you'll still miss colors that are only applied on hover or in rarely-visited components.

Another approach is to take a screenshot and upload it to a color extraction tool like Coolors or Adobe Color. These pull dominant colors from the image, but they sample pixels, not CSS values. You get the visual impression of the palette rather than the actual hex codes being used in the design system.

A better approach: extract directly from CSS

Color Palette Extractor is a Chrome extension that parses the computed styles of every element on the page and collects all color values being used. It pulls from CSS custom properties, inline styles, and computed colors — then deduplicates and presents them as a clean palette.

This gives you the actual colors from the design, not a pixel-sampled approximation.

How to use it

Install Color Palette Extractor from the Chrome Web Store. Navigate to the site you want to extract from.

Click the extension icon. The popup shows all colors detected on the current page, organized into groups: backgrounds, text, borders, and other. Hover over any swatch to see the hex code. Click to copy.

There's also a "copy all" button that exports the full palette as a JSON object or comma-separated hex codes, depending on which format you need.

If the site uses CSS custom properties (variables), the extension surfaces those too — so you can see the design token names like '--brand-primary' and '--text-muted' alongside their resolved values. This is particularly useful when you're trying to understand how a design system is structured, not just what colors it uses.

Getting colors from interactive states

The extension has a "hover scan" mode. With it enabled, as you move your mouse over elements on the page, it captures the computed colors including :hover, :focus, and :active states. Colors you find this way are added to the palette in real time.

This is how you get button hover states, link colors, and focus ring colors — things that would require manual interaction testing in DevTools.

Exporting to your design tool

Once you have the palette, you can export it:

• As hex codes to paste into Figma's color styles
• As a CSS variables block to paste into your own stylesheet
• As a JSON object for use in a design token system

For Figma users: copy the hex list, create a new color style for each, and you have the design's palette available in your file within a few minutes.

What the extension can't do

It can't extract colors from images or SVGs that are embedded as bitmap content. If a color only exists as part of a photograph or a rasterized logo, it won't appear in the palette.

For that, the screenshot + color tool approach still works — but you'll be getting sampled approximations rather than precise values.

Conclusion

Manually digging through DevTools for color values is the kind of tedious work that shouldn't exist anymore. Color Palette Extractor turns a twenty-minute task into a ten-second one, and gives you the actual design system colors rather than visual approximations.