Any Color Tokens to Figma Styles

About this plugin

Color Import lets you bring your color token system into Figma in seconds — no copy-pasting hex codes, no manual style creation.

Paste your tokens in any format and the plugin auto-detects the structure, converts all color spaces to sRGB, and creates named local paint styles ready to use across your file.

Supported input formats

• CSS Variables (:root { --brand-50: oklch(...) })

• Tailwind V3 config and Tailwind V4 @theme

• SCSS variables

• CSS classes

• TypeScript / JavaScript objects

• JSON — W3C DTCG, Style Dictionary, Tokens Studio, Figma

• Variables export, Plain JSON

• SVG inline colors

Supported color spaces

• OKLCH and OKLab — full gamut, precise conversion

• HSL and HWB

• CIE Lab

• RGB / RGBA

• Hex (#rgb, #rrggbb, #rrggbbaa)

Key features

• Auto-detect format — just paste and go

• Live preview swatches before committing to import

• Hover tooltips show style name, source value, and computed RGB

• Three conflict modes: overwrite existing styles, skip, or always create new

• Optional group prefix override — map any input to a custom Colors/Brand path

• Handles mixed formats in a single paste (e.g. OKLCH and hex in the same :root block)

Who it's for

Design system teams managing multi-scale token sets, developers handing off token files, and designers who work directly from code-based design tokens.