Color Token Studio

Farbskalen

Aus jeder Basisfarbe wird automatisch eine Skala von 50 bis 900 generiert. Stufe 500 entspricht immer exakt der eingegebenen Farbe. Die Abstufungen werden im OKLCH-Farbraum berechnet – einem modernen, perzetpuell linearen Farbraum, der gleichmäßigere und gesättigtere Skalen erzeugt als das ältere HSL-Verfahren.

50 – 200

Hintergründe, Surfaces, Hover-Fills

300 – 500

Icons, Borders, dekorative Elemente

600 – 700

Buttons, aktive Zustände, Links

800 – 900

Text auf hellem Hintergrund

Klick auf einen Swatch oder den Hex-Wert kopiert die Farbe in die Zwischenablage.

WCAG-Kontraste

Alle Farbkombinationen innerhalb einer Familie werden auf ihr Kontrastverhältnis nach WCAG 2.x geprüft. Der Accessibility Score bewertet, wie viele der typischen UI-Paare den AA-Standard erfüllen.

AAA  ≥ 7:1

Höchster Standard – für barrierefreie oder behördliche Anforderungen

AA  ≥ 4,5:1

Pflicht für normalen Text – Button-Labels, Fließtext, Input-Werte

AA Large  ≥ 3:1

Nur für großen Text ab 24 px (normal) oder 19 px (fett)

Fail  < 3:1

Nicht verwendbar – weder für Text noch für UI-Elemente

Umrahmte Zellen in der Matrix zeigen empfohlene Kombinationen im UI-Alltag. Die Diagonale steht für gleiche Farbe auf sich selbst – immer unlesbar.

Design Tokens

Die berechneten Farben lassen sich in drei Formaten exportieren:

CSS

Custom Properties, direkt in Stylesheets nutzbar – z. B. color: var(--color-primary-700)

JSON

Für Design-Token-Tools wie Style Dictionary, Theo oder das Figma Tokens Plugin

Figma

Im Token-Studio-Format – direkt in Figma importierbar

Namenskonvention: --color-{familie}-{stufe} – z. B. ist --color-primary-500 immer exakt die eingegebene Primärfarbe.

UI-Vorschau

Sechs Layouts in je Light und Dark Mode zeigen, wie das Farbsystem in realen Interfaces wirkt: Button-Showcase, Komponenten, Dashboard, Formular, Benachrichtigungen und Typografie. Die Vorschau aktualisiert sich sofort bei jeder Farbänderung und nutzt ausschließlich Töne aus den berechneten Skalen – keine Farben außerhalb des Systems.

Inspiration

Aus jeder Seedfarbe werden sechs Palettentypen im OKLCH-Farbraum abgeleitet. Das mittlere Tile jeder Palette entspricht immer exakt der Seedfarbe. Der Stufen-Slider steuert, wie viele Farben pro Seite gezeigt werden (±3 bis ±12).

Monochrom

Nur Helligkeit (L) variiert – reine Helligkeitsstufen bei gleichem Farbton

Tonal

L und Chroma (C) variieren gemeinsam – weich und harmonisch wie Material 3

Wärmer / Kälter

Hue (H) verschiebt sich in 30°-Schritten – zeigt die Temperaturachse der Farbe

Analog

Hue in kleinen 12°-Schritten – Farbverwandtschaft im direkten Umfeld

Gesättigt → Gedämpft

Nur Chroma variiert – Intensität ohne Farbtonwechsel, von übersättigt bis grau

Komplementär

H + 180° – Kontrastvorschlag als vollständige Tonal-Skala der Gegenfarbe

Teilen

Der „Link"-Button in der Toolbar erzeugt eine URL mit den aktuellen Basisfarben als Parameter. Der Link öffnet das Tool direkt mit denselben Farben – ohne Account, ohne Speicherung, ohne Server.