Direkte Antwort
Ein Farbsystem-Builder wandelt unveränderliche Marken-Quellfarben im lokalen Browser in primitive 50–950-Farbskalen und editierbare helle sowie dunkle Semantikrollen um – ohne Server-Upload.
So verwenden Sie dieses Tool
Quellfarben eingeben
Fügen Sie HEX-, oklch()- oder color(display-p3 …)-Werte ein und weisen Sie jede Farbe einer Familie (Primary, Neutral etc.) mit Ankerstufe 400/500/600 zu.
Projekt erstellen
Generieren Sie die erforderlichen Primary-, Neutral- und Status-Skalen sowie Standard-Mappings für Hell-/Dunkelmodus ohne gesperrte Anker zu verändern.
Anpassen & Vorschau
Justieren Sie Skalenstufen oder semantische Zuweisungen und prüfen Sie Buttons, Cards, Formulare und Status-Vorschauen im Hell- und Dunkelmodus.
Unveränderliche Anker und semantische Schichten
Markenfarben bleiben als exakte Anker auf der gewählten Skalenstufe verankert. Primitive Skalen umfassen Stufen von 50 bis 950 je Farbfamilie. Semantische Rollen (Hintergrund, Oberfläche, Text, Primärfarbe, Kontrasttext, Rahmen, Fokus) referenzieren Primitiven separat für helle und dunkle Themes, wodurch Implementierungsbedeutung von reinen Farbfeldern getrennt bleibt.
- Nicht aufgelöste var()-, relative Farb- oder color-mix()-Eingaben werden mit konkreten Fehlermeldungen abgewiesen.
- Primary- und Neutral-Skalen sind obligatorisch; Sekundär- und Akzentskalen optional; Erfolgs-, Warn- und Fehlerrollen sind stets vorhanden.
- Sämtliches Parsen und Generieren läuft clientseitig mit lokaler Autospeicherung – ohne Accounts oder Uploads.
Praktische Beispiele
Markenblau-Primärsystem
Eingabe: Quelle: #2563eb als Primary @ 500
Ausgabe: Primary 50–950-Skala + Hell/Dunkel-Rollen (primary, on-primary, focus) bereit für den Prüfer
Erstellt ein vollständiges Handoff-Dokument aus einer einzigen Markenfarbe ohne überflüssige Konverterseiten.
Einschränkungen
- Erzeugt keine Werte für unaufgelöste CSS-Variablen oder color-mix(); verwenden Sie stattdessen konkrete Color-4-Werte.
- Ästhetische Skalenempfehlungen sind heuristische Richtwerte, keine Konformitätszertifikate.
Häufige Fragen
Kann ich ohne Export direkt zum Prüfer wechseln?
Ja. Das geteilte Tool-Island nutzt dasselbe Farbsystem-Dokument im Speicher, sodass Sie ohne Neuladen oder Navigation zwischen den Stufen wechseln.
Werden meine Markenfarben auf Server übertragen?
Nein. Farben, Skalen und Projektdateien verbleiben im Browser-Speicher und LocalStorage. Es erfolgt keine Übertragung an Rechenserver.
Wie funktioniert die Tastaturnavigation zwischen den Stufen?
Nutzen Sie die Stufen-Tabs zum Wechseln zwischen Builder, Prüfer und Token-Generator. Der Fokus bleibt sichtbar und die kanonische URL ändert sich nicht.
Maßgebliche Referenzen & Standards
- W3C CSS Color Module Level 4 ↗ — Autoritative Syntax für HEX, rgb(), hsl(), oklch() und color(display-p3 …).
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — Barrierefreiheits-Referenz für die Vorschau kontrastrelevanter Semantikrollen im Builder.