Design-System-Farbtokens
Erzeuge einen vollständigen Satz Design-System-Farbtokens aus 7 Grundfarben — Primär, Sekundär, Akzent, Erfolg, Warnung, Fehler und Info. Jede Farbe erhält 9 automatisch abgeleitete Varianten (base, light, dark, hover, active, bg, border, text und muted) für hellen und dunklen Modus. Export als CSS-eigene Properties oder JSON. Die gesamte Verarbeitung läuft in deinem Browser — kostenlos, ohne Anmeldung.
Generate a complete set of design system colour tokens from 7 base colours. Get light and dark mode variants with CSS variables and JSON export - perfect for design systems, component libraries, and theme files.
Main brand colour used for primary actions, active states, and key UI elements
Supporting brand colour for secondary actions and complementary elements
Highlight colour for emphasis, badges, and call-to-action elements
Positive feedback - confirmations, success messages, and valid states
Cautionary feedback - warnings, low-priority alerts, and pending states
Negative feedback - errors, destructive actions, and invalid states
Informational feedback - tooltips, helper text, and neutral notifications
Primary
Secondary
Accent
Success
Warning
Error
Info
:root {
/* Light mode colour tokens */
--color-primary-base: #3b82f6;
--color-primary-light: #e2ecfe;
--color-primary-dark: #0f213e;
--color-primary-hover: #326fd1;
--color-primary-active: #295bac;
--color-primary-bg: #f5f9ff;
--color-primary-border: #9dc1fb;
--color-primary-text: #000000;
--color-primary-muted: #336ecc;
--color-secondary-base: #8b5cf6;
--color-secondary-light: #eee7fe;
--color-secondary-dark: #23173e;
--color-secondary-hover: #764ed1;
--color-secondary-active: #6140ac;
--color-secondary-bg: #f9f7ff;
--color-secondary-border: #c5aefb;
--color-secondary-text: #000000;
--color-secondary-muted: #6133cc;
--color-accent-base: #f59e0b;
--color-accent-light: #fef0da;
--color-accent-dark: #3d2803;
--color-accent-hover: #d08609;
--color-accent-active: #ac6f08;
--color-accent-bg: #fffaf3;
--color-accent-border: #facf85;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #10b981;
--color-success-light: #dbf5ec;
--color-success-dark: #042e20;
--color-success-hover: #0e9d6e;
--color-success-active: #0b825a;
--color-success-bg: #f3fcf9;
--color-success-border: #88dcc0;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f97316;
--color-warning-light: #feeadc;
--color-warning-dark: #3e1d06;
--color-warning-hover: #d46213;
--color-warning-active: #ae510f;
--color-warning-bg: #fff8f3;
--color-warning-border: #fcb98b;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #ef4444;
--color-error-light: #fde3e3;
--color-error-dark: #3c1111;
--color-error-hover: #cb3a3a;
--color-error-active: #a73030;
--color-error-bg: #fef6f6;
--color-error-border: #f7a2a2;
--color-error-text: #000000;
--color-error-muted: #cc3333;
--color-info-base: #06b6d4;
--color-info-light: #daf4f9;
--color-info-dark: #022e35;
--color-info-hover: #059bb4;
--color-info-active: #047f94;
--color-info-bg: #f3fbfd;
--color-info-border: #83dbea;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
/* Dark mode colour tokens */
--color-mode: light;
}
[data-theme="dark"], .dark {
--color-primary-base: #0b3d8e;
--color-primary-light: #dae2ee;
--color-primary-dark: #030f24;
--color-primary-hover: #093479;
--color-primary-active: #082b63;
--color-primary-bg: #f3f5f9;
--color-primary-border: #859ec7;
--color-primary-text: #ffffff;
--color-primary-muted: #336ecc;
--color-secondary-base: #3d0eaa;
--color-secondary-light: #e2dbf2;
--color-secondary-dark: #0f042b;
--color-secondary-hover: #340c91;
--color-secondary-active: #2b0a77;
--color-secondary-bg: #f5f3fb;
--color-secondary-border: #9e87d5;
--color-secondary-text: #ffffff;
--color-secondary-muted: #6133cc;
--color-accent-base: #f5c470;
--color-accent-light: #fef6ea;
--color-accent-dark: #3d311c;
--color-accent-hover: #d0a75f;
--color-accent-active: #ac894e;
--color-accent-bg: #fffcf8;
--color-accent-border: #fae2b8;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #d1faec;
--color-success-light: #f8fefc;
--color-success-dark: #343f3b;
--color-success-hover: #b2d5c9;
--color-success-active: #92afa5;
--color-success-bg: #fdfffe;
--color-success-border: #e8fdf6;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f8b07c;
--color-warning-light: #fef3eb;
--color-warning-dark: #3e2c1f;
--color-warning-hover: #d39669;
--color-warning-active: #ae7b57;
--color-warning-bg: #fffbf8;
--color-warning-border: #fcd8be;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #891010;
--color-error-light: #eddbdb;
--color-error-dark: #220404;
--color-error-hover: #740e0e;
--color-error-active: #600b0b;
--color-error-bg: #f9f3f3;
--color-error-border: #c48888;
--color-error-text: #ffffff;
--color-error-muted: #cc3333;
--color-info-base: #4ddbf5;
--color-info-light: #e4fafe;
--color-info-dark: #13373d;
--color-info-hover: #41bad0;
--color-info-active: #3699ac;
--color-info-bg: #f6fdff;
--color-info-border: #a6edfa;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
--color-mode: dark;
}Vollständige Token-Erzeugung
Erzeuge produktionsreife Design-Tokens allein aus deinen Grundfarben.
- 7 semantische Kategorien: Primär, Sekundär, Akzent, Erfolg, Warnung, Fehler und Info — jede mit einem vollständigen Satz abgeleiteter Varianten inklusive base, light, dark, hover, active, bg, border, text und muted.
- Heller & dunkler Modus: Jeder Farb-Token wird automatisch für den dunklen Modus angepasst, mit einer perzeptiven Helligkeitsinversion, die Lesbarkeit und visuelle Hierarchie in dunklen Themen bewahrt.
- Intelligente Varianten: Hover-, Active-, BG-, Border- und Text-auf-Farbe-Varianten werden automatisch über luminanzbewusstes Mischen erzeugt — kein manuelles Nachjustieren für WCAG-konformen Kontrast.
- CSS- + JSON-Export: Kopiere einsatzbereite CSS-eigene Properties für :root- und [data-theme="dark"]-Selektoren oder exportiere eine vollständige JSON-Token-Datei zur Integration in Designtools und Build-Pipelines.
Häufige Anwendungsfälle
Vom Designsystem bis zum Dark Mode — Farb-Tokens sorgen für konsistente Oberflächen.
- Designsystem-Entwicklung: Erzeuge konsistente Farb-Tokens für deine Komponentenbibliothek oder dein Designsystem. Nutze die exportierten CSS-Variablen in allen Komponenten als einzige Quelle der Wahrheit.
- Design-Übergabe: Wandle Figma- oder Sketch-Design-Tokens in entwicklerfertige CSS-Variablen und JSON-Dateien um. Eliminiere manuelle Farbzuordnungsfehler zwischen Design und Entwicklung.
- Theming & White-Labeling: Erstelle mehrere Token-Sätze für verschiedene Marken oder Themen. Jeder Satz erhält automatisch konsistente helle/dunkle Varianten — perfekt für Multi-Tenant-SaaS-Produkte.
- Dark-Mode-Implementierung: Hör auf, Dunkelmodus-Farben zu raten. Gib deine helle Palette einmal ein und erhalte sofort WCAG-konforme Dunkelmodus-Tokens ohne Berechnungen zur Laufzeit.
- Framework-Migration: Beim Wechsel zwischen CSS-Frameworks oder dem nachträglichen Einfügen eines Designsystems erzeugst du konsistente Farb-Tokens, die mit Tailwind, Vanilla-CSS oder CSS-in-JS funktionieren.
- E-Commerce- und Marketingseiten: Wahre Markenkonsistenz über Landingpages, Produktkataloge und Checkout-Abläufe hinweg mit einem einzigen Satz semantischer Farb-Tokens, der auf allen Seiten geteilt wird.
Über Design-System-Farbtokens
Verstehe, wie Farb-Tokens funktionieren und wie du sie in deinen Projekten einsetzt.
- Was sind Design-System-Farbtokens?: Farb-Tokens sind semantische Variablennamen, die hartkodierte Farbwerte in aussagekräftige, wiederverwendbare Bezeichner abstrahieren. Statt Hex-Codes direkt zu verwenden — schwer zu pflegen und unmöglich zu thematisieren — nutzt du Namen wie --color-primary-base oder --color-error-hover. Das ermöglicht konsistentes Styling über Komponenten hinweg und sofortiges Theme-Umschalten.
- Wie helle Modus-Tokens erzeugt werden: Für jede Grundfarbe leiten wir 9 Token-Varianten ab: base (das Original), light (85 % Weiß-Anteil), dark (75 % Schwarz-Anteil), hover (15 % dunkler), active (30 % dunkler), bg (95 % Weiß-Anteil), border (50 % Weiß-Anteil), text (schwarz oder weiß für Kontrast) und muted (reduzierte Sättigung). Die Text-Variante nutzt WCAG-Luminanz für lesbaren Kontrast zur Grundfarbe.
- Wie dunkle Modus-Tokens angepasst werden: Dunkle Modus-Tokens verwenden einen perzeptiven Helligkeitsinversionsalgorithmus. Helle Grundfarben werden zum dunklen Ende des Spektrums verschoben, während Ton- und Sättigungsbeziehungen erhalten bleiben. Das Ergebnis wahrt die visuelle Hierarchie der Originalpalette und ist auf dunklem Hintergrund angenehm zu betrachten.
- Verwendung der exportierten Tokens: Die CSS-Ausgabe enthält :root- und [data-theme="dark"]-Blöcke mit allen Token-Variablen, bereit zum Einfügen in dein Projekt. Die JSON-Ausgabe nutzt ein flaches Schlüssel-Wert-Format, kompatibel mit Design-Token-Spezifikationsmustern. Ziehe sie per Drag-and-drop in dein Designtool oder importiere sie über ein Build-Skript für einen vollautomatisierten Workflow.
Häufig gestellte Fragen
Farb-Tokens sind semantische Variablen, die Farben in einem Designsystem repräsentieren. Statt überall rohe Hex-Codes zu verwenden, nutzt du Namen wie --color-primary oder --color-error-bg. Das macht es trivial, Farben global zu aktualisieren, den Dark Mode zu implementieren und Konsistenz über Komponenten hinweg zu wahren. Unser kostenloser Online-Generator erzeugt einen vollständigen Token-Satz aus 7 Grundfarben.
Jede Grundfarbe erzeugt 9 Varianten: base (die Originalfarbe), light (mit Weiß gemischt), dark (mit Schwarz gemischt), hover (etwas dunkler), active (dunkler für gedrückte Zustände), bg (sehr hell für Hintergründe), border (entsättigt für Rahmen), text (schwarz oder weiß für lesbaren Kontrast) und muted (reduzierte Sättigung). Sowohl helle als auch dunkle Modus-Varianten werden erzeugt.
Die Dunkelmodus-Anpassung nutzt einen perzeptiven Inversionsalgorithmus, der Helligkeitswerte des hellen Modus über eine Kurve auf dunkle Entsprechungen abbildet und dabei relative Kontrastbeziehungen bewahrt. Die Sättigung wird im dunklen Modus leicht reduziert, da stark gesättigte Farben auf dunklen Hintergründen unbequem zu lesen sein können.
Ja. Die Text-Variante jedes Tokens nutzt WCAG-Luminanzberechnungen, um automatisch zwischen schwarzem und weißem Text zu wählen, und gewährleistet ein Kontrastverhältnis von mindestens 7:1 zur Grundfarbe. Das erfüllt die WCAG-AAA-Anforderungen für normalen Text — ohne manuelles Nachjustieren.
Zwei Formate: CSS-eigene Properties (mit separaten :root- und [data-theme="dark"]-Blöcken, bereit zum Einfügen in dein Projekt) und JSON (flaches Schlüssel-Wert-Format, kompatibel mit Design-Token-Spezifikationsmustern und Tools wie Style Dictionary).
Die Token-Namen folgen dem konsistenten Muster --color-{Kategorie}-{Variante}. Du kannst sie nach dem Kopieren per einfacher Suche-und-Ersetzen umbenennen — oder die CSS/JSON-Ausgabe direkt in deinem Code anpassen.
Ja, dieser Design-System-Farbtokens-Generator ist 100 % kostenlos, ohne Anmeldung, ohne Premium-Stufe und ohne Nutzungsbeschränkungen. Die gesamte Verarbeitung läuft in deinem Browser.
Die 7 Kategorien (Primär, Sekundär, Akzent, Erfolg, Warnung, Fehler, Info) decken die meisten Designsystem-Bedarfe ab. Brauchst du zusätzliche Kategorien wie surface, background, text oder border auf der obersten Ebene, kannst du das Tool mehrmals mit verschiedenen Grundfarben ausführen und die Ausgaben kombinieren.