How to See a Website's CSS Variables and Design Tokens

October 24, 2026

3 min readIncludes a tested console script

The quickest way to see a website’s CSS variables is to open DevTools, select the <html> element and read the :root rule in the Styles panel. That works on every site. The other methods are faster for particular jobs but each has a gap, and on some well-known sites the popular console script finds nothing at all. This post shows all four and the real numbers.

Method 1: Read them in DevTools

1. Right-click anywhere on the page and choose Inspect.
2. In the Elements panel, click the <html> tag at the top.
3. In the Styles pane, scroll to the rule whose selector is :root. Every --name: value in that block is a variable.

Chrome shows a small color swatch next to color values, and clicking it opens a picker. This is the method to reach for first because DevTools is not bound by the browser rules that limit page scripts, so it shows the variables from every stylesheet.

Method 2: List them with a console script

Paste this into the Console to print every custom property declared on :root or html as a table:

const out = {};
const isRoot = (sel) => sel.split(",").some((s) => /^(:root|html)\b/.test(s.trim()));
const walk = (rules) => {
  for (const rule of rules) {
    if (rule.selectorText) {
      if (isRoot(rule.selectorText))
        for (const name of rule.style)
          if (name.startsWith("--")) out[name] = rule.style.getPropertyValue(name).trim();
    } else if (rule.cssRules) walk(rule.cssRules);
  }
};
for (const sheet of document.styleSheets) { try { walk(sheet.cssRules); } catch {} }
console.table(out);

We ran it on five sites. It is not reliable on all of them:

Stripe and Linear are not variable-free. Both have hundreds. The script found none because their stylesheets are served from a different domain, and the browser does not let a page script read the rules of a stylesheet it did not load from its own origin. The try/catch in the script swallows that error, so it fails silently, which is worse than failing loudly. All five of stripe.com’s stylesheets and 48 of linear.app’s 68 were unreadable this way.

Method 3: Read one variable by name

If you have the name, from DevTools or a guess, this works on any site, readable stylesheet or not:

getComputedStyle(document.documentElement).getPropertyValue("--color-text-secondary")

On linear.app it returns #d0d6e0, even though the list script on the same page found nothing. The browser has already resolved the value, so where the CSS came from no longer matters. The catch is that you need to know the name.

Method 4: Use a tool that reads the rendered page

A tool that loads the page in a real browser can read what DevTools reads. The design token extractor does this and returns the variables, the rendered colors and the type scale, with no console and no knowing the names. For the page you already have open, the free Color Palette extension (on the Chrome Web Store soon) lists the colors and the readable variable names, and says plainly when a site’s stylesheets are out of its reach, as Stripe’s are.

From a terminal or a script, enrichr-cli does the same read: npx enrichr-cli tokens stripe.com --site-vars opens the page in a real browser and prints every variable it declares on :root, resolved to its final value, the same way DevTools does. It is free, MIT-licensed and has no dependencies, so it works the same in CI as on your own machine.

What do the names tell you?

The names matter as much as the values. Stripe’s variables read like a sentence: --hds-color-accent-border-solid is #533afd, the purple it is known for, and the prefix, category, role and variant are all in the name. Linear mixes readable names such as --color-text-secondary with generated ones such as --sx-1stx5uy from its styling library. Both kinds are real, but only the first tells you what the designer meant. When you want to build in the same system, the readable ones are the ones to copy.

Next, if the colors are what you are after, see how to find the colors of a website. For fonts, how to find what font a website uses, and for putting all of it in front of an AI assistant, extracting design tokens from a live website.

FAQ