Color Token Generator

Warum jedes Designsystem eine Farbskala benötigt

Eine Farbskala ist das Rückgrat einer konsistenten visuellen Sprache. Ohne sie treffen Designer und Entwickler Ad-hoc-Entscheidungen — 'ein etwas dunkleres Blau für den Hover-Zustand' oder 'eine sehr helle Version für den Kartenhintergrund' — die Dutzende von nahezu identischen Hex-Werten ohne systematische Beziehung produzieren. Mit der Zeit entsteht ein Code voller einmaliger Farbwerte, die unmöglich auf einmal aktualisiert werden können.

Eine gut konstruierte 11-stufige Skala löst dieses Problem: Helle Stufen (50–200) dienen für getönte Oberflächen und Hintergründe, mittlere Stufen (300–600) tragen interaktive Elemente wie Schaltflächen, Links und Fokusringe, und dunkle Stufen (700–950) verwalten Text und hochkontrastige Rahmen. Jede Entscheidung geht auf die Skala zurück, und das Ändern der Markenfarbe bedeutet die Aktualisierung eines Basiswerts anstatt das Durchsuchen von Hunderten von Hex-Codes in einem Stylesheet.

Die Tailwind-Farbskalen-Konvention

Tailwind CSS popularisierte die 11-stufige numerische Namenskonvention — 50, 100, 200 bis 900, 950 — und wurde seitdem als Standard von Radix UI, shadcn/ui, Material Design 3 und den meisten modernen Komponentenbibliothek-Ökosystemen übernommen. Der Vorteil ist die Vorhersehbarkeit: Ein Entwickler, der eines dieser Systeme verwendet hat, weiß sofort, dass ein 500er-Token die mittlere Basisfarbe ist, ein 100er-Token ein sehr heller Farbton ist und ein 800er-Token ein dunkler Ton für die Verwendung auf hellen Hintergründen ist.

Dieses Tool generiert Skalen, die visuell mit den integrierten Tailwind-Paletten (Blau, Rot, Grün usw.) kompatibel sind, was es einfach macht, eine benutzerdefinierte Markenfarbe hinzuzufügen, die sich natürlich neben den Tailwind-Standardwerten einfügt. Das Tailwind-Exportformat entspricht genau dem, was theme.extend.colors in tailwind.config.js erwartet, und der CSS-Variablen-Export ist für den @theme-Block von Tailwind v4 formatiert.

WCAG-Kontrastverhältnisse verstehen

Das Kontrastverhältnis zwischen einer Textfarbe und ihrem Hintergrund wird aus ihrer relativen Leuchtdichte berechnet — ein Maß dafür, wie hell jede Farbe dem menschlichen Auge erscheint. Die WCAG-Formel lautet (L1 + 0.05) / (L2 + 0.05), wobei L1 die Leuchtdichte der helleren Farbe und L2 die der dunkleren ist. Das Ergebnis reicht von 1:1 (identische Farben, kein Kontrast) bis 21:1 (schwarzer Text auf weißem Hintergrund, maximaler Kontrast).

WCAG AA erfordert 4.5:1 für normalen Text und 3:1 für großen Text (18pt+). WCAG AAA erfordert 7:1 für normalen Text. In diesem Tool werden die Kontrastverhältnisse von weißem und schwarzem Text für jedes Farbfeld berechnet und als W✓- und B✓-Badges angezeigt. Mittlere Skalenstufen (400–600) scheitern in der Regel an beiden Schwellenwerten — sie sind für dekorative Füllungen und interaktive Akzente gedacht, nicht für Texthintergründe.

Farbraäume: HSL, OKLCH und warum es wichtig ist

Traditionelle Palettengeneratoren arbeiten in HSL — Farbton, Sättigung, Helligkeit. HSL ist intuitiv und gut unterstützt, aber wahrnehmungsmäßig nicht einheitlich: Derselbe numerische Helligkeitsschritt sieht je nach Farbton dramatisch unterschiedlich aus. Ein Schritt von 50% auf 60% Helligkeit wirkt für Blau wie ein großer Sprung, für Gelb aber wie ein kleiner Schritt, weil das menschliche Auge Farben unterschiedlich über das Spektrum hinweg wahrnimmt.

OKLCH ist ein wahrnehmungsmäßig einheitlicher Farbraum, in dem gleiche numerische Helligkeitsschritte dem menschlichen Auge unabhängig vom Farbton gleich erscheinen. Tailwind CSS v4 wechselte aus diesem Grund intern zu OKLCH. Für einen Palettengenerator produziert OKLCH Skalen, bei denen jede Stufe wirklich wie ein gleichmäßiger Schritt in Richtung heller oder dunkler aussieht — besonders wertvoll für barrierefreies Palettendesign.

Export nach CSS, Tailwind, SCSS, JSON und DTCG

Der CSS-Variablen-Export verwendet das Benennungsmuster --color-N innerhalb von :root { }. Der Tailwind-Export wird direkt in theme.extend.colors in tailwind.config.js eingefügt — benennen Sie 'color' in Ihren Token-Namen um (z.B. 'primary' oder 'brand'). Der SCSS-Export verwendet die $color-N-Variablensyntax, die mit Sass und Less kompatibel ist. Der JSON-Export folgt dem W3C-DTCG-Token-Format und ist mit Style Dictionary, Theo, Supernova und jedem Tool im modernen Token-Pipeline-Ökosystem kompatibel.

Alle vier Formate geben dieselben 11 Hex-Werte aus, sodass nach der Generierung kein Wechsel zwischen ihnen erforderlich ist. Klicken Sie auf ein einzelnes Farbfeld, um dessen Hex-Wert direkt in die Zwischenablage zu kopieren — nützlich, wenn Sie einen bestimmten Farbton für eine Figma-Designdatei, einen einmaligen Inline-Stil oder eine schnelle Farbreferenz benötigen.

Vergleich mit Coolors, Adobe Color und Material Design Color Tool

Coolors.co ist ein Palettenentdeckungstool, das darauf ausgelegt ist, zufällige 5-Farben-Kombinationen zu generieren. Es ist hervorragend für Inspiration, produziert jedoch keine Token-Skalen, generiert keine Tailwind-Konfigurationen und zeigt keine WCAG-Kontrast-Badges pro Farbfeld an.

Adobe Color bietet Farbharmonie-Generierung aus einem Farbrad und einige Exportoptionen, erfordert jedoch ein Adobe-Konto zum Speichern und Exportieren von Paletten. Es generiert keine Tailwind-kompatible Farbskala oder DTCG-JSON.

Googles Material Design Color Tool produziert eine 10-stufige Skala (ohne die 50er-Stufe) und ist speziell für das Material-Design-Theming konzipiert — das Ergebnis lässt sich nicht sauber auf Tailwind oder andere Ökosysteme abbilden.

Dieses Tool generiert eine vollständige 11-stufige Skala, zeigt WCAG-W✓/B✓-Badges auf jedem Farbfeld, exportiert in vier Formate und erfordert keine Anmeldung. Alles läuft in Ihrem Browser — keine Farbdaten werden auf einen Server hochgeladen.