Color extractor for Figma Every color. One clean list.

Paste a stylesheet, select some layers or drop a screenshot. Color Extractly Classic finds every color, keeps the names your code already uses and hands them on as tokens, styles or variables.

Open in Figma Try the demo
Sources
Code · layers · images · styles
Exports
11 token formats
Start
Free Lite tier
Color Extractly Classic
TextSelectionImage
:root { --fjord-blue: #1F5F8B; --ember: #E8743B; --glacier: #9FD3E6; --pine: #2F6B4F; }Extract all Colors

Works in

  • Figma
  • FigJam
  • Slides
Need a whole design system? Design Token Studio

Figma plugin / Start here

Get going with Color Extractly Classic

Quickstart
Made for
Pulling every color out of a stylesheet, a selection or a screenshot, and handing it on as clean tokens.
First step
Paste a CSS snippet into the Text tab and choose Extract all Colors.
Your options
Free Lite tier: up to 12 colors per list and 4 renders a day. Pro lifts the limits.

Made by David ZerbeRAIKEN / uxactly GmbH

Reads real code

Reads real code

HEX, RGB and HSL, with or without alpha. It follows var() references and reads gradients too.

Four ways in

Four ways in

Paste text, pick layers, drop an image or start from your Figma styles.

Duplicates, merged

Duplicates, merged

Magic Clean combines the same or similar colors, and Undo is one click away.

Names that make sense

Names that make sense

Keep the names from your code, or rename the list in one go with a template.

Tokens for any stack

Tokens for any stack

CSS, SCSS, LESS, JSON, DTCG, Tailwind, Android and iOS, with seven naming presets.

From stylesheet to color list.

Paste a token sheet, a component's CSS or any text with colors in it.

All options
  • Pick layers and choose fills, text and strokes.
  • Drop or upload an image to pull its colors.
  • Start from the styles and variables already in your file.
  • Drag a color from the list straight onto the canvas.
Color Extractly Classic, Text tab: a Fjordlight CSS token sheet pasted in, with Start from Scratch and Extract all Colors below.
The Text tab with a pasted token sheet.
Demo

Try it in your browser

A simplified taste of the Color Extractly tools, right here. 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

Readability

Text / Polarity --
PLC --
Local PLC min --
WCAG ratio --

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
 
 
 
 
 
 
 
Want to build your own gradient from scratch?
 
Open the CSS Gradient Generator
  
 
 
 
 
 
Know if your text will read.
 
Open any color to check it against text. You get a Perceptual Accessibility Score beside the WCAG ratio, suggestions and a hue ramp you can save.
 
 
   
 
 
 
 
 
 
Color Extractly Classic compare panel for Ember #E8743B in dark mode: Example Text, PAS: 98 Exceptional, Swap, Active Colors, Generate Suggestions, Reset and Save Hue Ramp.
Ember checked against the darkest Fjordlight color.
 
  
 
 
 
 
 
 
 
Hand off tokens, not screenshots.
 
CSS custom properties, named the way the list names them. Copy or download.
 
 
    
 
 
All options
  • CSS, SCSS, SCSS map, LESS, JSON, ES module and CommonJS.
  • Tailwind, Android XML, iOS Swift and DTCG.
  • Seven naming presets, from BEM to a T-shirt scale.
  • Apply a color to the layers you have selected.
 
 
 
 
 
Color Extractly Classic Export Variables as Code Token in dark mode: Output CSS, naming $full with seven presets, and the :root block of Fjordlight colors, with Download, Copy and Regenerate.
Code Tokens, CSS output.
 
   
 
 
 
 
 
 
 
Classic or Studio?
 
Classic does one job well: colors in, clean tokens out. Design Token Studio is the same idea grown into a whole design system.
 
 
 
 
 
 
Classic
 
For extracting and handing on colors.
 
     
  • Colors from code, layers, images and styles
    •  
  • Magic Clean, Rename and the accessibility score
    •  
  • 11 token formats, styles and variables
    •  
  • Figma, FigJam and Slides
    •  
 
 
 
Design Token Studio
 
For building and keeping a design system.
 
     
  • Typography and number tokens from your code
    •  
  • Starters such as Material 3, Fluent 2 and Tailwind
    •  
  • Tools to match, swap and clean up a file
    •  
  • DESIGN.md export for AI and handoff
    •  
 
See Design Token Studio · Guide: CSS colors to Figma variables
 
 
 
 
 
 
  
 
 
 
Frequently Asked Questions
 
Everything you need to know about the plugin.
 
 
 
 
  How is Classic different from Design Token Studio?   
 

Classic extracts colors and exports them. Design Token Studio, at /figma-plugins/colorextractly, adds typography and number tokens, design-system starters, file tools and DESIGN.md export. They are separate plugins on Figma Community.                                
 
 
 
  Is Classic free?   
 

Yes, the Lite tier is free. It handles up to 12 colors per list and 4 renders to Figma a day. Pro lifts those limits and is unlocked in the plugin.                                
 
 
 
  Which color formats does it read?   
 

HEX, RGB, RGBA, HSL and HSLA. It also follows var() references and reads the colors inside gradients.                                
 
 
 
  Does it keep transparency?   
 

Yes. A translucent color keeps its alpha in the list and in the export.                                
 
 
 
 
 
  Which export formats are there?   
 

CSS, SCSS, SCSS map, LESS, JSON, ES module, CommonJS, Tailwind, Android XML, iOS Swift and DTCG, with seven naming presets. Check the output in your project before you commit it.                                
 
 
 
  What is PAS?   
 

The Perceptual Accessibility Score is a RAIKEN heuristic that combines readability signals. It sits beside the WCAG contrast ratio and does not certify WCAG conformance.                                
 
 
 
  Does it send my colors anywhere?   
 

No. Extraction runs in Figma. The plugin talks to raiken.io only to check a licence and, if you agree, to send usage events.                                
 
 
 
 
 
 
  
 
 
 
Quickstart: CSS colors into Figma
 
Four steps, then two notes worth knowing.
 
 
 
 
1. Paste a stylesheet


Open Color Extractly Classic in a Figma, FigJam or Slides file. In the Text tab, paste a short sample such as :root { --brand: #1F5F8B; --accent: #E8743B; } and choose Extract all Colors.


2. Clean the list


Check names, values and alpha. Magic Clean merges duplicates; Rename gives the list one naming scheme.


3. Hand it on


Choose Code Tokens, pick the output and a naming preset, then copy or download the result.


4. Bring it into Figma


Choose Render Colors to Figma, then add the colors as styles or as variables.


Import and export are one-off actions


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


Check contrast twice


PAS is a RAIKEN readability heuristic. Read it beside the WCAG ratio; see the W3C contrast criterion.
 
 
 
 
 
 
 
 
More plugins
 
Browse all plugins
 
 
 
   
 Cartridge Base 
 Figma Plugin 
 
 
   
 
 
 
 
 
Color Extractly
 
 
Design Token Studio For Figma
 
   
 Cartridge Base 
 Figma Plugin 
 
 
  
 
 
 
 
 
design.md
 
 
DESIGN.md Specs From Your Figma Frames
 
   
 Cartridge Base 
 Figma Plugin 
 
 
   
 
 
 
 
 
Notely Sticky Widget
 
 
Free Sticky Notes On The Figma Canvas