CMYK ↔ RGB ↔ HEX Color Converter
About Design Token → JSON
The CSS Variables / SCSS to W3C Design Tokens (JSON) Converter parses CSS custom properties (`:root { --color-primary: #3b82f6; }`) and SCSS variable maps, structuring them into standard W3C DTCG `$value` / `$type` JSON files for Figma and design tools.
How to Use Design Token → JSON
Step 1
Paste your CSS `:root` variables or SCSS variables into the editor.
Step 2
Review the structured JSON token tree.
Step 3
Click "Copy JSON" or "Download tokens.json".
Practical Use Cases for Design Token → JSON
Reverse-Engineering CSS Codebases into Figma Design Tokens
Extract existing CSS stylesheets into structured JSON tokens to import into Tokens Studio for Figma.
Standardizing Legacy CSS Variables into Modern Token Repositories
Migrate unstructured CSS variables into typed JSON dictionaries with automated category inference (color, dimension, font).
Input & Output Examples
Converting CSS Variables to DTCG JSON
`:root { --color-brand: #3b82f6; --spacing-lg: 24px; }``{\n "color": { "brand": { "$value": "#3b82f6", "$type": "color" } },\n "spacing": { "lg": { "$value": "24px", "$type": "dimension" } }\n}`Key Features & Performance
- ✓Automatically infers token types: `color`, `dimension`, `fontFamily`, `fontWeight`, `shadow`, `duration`.
- ✓De-hyphenates kebab-case variable names into hierarchical JSON object trees.
- ✓Outputs compliant W3C Design Tokens Community Group JSON format.
- ✓100% Client-Side AST parser.
- ✓1-Click Download `tokens.json`.
Key Terminology & Definitions
Type Inference
Analyzing CSS value formats (hex codes, px/rem measurements, font names) to classify each token into its correct `$type`.
Object Tree Reconstruction
Parsing delimited variable names (e.g. `--btn-primary-bg`) into structured nested objects (`btn.primary.bg`).