Design Tokens Extractor

Turn pasted CSS into colors, type, spacing and W3C tokens

Design Tokens Extractor!!!!!!!!!!!!!!!!!!!!!! — paste any CSS, extract colors, typography, spacing and borders as tokens

How to use Design Tokens Extractor

  1. Paste a stylesheet or copied CSS into the box
  2. Press Extract tokens to parse colors, type, spacing, borders and breakpoints
  3. Click any color swatch to copy its hex value
  4. Open the Export tab and copy W3C DTCG JSON, Tailwind theme or CSS variables
  5. For a live site, copy the npx dembrandt command and run it in your terminal

Features

  • Color extraction with frequency ranking and WCAG contrast checks
  • Typography, spacing, border radius and breakpoint detection
  • W3C DTCG JSON, Tailwind v4 @theme and CSS variable exports
  • One-click copy and download of every token set
  • CLI command builder for full live-site extraction with dembrandt

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.