Farbsystem-Werkbank
Eine Markenfarbe rein — komplette Tonwertskala, Kontrastmatrix und fertiger Export raus.
Der Rest des Systems wird daraus berechnet.
Grün besteht WCAG AA für normalen Text (4,5:1), gelb nur für großen Text (3:1), rot fällt durch.
Alles läuft in deinem Browser. Deine Daten verlassen dieses Gerät nicht.
So funktioniert es
- Markenfarbe eingeben oder mit dem Farbwähler bestimmen.
- Abstufung wählen — wahrnehmungsgleich, kräftig oder gedeckt.
- In der Kontrastmatrix ablesen, welche Paare WCAG bestehen.
- Passendes Exportformat wählen und ins Projekt kopieren.
Aus einer einzelnen Markenfarbe entsteht hier ein vollständiges System: elf Abstufungen, jede Kombination auf Lesbarkeit geprüft, fertig zum Kopieren in dein Projekt.
Warum OKLCH statt HSL
HSL-Skalen mit gleichmäßigen Helligkeitsschritten wirken ungleichmäßig, weil HSL die menschliche Wahrnehmung ignoriert: Gelb bei 50 % Helligkeit erscheint deutlich heller als Blau bei 50 %. Diese Werkbank rechnet in OKLab — einem Farbraum, in dem gleiche Zahlenabstände auch gleich große wahrgenommene Unterschiede bedeuten.
Die Kontrastmatrix
Statt einzelne Paare durchzuprobieren, zeigt die Matrix alle Kombinationen auf einmal. So ist sofort erkennbar, welcher Ton auf welchem Hintergrund lesbar bleibt — und wo die Grenze verläuft.
Häufige Fragen
Wie lese ich die Kontrastmatrix?
Die Zeile ist die Textfarbe, die Spalte der Hintergrund. Die Zahl ist das Kontrastverhältnis. Der Punkt oben rechts bewertet: grün besteht WCAG AA für normalen Text (ab 4,5:1), gelb reicht nur für großen Text (ab 3:1), rot fällt durch.
Warum wird meine Farbe an den Rändern blasser?
Weil sehr helle und sehr dunkle Töne bei voller Sättigung schnell künstlich wirken und teilweise außerhalb des darstellbaren Bereichs liegen. Die Werkbank reduziert die Sättigung zu den Enden hin — im Modus „Kräftig" lässt sich das abschalten.
Welches Exportformat brauche ich?
CSS-Variablen funktionieren überall. Tailwind fügst du in die Konfiguration ein. SCSS ist für ältere Build-Setups. JSON-Tokens folgen dem Design-Token-Format und lassen sich in Figma oder Style Dictionary einlesen.
Ist die 500er-Stufe meine Originalfarbe?
Nicht exakt. Die Skala hat feste Zielhelligkeiten, damit alle erzeugten Systeme untereinander vergleichbar bleiben. Deine Ausgangsfarbe bestimmt Farbton und Sättigung — die Helligkeit wird auf das Raster gelegt. Meist liegt sie zwischen 500 und 600.
Passende Tools
Alle ToolsWeblabs übernimmt Entwicklung, SEO und Shop-Optimierung — für alles, was über ein Werkzeug hinausgeht.