Website-Farbschema — semantische CSS-Tokens
Erzeugen Sie ein Website-Farbschema im Browser. Wählen Sie ein Marken-HEX (Beispiel-Teal #0F6E8C), erhalten Sie gemeinsame Neutrals, action/hover/soft/focus, neutrale Links, feste Statusfarben, Chrome-Preview und AA-Selbstchecks; danach :root-CSS oder JSON kopieren. Regelbasiert — keine Cloud-KI; nichts wird hochgeladen.
Gemeinsame Neutrals und Statusfarben; jedes Theme überschreibt nur markenabgeleitete Tokens. Max. 4 Themes.
| Token | Wert |
|---|
| Token | Wert | Rolle |
|---|
So funktioniert’s
Geben Sie bis zu vier Marken-Themes an (ID + HEX). Das Tool hält eine gemeinsame Neutral-Leiter, leitet Action-Tokens aus jeder Marke ab, mappt semantische Rollen (inkl. neutrale Links und feste Statusfarben), malt ein helles Chrome, führt AA-Selbstchecks aus und lässt CSS-Variablen oder JSON kopieren — alles lokal.
Erwartbare Regeln
Token-Schichten, Link ≠ Action, unabhängige Statusfarben, Kontrast-Hinweise und Datenschutz.
- Primitives halten rohe Neutrals und Markenableitungen. Semantik benennt den Zweck (bg, surface, link, action…). Komponenten sollten nur Semantik referenzieren.
- Marke → --action; Hover verdunkelt ~22 %; Soft ≈ 10 % Alpha; Focus-Ring ≈ 40 % Alpha; --bg ist ein leicht getöntes Neutral.
- Links mappen auf text / text-strong (neutral). Standard --link nicht an --action binden.
- Danger / Success / Warning / Info bleiben themenübergreifend fest, damit die Marke nie die Fehler-Semantik ersetzt.
- Datenschutz: Erzeugung, Preview und Zwischenablage laufen in diesem Tab. Markenfarben werden nicht hochgeladen.
Beispiel
Beispiel laden (Theme-ID teal, #0F6E8C). Preview zeigt weiße Fläche, weiches teal-Highlight am aktiven Sidebar-Eintrag (ohne linken Balken), neutrale Text-Links und eine rote Danger-Zeile. Semantik mappt --link auf Textfarbe (nicht --action). CSS-Kopie liefert :root-Neutrals plus html[data-theme="teal"]-Overrides.
Gut geeignet für
- Tool- oder SaaS-Chrome: lesbare helle Hülle mit Markenakzenten auf Auswahl und Fokus — nicht auf jedem Link.
- Landing-Rebrand: Marken über html[data-theme] tauschen, Neutral-Skelett und Statusfarben behalten.
- Design-zu-Dev-Übergabe: :root-CSS-Variablen einfügen statt HEX-Listen aus Screenshots.
Frequently asked questions
Ist „smart“ dasselbe wie KI-Farbgenerierung?
„Smart“ heißt hier deterministische Regeln: Neutrals bleiben fest, die Marke leitet action/hover/soft/focus ab, Links bleiben neutral, Statusfarben folgen nicht der Marke. Kein Modellaufruf, kein Upload — die Rechnung läuft in diesem Tab.
Warum sind Links nicht in der Markenfarbe?
Standard-Links nutzen Textfarben, damit die Seite keine Marken-Hyperlink-Wand wird. Die Markenfarbe bleibt für Aktionen, Auswahl, Fokusringe und leichte Soft-Füllungen.
Warum ändern sich Statusfarben nicht mit dem Theme?
Danger, Success, Warning und Info bleiben themenübergreifend fest. Eine bernsteinfarbene Marke darf nicht zur Fehlerfarbe werden — sonst wirkt die ganze UI wie ein Alarm.
Wann Markenfarben-Skala erzeugen statt dieser Seite?
Nutzen Sie Markenfarben-Skala erzeugen für eine 50–950-Rampe oder HEX/HSL/OKLCH-Listen. Diese Seite liefert ein vollständiges helles semantisches Schema (bg/surface/link/action/status) zum Einfügen.
Wie vollständig ist der Kontrast-Selbstcheck?
Selbstchecks decken einige Schlüsselpaare des aktiven Themes ab. Für beliebige Vorder-/Hintergrundpaare oder AAA öffnen Sie den WCAG-Kontrastprüfer und fügen Sie ein Token-HEX ein.
Related tools
Fragen oder Feedback
Unklar, kaputt oder etwas fehlt? Schreib unten eine Nachricht — wir lesen jede Notiz zu diesen Tools.