Color tool guide
Color design tokens generator
Export a palette as simple JSON or DTCG 2025.10 tokens with primitives and semantic light/dark aliases.
Primitive colors
Primary, secondary and neutral scales store explicit color values. Supporting primitives preserve semantic colors that are not already on a scale.
Semantic aliases
Light and dark groups describe roles such as background, text and primary. Each role references a primitive instead of repeating its value.
DTCG color and alias example
{
"color": {
"$type": "color",
"brand": {
"$value": {
"colorSpace": "srgb",
"components": [
0.1450980392156863,
0.38823529411764707,
0.9215686274509803
],
"alpha": 1,
"hex": "#2563eb"
}
}
},
"semantic": {
"$type": "color",
"primary": {
"$value": "{color.brand}"
}
}
}Reduced example. The generator exports complete scale and semantic groups, with sRGB components from 0 to 1.
Use tokens in your project
Choose the light or dark group in your token pipeline. These are separate groups, not an automatic theme switch. Keep your existing imports and check which DTCG version your tools support.