CSS colors to Figma variables Paste your CSS. Get variables.

Most plugins export Figma variables to code. Color Extractly goes the other way: paste a stylesheet or a Tailwind config, and every color it finds becomes a Figma variable.

Open in Figma See the steps

Reads: CSS · SCSS · LESS · Tailwind
Creates: Figma variables
Exports back: 12 code formats

Color Extractly

Inspiration

The plugin

Everything about Color Extractly

Four steps to variables

Paste the code. Color Extractly lists every color it finds, with the names from your code.

Run Color Extractly and stay on the Colors tab.
Choose From Text / Code on the start screen.
Paste your CSS, SCSS, LESS or Tailwind config and click Extract Colors.
Open the list menu (the ••• button) and choose Import to Variables.

The new collection is called Extracted Colors. Changed your CSS? Import again: variables with the same name are updated, not duplicated.

Color Extractly, From Text / Code: CSS custom properties such as --ember-300: #FF9B66 pasted into the text field, with the Extract Colors button below. — From Text / Code with a pasted color scale.

What you can paste

Any text with colors in it: a stylesheet, a design token file, a Tailwind config, a snippet from a code review.

Hex values with 3, 4, 6 or 8 digits
rgb() and rgba(), hsl() and hsla()
CSS named colors
CSS custom properties, SCSS and LESS variables, with their names

:root {
  --brand-500: #5742ed;
  --brand-100: rgb(237, 235, 252);
  --success: hsl(152, 40%, 30%);
}
$ink: #14202b;
@ink-muted: #5b6873;

Color Extractly reads all five colors in this snippet, each with its name.

Clean up first

Stylesheets collect near-duplicates. Merge them and fix the names before you import, so your variable collection starts tidy.

Click Magic Clean and choose Similar Color Codes, Same Color Code or Same Variable Name. Move the Threshold slider, then click Reduce.
Click Rename and pick a preset, such as Color family + scale. Or write your own template with tokens like $name and $count.
Not happy? Undo takes the list back to how it was before the last Magic Clean.

Color Extractly color list with the Magic Clean and Rename buttons above it. — Magic Clean and Rename sit above the list.

All options

Rename presets: Color family + scale, Smart name + scale, Smart name + 2-digit index, Hex + scale, Full path + scale, Full path only.
Names are generated on your device, from a built-in color-name dictionary.
Code Token exports the list back to code: CSS, JSON, JSON (Figma), SCSS, SCSS Map, LESS, ESM, CJS, Tailwind, Android XML, iOS Swift and Web Tokens (DTCG).

CSS to Figma variables: common questions

Which color formats does Color Extractly read?

Hex values (3, 4, 6 and 8 digits), rgb() and rgba(), hsl() and hsla(), CSS named colors, CSS custom properties, and SCSS or LESS variables.

Does it work with Tailwind colors?

Yes, when the colors are written as hex, rgb() or hsl(). In a v4 @theme block they keep their names, such as --color-brand-500. From a tailwind.config file the values come in without names, and Rename gives them one. Tailwind v4's default palette uses oklch(), which Color Extractly does not read yet.

Do my variable names carry over?

CSS custom properties and SCSS or LESS variables keep their names. Use Rename to tidy them, or to name colors that came without one.

What happens if I import again after my CSS changes?

They update. Variables with the same name in the collection take the new values, so nothing is duplicated.

Can I export Figma variables back to CSS or Tailwind?

Yes. Code Token exports your colors as CSS, Tailwind, SCSS, LESS, JSON, Web Tokens (DTCG) and more. You can download the file or copy the code.

Can I extract colors without code?

Yes. From Selection reads the colors of your Figma selection, and From Image pulls the palette out of an image.

Where can I read more?

The Color Extractly help center has a guide for every step.