prefix: `$color-primary: #1a73e8`. For a scale, use a map: `$primary: (50: #eff6ff, 100: #dbeafe, ..., 950: #172554)`. Access with `map.get($primary, 500)`. SCSS maps let you loop over shades programmatically to generate utility classes."}},{"@type":"Question","name":"How do I add palette colors to Tailwind config?","acceptedAnswer":{"@type":"Answer","text":"Add an object under `theme.extend.colors` in `tailwind.config.js`. The key is your color name, the value is either a single hex string (flat color) or an object with numeric shade keys. After saving, Tailwind generates all utility classes (`bg-brand-*`, `text-brand-*`, etc.) automatically for the next build."}},{"@type":"Question","name":"What is a JSON color token format?","acceptedAnswer":{"@type":"Answer","text":"A common JSON color token format is the W3C Design Tokens Community Group spec: `{ 'color-primary': { '$value': '#1a73e8', '$type': 'color' } }`. Tools like Style Dictionary parse this JSON and output it to any target format — CSS variables, SCSS, JavaScript, iOS, Android. This makes JSON the single source of truth for a cross-platform design system."}}]}

Export Color Palettes to Figma and CSS

Generate color palettes and export them to Figma, CSS variables, Tailwind config, and SCSS tokens.

Published: 2026-01-28

Tags: export color palette Figma, color palette to CSS variables, design system color export

Export Color Palettes to Figma and CSS Generating a palette is only half the work. This guide covers exporting it into every format your team uses — CSS variables, Tailwind config, SCSS tokens, Figma styles, and JSON design tokens. For a full overview of color utilities, see the Color Tools for Designers and Developers guide. To generate the palette, use the Palette Generator. --- What about CSS Custom Properties? The most portable export format — works in vanilla CSS, any preprocessor, any framework. Naming conventions: | Convention | Example | Use When | |---|---|---| | Scale-based | | Design systems with multiple themes | | Semantic | | Small projects, few colors | | Role-based | , | Component libraries | --- What about Tailwind Config? Generate the full shade scale with the Tailwind…

Frequently Asked Questions

How do I export a color palette to Figma?

Figma doesn't have a direct palette import from external tools, but you can add colors as local styles programmatically via the Figma API, or paste hex values manually into the color styles panel. Figma plugins like 'Styler' or 'Palette' automate this — you paste JSON or CSV and the plugin creates local color styles automatically.

How do I turn a color palette into CSS variables?

Map each palette color to a CSS custom property name following a semantic or scale-based naming convention. Example: `--color-primary-500: hsl(217, 80%, 51%)`. Define all variables inside a `:root {}` block. Components reference these variables instead of hardcoded values, enabling global theme changes from one location.

How do I generate SCSS color tokens?

Define palette colors as SCSS variables using the ` Export Color Palettes to Figma and CSS | theproductguy.in prefix: `$color-primary: #1a73e8`. For a scale, use a map: `$primary: (50: #eff6ff, 100: #dbeafe, ..., 950: #172554)`. Access with `map.get($primary, 500)`. SCSS maps let you loop over shades programmatically to generate utility classes."}},{"@type":"Question","name":"How do I add palette colors to Tailwind config?","acceptedAnswer":{"@type":"Answer","text":"Add an object under `theme.extend.colors` in `tailwind.config.js`. The key is your color name, the value is either a single hex string (flat color) or an object with numeric shade keys. After saving, Tailwind generates all utility classes (`bg-brand-*`, `text-brand-*`, etc.) automatically for the next build."}},{"@type":"Question","name":"What is a JSON color token format?","acceptedAnswer":{"@type":"Answer","text":"A common JSON color token format is the W3C Design Tokens Community Group spec: `{ 'color-primary': { '$value': '#1a73e8', '$type': 'color' } }`. Tools like Style Dictionary parse this JSON and output it to any target format — CSS variables, SCSS, JavaScript, iOS, Android. This makes JSON the single source of truth for a cross-platform design system."}}]}

Export Color Palettes to Figma and CSS

How do I add palette colors to Tailwind config?

Add an object under `theme.extend.colors` in `tailwind.config.js`. The key is your color name, the value is either a single hex string (flat color) or an object with numeric shade keys. After saving, Tailwind generates all utility classes (`bg-brand-*`, `text-brand-*`, etc.) automatically for the next build.

What is a JSON color token format?

A common JSON color token format is the W3C Design Tokens Community Group spec: `{ 'color-primary': { '$value': '#1a73e8', '$type': 'color' } }`. Tools like Style Dictionary parse this JSON and output it to any target format — CSS variables, SCSS, JavaScript, iOS, Android. This makes JSON the single source of truth for a cross-platform design system.

All articles · theproductguy.in