How to Extract and Recreate Any Websites CSS Color Variables

Many modern websites define their colors as CSS custom properties, also called CSS variables, such as --color-primary. Finding them shows you a site's whole color system at once, not just the colors on one screen.

1. Find them in DevTools

1. Right-click the page and choose Inspect.
2. Select the html element at the top of the Elements panel.
3. In the Styles pane, find the :root rule. Its list of lines starting with -- are the variables.
4. Color swatches appear next to color values; click one to see it in other formats.

Dark mode values often appear in a separate rule, such as one for [data-theme="dark"] or inside a prefers-color-scheme media query.

2. List them all at once

Paste this into the DevTools Console to print every custom property defined on :root in the site's own stylesheets:

[...document.styleSheets].flatMap(s => { try { return [...s.cssRules]; } catch (e) { return []; } })
  .filter(r => r.selectorText === ':root')
  .flatMap(r => [...r.style].filter(p => p.startsWith('--')).map(p => p + ': ' + r.style.getPropertyValue(p)))

Stylesheets loaded from other sites can't be read this way, so some variables may be missing.

3. Use CSS Overview

Chrome DevTools has a CSS Overview panel (open it from the three-dot menu → More tools). Its Colors section lists every color used on the page, grouped by background, text and border, with how often each appears.

4. Sites without variables

Older sites often hard-code colors. Color Palette Extractor lists the 20 most-used colors on any page, in HEX, RGB or HSL, and copies a value when you click it. Its picker shows the background and text color of any element you point at.

5. Recreate them as your own

1. Group by role: backgrounds, surfaces, text, borders, brand, status.
2. Name by purpose: --color-text-muted rather than --gray-3.
3. Add a dark set: the same names with dark mode values.
4. Check contrast for every text and background pair with the contrast checker.

The CSS variables theme builder helps lay them out. See design tokens and dark mode palettes.

Borrow ideas, not brands

Studying how a site organizes color is fair. Copying a company's exact brand palette for a competing product can confuse customers and may cause legal trouble. Use what you learn to build your own. See borrowing color ideas ethically.