Direkte Antwort
Ein Farb-Token-Generator serialisiert das geprüfte Farbsystem in CSS-Custom-Properties, Tailwind CSS v4 @theme-Blöcke und DTCG-JSON. Vorschau und Exporte verwenden dieselbe Dokumentenrevision.
So verwenden Sie dieses Tool
Token-Stufe erreichen
Öffnen Sie den Token-Generator oder fahren Sie aus dem Prüfer mit demselben lokalen Farbsystem fort.
Format auswählen
Wählen Sie CSS-Variablen, Tailwind v4 @theme oder DTCG-JSON. Jeder Export spiegelt die geprüften Primitiven und semantischen Aliase wider.
Kopieren oder Herunterladen
Kopieren Sie den Code in die Zwischenablage oder laden Sie die Datei herunter. CSS- und Tailwind-Ausgaben enthalten zusätzliche sRGB-Farbwerte; DTCG-JSON bewahrt moderne Farbwerte und Aliase.
Zuverlässige Projektion und Formatübereinstimmung
Exportierte Tokens bilden die Primitivenskalen, semantischen Aliase und Themes des geprüften Systems ab. CSS- und Tailwind-Ausgaben enthalten sRGB-Farbwerte vor den modernen Farbdeklarationen. Prüfen Sie deren Verwendung und Browser-Kompatibilität im Zielprojekt; zusätzliche sRGB-Werte allein garantieren keine fehlerfreie Darstellung in älteren Browsern. DTCG-JSON bewahrt moderne Farbwerte und Aliase, enthält aber nicht für jede Farbe einen sRGB-Fallback.
- CSS-, Tailwind- und DTCG-Exporte bleiben mit derselben Dokumentenrevision synchron.
- Kein Server-Token-Speicher und kein Benutzerkonto erforderlich.
- Bei eingeschränkten Browser-APIs bleiben die Artefakte in der Vorschau zum manuellen Kopieren verfügbar.
Praktische Beispiele
Export der Primary-Skala als Tailwind @theme
Eingabe: Geprüfte Primary 50–950-Skala + semantische Rollen primary/on-primary
Ausgabe: @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }
Erzeugt sofort einsetzbare Theme-Variablen ohne manuelle Übertragungsfehler.
Einschränkungen
- Überträgt Tokens nicht automatisch an Cloud-Designtools; kopieren oder laden Sie Dateien lokal herunter.
- DTCG-Aliase müssen bei herstellerspezifischen Dialekten in der eigenen Toolchain gemappt werden.
Häufige Fragen
Entsprechen die Exporte den geprüften Werten?
Die Artefakte stammen aus derselben Dokumentenrevision wie die Vorschau. Die Darstellung im Zielprojekt hängt zusätzlich vom Farbformat, dem Gamut-Mapping und der Browser-Unterstützung ab.
Werden die Tokens irgendwohin hochgeladen?
Nein. Serialisierung, Zwischenablage und Downloads erfolgen rein lokal auf Ihrem Gerät.
Kann ich ohne Verlust zurück zum Builder wechseln?
Ja. Beim Stufenwechsel bleibt das Dokument erhalten; erneuter Export nutzt die aktualisierte Version.
Maßgebliche Referenzen & Standards
- W3C CSS Color Module Level 4 ↗ — Moderne Farbfunktionen, serialisiert in CSS-Custom-Properties mit sRGB-Fallbacks.
- W3C Relative Luminance Definition & Formula ↗ — Leuchtdichte-Referenz zur Dokumentation barrierefreier Token-Paare in exportierten Artefakten.