Anleitung zum Farbwerkzeug
Generator für Farb-Design-Tokens
Eine Palette als einfaches JSON oder DTCG-2025.10-Tokens mit primitiven Werten und semantischen Aliasen für Hell/Dunkel exportieren.
Primitive Farben
Primär-, Sekundär- und Neutralstufen speichern explizite Farbwerte. Weitere Primitive erhalten semantische Farben, die nicht in den Stufen vorkommen.
Semantische Aliase
Helle und dunkle Gruppen beschreiben Rollen wie Hintergrund, Text und Primärfarbe. Jede Rolle verweist auf einen primitiven Wert.
Beispiel für DTCG-Farbe und Alias
{
"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}"
}
}
}Gekürztes Beispiel. Der Generator exportiert vollständige Skalen und semantische Gruppen mit sRGB-Komponenten von 0 bis 1.
Tokens im Projekt verwenden
Die helle oder dunkle Gruppe in der Token-Pipeline auswählen. Getrennte Gruppen wechseln das Thema nicht automatisch. Vorhandene Imports beibehalten und die unterstützte DTCG-Version prüfen.