The same palette usually needs to exist in several places: CSS variables for the code, a Tailwind theme for utilities, JSON for Figma or a token pipeline. This guide explains the formats and how to move between them without retyping.
The formats
- CSS variables
- A
:root { --brand: #5e6ad2; }block. Works everywhere, read withvar(--brand). - Tailwind v4 @theme
- CSS variables in Tailwind's namespaces (
--color-*,--radius-*,--text-*) that also generate utilities. - Tailwind v3 config
- The
theme.extendobject intailwind.config.js. - W3C design tokens (DTCG)
- JSON where each token has a
$valueand a$type, in groups, with aliases like{color.brand}. Read by Style Dictionary, Penpot and Figma's variables importer. - Tokens Studio
- Similar JSON with
valueandtype(no dollar signs). - Figma variables
- DTCG-shaped JSON that Figma's Variables panel can import; dimensions in px.
Convert in your browser
Open the free design tokens converter, or CSS variables → Tailwind if that's the only direction you need.
Paste tokens in any of the formats above. The format is detected as you paste, and aliases are resolved to values.
Pick the output tab and copy it, or download it as a file with the right name
(.tokens.json, .figma-variables.json, .css).
How names map
Token names are kept, with the group prefix each format expects:
| Token | CSS | Tailwind v4 | DTCG |
|---|---|---|---|
| Brand colour | --brand | --color-brand | color.brand |
| Medium radius | --radius-md | --radius-md | radius.md |
| Small text | --text-sm | --text-sm | font-size.sm |
| Body font | --font-sans | --font-sans | font-family.sans |
Colours, sizes used as radius, spacing or font size, and font families are converted. Composite tokens (typography, shadow, border) are counted as skipped.
Keeping one source of truth
Converting by hand works for a one-off. For a system that changes, keep the
tokens in one place and export from there: save them as a theme in Xtractly
and every format on this page is one click away in the app, or one get_theme
call away for your coding agent over the Agent Bridge.
The Xtractly extension can also start the theme for you from any live site's
Design System panel.