How to Extract Design Tokens from Any Website

Published July 20, 2026 · 6 min read · by the CSS DNA team

TL;DR: The fastest way to extract design tokens from a website is to scan its rendered styles, not its source CSS. Install CSS DNA, open the site, click Extract, and export the resulting colors, fonts, spacing, shadows and gradients as Tailwind, CSS variables, JSON, SCSS or Figma tokens.

What are design tokens?

Design tokens are the named, reusable values that define a product's visual language: the color palette, font families and type scale, spacing steps, border radii, shadows and gradients. Instead of hard-coding #4f46e5 in forty places, a token like --color-primary-600 gives the value a single source of truth that both designers (in Figma) and developers (in CSS or Tailwind) share.

Why extracting tokens by hand doesn't work

The obvious approach — open DevTools, click around, copy values — breaks down quickly on real sites:

• Minified and generated CSS. Modern sites ship class names like css-1x2ab3 or thousands of atomic utilities. The stylesheet tells you almost nothing about the system behind it.
• Duplicates and drift. A page might use #4f46e5, rgb(79,70,229) and #4e45e4 interchangeably. Copying by hand, you'll record all three as different colors.
• No sense of hierarchy. DevTools shows you one element at a time. It can't tell you which color is the brand accent and which appears once in a forgotten footer.

Scanning the computed styles of the rendered page solves all three: you see what the browser actually painted, deduplicated, and ranked by how often each value is used.

Step-by-step: extract tokens in two clicks

1. Install CSS DNA. Add the free extension from the Chrome Web Store and pin it. It works in Chrome, Edge, Brave and Arc, needs no account, and runs entirely on-device.
2. Open the website you want to study — a competitor, a reference design you admire, or your own product — and click the CSS DNA toolbar icon.
3. Click Extract. CSS DNA scans the rendered page and returns:
   • every color, deduped and ranked by usage, convertible between HEX, RGB, HSL and OKLCH;
   • font families, weights, and the full type-size scale;
   • spacing values, border radii, box shadows and gradients;
   • near-duplicate warnings for colors that differ by a hair.
4. Export. One click turns the extracted system into a Tailwind v3 config or v4 @theme block, CSS custom properties, JSON, SCSS variables, or Figma / W3C design tokens.

Choosing an export format

Clean up before you commit

Extracted tokens mirror the site as it exists — including its inconsistencies. Two habits keep your token set healthy:

• Merge near-duplicates. If the scan flags #4f46e5 and #4e45e4 as near-identical, pick one. CSS DNA's drift detection highlights these automatically.
• Generate proper scales. Rather than keeping five arbitrary blues, generate a perceptually even 50–950 OKLCH tonal ramp from the brand color — the same structure Tailwind and modern design systems use.

Check contrast before you ship

A palette that looks great can still fail accessibility. Audit every text/background pair against WCAG 2 ratios and APCA (the WCAG 3 draft model) before the tokens land in production — here's how the two models differ and when they disagree.