Design handoff
Figma Color Tokens Generator
Turn a palette into named color tokens that designers and developers can share. Generate light and dark values, then copy the JSON into your token pipeline.
A Figma color token is a named color value, usually with a light and dark mode. Generate semantic names such as primary, surface and muted-text, then import the JSON into Figma variables or a token plugin.
Live theme
Preview a complete light and dark theme
Choose a sample palette, switch themes, and copy the CSS variables a real component library consumes.
A theme that holds up in both modes.
Surfaces, borders and text pairs are generated from the same palette. Switch the theme and compare the hierarchy.
Semantic roles
Contrast checks
Copy the theme
:root {
--color-primary: #6B4E9A;
--color-primary-foreground: #FFFFFF;
--color-secondary: #FFF8F0;
--color-accent: #FFD166;
--color-neutral: #64748B;
--color-background: #FFF8F0;
--color-surface: #FFFCF8;
--color-text: #111827;
--color-muted-text: #111827;
--color-border: #D4D3D4;
--color-success: #16A34A;
--color-warning: #FFD166;
--color-danger: #F27E59;
}
[data-theme="dark"] {
--color-background: #1A1A2E;
--color-surface: #111225;
--color-text: #FFFFFF;
--color-muted-text: #A2ACB9;
--color-border: #3B4257;
--color-primary: #A793C8;
--color-primary-foreground: #111827;
}:root {
--background: #FFF8F0;
--foreground: #111827;
--card: #FFFCF8;
--card-foreground: #111827;
--primary: #6B4E9A;
--primary-foreground: #FFFFFF;
--secondary: #FFF8F0;
--secondary-foreground: #111827;
--accent: #FFD166;
--accent-foreground: #111827;
--muted: #FFFAF4;
--muted-foreground: #111827;
--border: #D4D3D4;
--destructive: #F27E59;
--destructive-foreground: #FFFFFF;
--ring: #6B4E9A;
}
.dark {
--background: #1A1A2E;
--foreground: #FFFFFF;
--card: #111225;
--card-foreground: #FFFFFF;
--primary: #A793C8;
--primary-foreground: #111827;
--secondary: #FFF8F0;
--secondary-foreground: #111827;
--accent: #FFD166;
--accent-foreground: #111827;
--muted: #16162A;
--muted-foreground: #A2ACB9;
--border: #3B4257;
--destructive: #F27E59;
--destructive-foreground: #FFFFFF;
--ring: #A793C8;
}{
"color": {
"primary": {
"value": "#6B4E9A",
"type": "color"
},
"secondary": {
"value": "#FFF8F0",
"type": "color"
},
"accent": {
"value": "#FFD166",
"type": "color"
},
"neutral": {
"value": "#64748B",
"type": "color"
},
"background": {
"value": "#FFF8F0",
"type": "color"
},
"surface": {
"value": "#FFFCF8",
"type": "color"
},
"text": {
"value": "#111827",
"type": "color"
},
"mutedText": {
"value": "#111827",
"type": "color"
},
"success": {
"value": "#16A34A",
"type": "color"
},
"warning": {
"value": "#FFD166",
"type": "color"
},
"danger": {
"value": "#F27E59",
"type": "color"
}
},
"dark": {
"background": {
"value": "#1A1A2E",
"type": "color"
},
"surface": {
"value": "#111225",
"type": "color"
},
"text": {
"value": "#FFFFFF",
"type": "color"
},
"mutedText": {
"value": "#A2ACB9",
"type": "color"
}
}
}{
"primary": "oklch(48.97% 0.1205 299.6)",
"secondary": "oklch(98.24% 0.0130 71.3)",
"accent": "oklch(88.03% 0.1348 86.1)",
"neutral": "oklch(55.44% 0.0407 257.4)",
"background": "oklch(98.24% 0.0130 71.3)",
"foreground": "oklch(21.01% 0.0318 264.7)",
"surface": "oklch(99.23% 0.0062 75.4)",
"success": "oklch(62.71% 0.1699 149.2)",
"warning": "oklch(88.03% 0.1348 86.1)",
"danger": "oklch(71.71% 0.1518 38.3)"
}
Styles vs variables vs tokens
A Figma color style is a reusable color swatch. A variable is a named value that can change by mode, such as light or dark. A design token is the broader idea: a named decision that can be exported to code, documentation or another tool.
For a brand system, variables are usually the better fit because they can represent the same semantic role in multiple modes. A style named `Primary` is one value. A variable named `color/primary` can have a light value and a dark value.
The token names matter more than the storage format. If the names describe jobs rather than appearance, the system survives a rebrand. `color/action/primary` is more durable than `blue-500`.
The token names that survive handoff
Use a small, stable vocabulary. Start with `color/background`, `color/surface`, `color/text`, `color/text-muted`, `color/border`, `color/primary`, `color/primary-foreground`, `color/accent` and `color/danger`.
Group by role, not by hue. A developer should be able to guess where a token belongs without opening the design file. If a token is named `orange`, it will become wrong as soon as the brand changes.
Keep the scale separate from the semantic layer. A neutral ramp can have names such as `neutral/100` through `neutral/900`; the semantic tokens then reference those values. This gives designers room to adjust the ramp without renaming every component.
- Name the job: action, surface, text, border, status.
- Keep raw ramps separate from semantic roles.
- Use modes for light and dark, not duplicate token sets.
- Document which tokens are safe for text.
Light and dark modes
If your Figma plan supports variable modes, create a Light and a Dark mode and assign both values to each semantic token. If not, create two token collections or two JSON files and document the mapping.
The dark values should be chosen for dark surfaces, not derived by inverting the light values. The same primary token can have a different value in each mode.
When you export to code, keep the same token names. A CSS variable named `--color-primary` and a Figma variable named `color/primary` are easier to keep in sync than two unrelated naming systems.
Importing JSON into Figma
Figma's native variables can be created manually, or imported through plugins that accept a token JSON file. The exact import flow depends on the plugin and the Figma plan, so check the plugin's documentation before you start.
A practical format is a nested JSON object with `value` and `type` fields for each token. PhotoColors generates that shape so it can be adapted to common token plugins.
Import a small set first. Confirm that the names, values and modes arrive correctly, then import the rest. A failed import is easier to diagnose with ten tokens than with a hundred.
Keeping Figma and code in sync
The most common handoff failure is drift: the design file and the codebase both have a `primary` color, but they are different values. A token pipeline should have one source of truth and a repeatable export.
At small scale, a JSON file in the repository can be the source. At larger scale, a token platform or a build step can generate both CSS and Figma imports from the same data.
Whatever the setup, review the rendered result, not just the token values. A variable can be correct and still be used in the wrong place.
FAQ
Figma Color Tokens Generator FAQ
What is a Figma color token?
A named color decision, such as `color/primary` or `color/surface`, that can be reused across designs and exported to code. It is more durable than a raw HEX value because it describes a job.
Should I use Figma styles or variables?
Variables are better when you need light and dark modes or multiple themes. Styles are simpler for a single-mode brand palette. Many teams use both: variables for semantic roles, styles for raw ramps.
Can I import the generated JSON into Figma?
The JSON is designed for token plugins that accept a nested value/type format. Check your plugin's import schema, because Figma's native import options and plugin support vary by plan.
How many color tokens should I create?
Start with the roles the product actually uses: background, surface, text, muted text, border, primary, primary foreground, accent and status colors. Add tokens when a real component needs them.
Can I generate Figma tokens from a logo?
Yes. Upload the logo, extract the palette, and export semantic tokens. Review edge colors and assign the primary role deliberately.
Keep going
Related tools and guides
shadcn Theme Generator
A shadcn theme is a set of CSS custom properties for light and dark modes. Generate them from a real palette, check the foreground pairs, and paste the variables into your global stylesheet.
Brand Color Picker
Use a brand color picker to choose an anchor color, then assign it to roles and test it against real text and surface pairs. A single HEX value is not a brand system; the roles and contrast checks are what make it usable.
Image to Color Palette Generator
PhotoColors extracts dominant colors from an image in your browser, then maps them into primary, secondary, accent and neutral roles. The image is never uploaded, and every palette includes WCAG contrast checks and developer exports.
Figma Color Variables Without Handoff Drift
A Figma file full of beautiful styles can still hand off the wrong colors. Variables, modes and a shared naming system are what prevent the drift.
Extracting Brand Colors From a Logo Without Chasing Edge Pixels
A logo looks like the simplest possible color source. In practice, anti-aliasing, compression and backgrounds can turn a two-color mark into a ten-color mess. Here is how to get the real palette.