Color Token Generator
Turn a base color into a complete W3C design tokens file, compatible with Style Dictionary, Tokens Studio and modern design system pipelines.
What is a design token?
A design token is a named color (or spacing, or typography, or radius) that a design system exposes as the single source of truth. Instead of writing #4f46e5 in a hundred components, you write color.primary.500. Change the token, and every component updates.
The W3C format
The W3C Design Tokens Community Group defined a small JSON dialect that tools can agree on. Every token is an object with $type and $value keys:
{
"color": {
"primary": {
"50": { "$type": "color", "$value": "#eef2ff" },
"500": { "$type": "color", "$value": "#4f46e5" },
"950": { "$type": "color", "$value": "#1e1b4b" }
}
}
}Two-layer token architecture
Robust design systems use primitives plus semantic aliases. Primitives describe colors; semantics describe their roles.
{
"color": {
"blue": {
"500": { "$type": "color", "$value": "#4f46e5" },
"600": { "$type": "color", "$value": "#4338ca" }
},
"action": {
"primary": { "$type": "color", "$value": "{color.blue.500}" },
"primaryHover": { "$type": "color", "$value": "{color.blue.600}" }
}
}
}Aliases use curly braces to reference other tokens. Style Dictionary resolves them at build time, so the output is always concrete values.
Frequently asked questions
Which tools read the W3C format?
Style Dictionary, Tokens Studio, Figma plugins, Zeroheight, Supernova and many others. The format is deliberately generic so tools can build on top of it.
Can I add descriptions to tokens?
Yes. The W3C format supports an optional $description key on each token. Adding one helps designers understand the intent of each color when they browse the token file.
How do aliases work?
Write "$value": "{color.blue.500}" to alias the token to another. Tools resolve the reference at build time, so your final output is always concrete.
Does the generator upload anything?
No. Everything happens in your browser.