Skip to content

Design Token Exporter

Turn a colour palette and a modular type scale into CSS variables, a Tailwind theme, JSON or Figma Tokens (Tokens Studio). Offline and instant.

No uploads
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
5xl · 61.04 Design tokens
4xl · 48.83 Design tokens
3xl · 39.06 Design tokens
2xl · 31.25 Design tokens
xl · 25 Design tokens
lg · 20 Design tokens
base · 16 Design tokens
sm · 12.8 Design tokens
xs · 10.24 Design tokens
:root {
  --color-primary: #4f46e5;
  --color-primary-50: #f2f2fd;
  --color-primary-100: #e5e4fb;
  --color-primary-200: #c3c0f6;
  --color-primary-300: #9994f0;
  --color-primary-400: #665ee8;
  --color-primary-500: #372de1;
  --color-primary-600: #261cc9;
  --color-primary-700: #1f17a5;
  --color-primary-800: #191282;
  --color-primary-900: #120d5e;
  --color-primary-950: #0b083a;
  --color-accent: #f97316;
  --color-accent-50: #fff6f0;
  --color-accent-100: #feede1;
  --color-accent-200: #fdd5b9;
  --color-accent-300: #fcb788;
  --color-accent-400: #fa934c;
  --color-accent-500: #f97315;
  --color-accent-600: #e05f06;
  --color-accent-700: #b84e05;
  --color-accent-800: #903d04;
  --color-accent-900: #682c03;
  --color-accent-950: #411b02;
  --color-neutral: #64748b;
  --color-neutral-50: #f6f7f9;
  --color-neutral-100: #edeff2;
  --color-neutral-200: #d5dae1;
  --color-neutral-300: #b8c0cc;
  --color-neutral-400: #94a1b2;
  --color-neutral-500: #74849b;
  --color-neutral-600: #606f85;
  --color-neutral-700: #4f5c6e;
  --color-neutral-800: #3e4856;
  --color-neutral-900: #2d343e;
  --color-neutral-950: #1c2027;

  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9531rem;
  --text-3xl: 2.4413rem;
  --text-4xl: 3.0519rem;
  --text-5xl: 3.815rem;
}

How to use Design Token Exporter

  1. 1Open Design Token Exporter. It runs in your browser, no sign-up.
  2. 2Type or paste your input.
  3. 3Copy or download the result.

Questions

How are shades generated?

Each colour keeps its hue and saturation while lightness steps from 97% (50) down to 13% (950), giving a Tailwind-style 50–950 ramp. Untick “Generate shades” to export only your exact colours.

What is the Figma Tokens format?

JSON for the Tokens Studio for Figma plugin, using $value and $type keys. Import it in the plugin to create colour and typography tokens.

Where do I get a palette?

Extract one with the Color Palette from Image tool, then paste the hex codes here.

More tools

QR Code GeneratorLinks, Wi-Fi, text — SVG or PNG Word & Character CounterWords, characters, reading time Case Converter & SlugifyUPPER, Title, camel, kebab Markdown to HTMLLive preview and export Markdown to PDFPrint-ready, selectable text Text Cleaner: Dedupe, Sort, ReplaceLines, spaces, find & replace Fancy Text GeneratorUnicode fonts for bios Lorem Ipsum GeneratorPlaceholder paragraphs