Design tokens for Figma Your design system, set up before lunch.

Paste your CSS or select your layers. Design Token Studio turns them into colour, type and spacing tokens, checks every pair for contrast and hands the result to code.

Open in Figma Try the playground (external site)
Start from
Material 3 · Fluent 2 · Tailwind
Exports
12 formats + DESIGN.md
Pro license
From €4.99, one-time
Color Extractly
Inspiration

From the Figma Community

“This is such an awesome tool Dave!”

— Daniyal Habib, via Figma Community
Only need the colors? Classic

Figma plugin / Start here

Get going with Color Extractly

Quickstart
Made for
Setting up or tidying a design system: colours, type, spacing and their handoff to code.
First step
Paste a stylesheet, or pick a starter such as Material 3, and review the tokens before you render them.
Your options
Free with daily limits and a 7-day Pro trial. Pro is a one-time purchase: pay what you want, from €4.99.

Guide: Turn CSS and Tailwind colors into Figma variables

Code in, tokens out

Code in, tokens out

Paste CSS, SCSS, JSON or a DESIGN.md. Colours, type and spacing arrive named and sorted.

Start from a system

Start from a system

Material 3, Apple HIG, Fluent 2, Tailwind, Bootstrap or Ant Design as your base.

Contrast you can trust

Contrast you can trust

WCAG, APCA and colour-blind checks for every pair, with fixes suggested.

Keep the file in line

Keep the file in line

Match stray values to your variables and clean up duplicate styles.

Handoff in any format

Handoff in any format

CSS, Tailwind, DTCG, iOS, Android and eight more, plus a DESIGN.md for AI tools.

Start from a system you trust.

Six design systems to start from, each with its colours, type and spacing.

All options
  • Generate a random palette, type and spacing to explore.
  • Save, reopen and render whole projects to the canvas.
  • Import a token file you already have.
Design Token Studio, New project with the Generate menu open: Random sample, Material 3, Apple HIG, Microsoft Fluent 2, Tailwind CSS v4, Bootstrap v5.3 and Ant Design v5. Below, the saved projects Fjordlight Core and Trail App.
Six starters, two saved projects.

Paste a stylesheet. Get a system.

CSS, SCSS, JSON or a DESIGN.md. Selections, images and your file's styles work too.

Design Token Studio, From text / code: the Fjordlight stylesheet pasted in, with Extract Colors.
The Fjordlight stylesheet, pasted in.

Type and spacing, as tokens too.

Type styles grouped by role, ready to render as Figma text styles. Read the guide.

Design Token Studio typography: Display and Heading groups previewed with a pangram, and Render Text Styles.
Display and heading styles, grouped.
Demo

Try it in your browser

Explore palettes, check contrast, or extract colors from your CSS. No signup.

Extracted Colors (0)

🎨

Paste code and click "Extract Colors" to see results

Sample Text
16px

Suggest a foreground adjustment; review the WCAG ratio separately.

--
Calculating... PAS Score
WCAG ratio --
Detailed measurements

Readability

Text / Polarity --
PLC --
Local PLC min --

CVD Robustness

ΔL* min (CVD) --
ΔE00 --
What is PAS?

PAS is an experimental design heuristic using perceptual contrast, text size and simulated color vision differences. Its score and badges do not establish WCAG conformance. Check the separate WCAG ratio and test the complete interface.

Read the WCAG text contrast guidance

🔒 = locked • Click to edit • Right-click to unlock

CSS Variables 
 
 
 
 
 
 
 
Fresh Inspiration
  
 
 
Gradient Palettes
 
 
 
 
Hue Ramps
 
 
 
 
 
 
 
Build a gradient, save it to your library, and share a link. Mesh gradients too.
 
Open the CSS Gradient Generator
  
 
 
 
 
 
Palettes that move with you.
 
Pick a harmony and a tone, set the steps and the depth. Studio builds the ramp around your colour.
 
 
     
 
 
All options
  • Seven harmonies, from mono light and dark to triadic and tetradic.
  • Save any ramp as a hue ramp and keep its shades together.
  • Link a colour to your design and choose what it replaces.
  • Start from a random palette, type and spacing with one click.
 
 
 
 
 
Design Token Studio Generate Suggestions: a colour wheel with three points, type Split Comp., tone Friendly (bright), 8 steps and depth 20, above an eight-step ramp from sky to butter, with Save Hue Ramp.
A split-complementary ramp around fjord blue.
 
    
 
 
 
 
 
 
 
Readable for everyone.
 
Choose a pair, or drag a point on the web. The same maths as the plugin finds a text colour that gets there.
 
 
     
 
 
The score is PAS, our readability heuristic. It adds to WCAG; it does not certify conformance.
All options
  • WCAG 2 contrast ratio, with the AA and AAA targets.
  • APCA lightness contrast, built for modern text sizes.
  • Colour-blind robustness, measured as ΔL* and ΔE00.
  • Badges for large text, dark mode and gradients.
 
 
 
 
 
Interactive accessibility check from Design Token Studio: choose a colour pair, or drag a point on the radar, to see the score, the WCAG ratio and APCA change.
– Perceptual Accessibility Score
–WCAG –AAAAAAPCA –
PLCAPCAWCAGΔE00ΔL*Local
White on Ultraviolet
 
    
 
 
 
 
 
 
 
Hand off without retyping a hex.
 
CSS, Tailwind, DTCG, iOS, Android and seven more, with your naming.
 
 
    
 
 
All options
  • CSS, JSON, JSON for Figma, SCSS, SCSS map, LESS, ES module and CommonJS.
  • Tailwind, Android XML, iOS Swift and DTCG.
  • An implementation spec for any selection.
  • Remove duplicate and unused styles; detach or restore instances.
 
 
 
 
 
Design Token Studio Export Variables as Code Token in dark mode: CSS output with mirror-path naming, the Fjordlight variables and Download.
The Fjordlight tokens as CSS.
 
   
 
 
 
  
 
 
 
From the community
 
 
 
 

"This is such an awesome tool Dave!"

 
 
 Daniyal Habib Avatar 
 
 Daniyal Habib 
via Figma Community                                     
 
 
 
 
 
   
 
 
 

Pricing Plans                
 
Start creating. Upgrade when you need more.
 
 
 
 
 
 
01 / Start here
 
Free
 
Start with the free features.
 Open in Figma 
  
  
Recommended
 
02 / Go Supporter
 
Supporter
 
EUR 4.99
One-Time Payment
 
Pay what you want, from €4.99. Unlocks Pro, yours to keep.
 
     
  • Render colours and sheets without a daily limit
  • Drop colour sheets without a daily limit
  • Keep up to 25 saved projects
  • All future updates
    •  
 Name your price 
 
 
 
 
 
 
 
  14-day money-back guarantee 
 
Licences have no device limit. Taxes and any currency conversion are confirmed at checkout.
 
 
 
  Need a business license or a custom offer? 
 Tell me what you need 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
Frequently asked questions
 
The details, when you need them.
 
 
 
 
  What is the difference between Design Token Studio and Classic?   
 

Design Token Studio builds whole systems: colours, type and spacing, starters, projects, file tools and DESIGN.md. Color Extractly Classic is the lighter, separate plugin for extracting and exporting colours, and it also runs in FigJam and Slides.                                
 
 
 
  Is it free?   
 

Yes, with daily limits: 2 renders to Figma and 3 colour-sheet drops a day, and one saved project to open. Pro starts as a 7-day trial. After that it is a one-time purchase: pay what you want, from €4.99.                                
 
 
 
  Which design systems can I start from?   
 

Material 3, Apple HIG, Microsoft Fluent 2, Tailwind CSS v4, Bootstrap 5.3 and Ant Design 5, or a random sample. Apple publishes no fixed hex values, so its colours are community measurements.                                
 
 
 
  What can I paste?   
 

CSS, SCSS, JSON or a DESIGN.md. Colours, type styles and spacing values are read in one go. You can also extract from a selection, an image or your file's styles and variables.                                
 
 
 
 
 
  Does importing keep Figma in sync with my code?   
 

No. Import and export are one-off actions. When the code changes, extract again and review the differences.                                
 
 
 
  What is PAS?   
 

The Perceptual Accessibility Score is a RAIKEN heuristic that combines readability signals. It sits beside the WCAG ratio, APCA and the colour-blind check, and does not certify WCAG conformance.                                
 
 
 
  Does it send my design anywhere?   
 

Extraction and export run in Figma. The plugin talks to raiken.io to check a licence, to sign in and sync colours if you choose to, and to send usage events.                                
 
 
 
 
 
 
  
 
 
 
Release Notes & Changelog
 
Recent product updates and improvements.
 
 
 
  
 V84.20 LATEST 
 
 Your lists, exactly the way you want them 
 
  
  
 
 
Rename tokens in place, reorder them by dragging, and sort with immediate effect.
 
     
  •   Rename in place: click a token name and type. Enter saves, Escape reverts. 
    •  
  •   Drag to reorder: drop a token where it belongs and it stays, through to your exports. 
    •  
  •   Sorting that answers: Sort by applies the moment you pick it, and saved projects open newest first. 
    •  
 
 
 
 
  
 V84.10 
 
 Start from a real design system 
 
  
  
 
 
Generate tokens from the official defaults of popular design systems, then keep your sheets in sync.
 
     
  •   Design-system presets: generate Material 3, Apple HIG, Fluent 2, Tailwind, Bootstrap or Ant Design tokens from the Generate menu. 
    •  
  •   Update Sheet: refresh a selected sheet's sizes, usage and details in place, without re-rendering, so your tweaks are kept. 
    •  
  •   Sheet footer: generated sheets carry a version, a last-updated date and a Color Extractly link. 
    •  
 
 
 
 
  
 V84.00 
 
 Projects 
 
  
  
 
 
Bundle colors, typography and numbers into named projects you can save, reopen and regenerate.
 
     
  •   Projects: group your tokens into named design-system projects from the Overview tab. 
    •  
  •   Save and restore: reopen a project to load its exact tokens, or regenerate a fresh variation. 
    •  
  •   Canvas overview: render a project overview onto your Figma canvas and click to re-import. 
    •  
 
 
 
    ARCHIVE Open Knowledge Base Archive 
  
  
 
 
  
 
 
 
Quickstart: a token system from your CSS
 
Four steps, then two notes worth knowing.
 
 
 
 
1. Paste your stylesheet


Open Design Token Studio in a Figma file you can edit and paste a stylesheet, for example :root { --color-primary: #1F5F8B; --radius-md: 8px; }. Or start from a system such as Material 3 in a new project.


2. Review the tokens


Check names and values in the colour, type and number lists. Magic Clean merges duplicates; Rename gives the list one scheme.


3. Check contrast


Open a colour to see it against text. Read PAS beside the WCAG ratio and APCA, and take a suggested pair where it helps.


4. Render and export


Render colours, text styles and numbers to Figma as variables and styles, then choose Code Token to export CSS, Tailwind, DTCG or another format. The playground file has examples.


Import and export are one-off actions


Changing the stylesheet later does not update an earlier import. Extract again and review the differences.


Contrast, twice


PAS is a RAIKEN heuristic. Treat it as guidance beside the WCAG ratio; see the W3C contrast criterion.
 
 
 
 
 
 
 
 
Pairs well with Color Extractly
 
Browse all plugins
 
 
 
   
 Cartridge Base 
 Figma Plugin 
 
 
   
 
 
 
 
 
Color Extractly Classic
 
 
Every Color, One Clean List
 
   
 Cartridge Base 
 Figma Plugin 
 
 
   
 
 
 
 
 
Contently
 
 
AI-Powered Content Generation For Figma
 
   
 Cartridge Base 
 Figma Plugin 
 
 
   
 
 
 
 
 
design.md
 
 
DESIGN.md Specs From Your Figma Frames