Zum Hauptinhalt springen
Version: 2.1.1
Figma

Farbe

Systematik für Farben in KERN kennenlernen und nutzen​

Farben in Design-Systemen dienen nicht nur der ästhetischen Gestaltung, sondern erfüllen auch eine Funktion, indem sie konsistente visuelle Hierarchien und Nutzer:innen-Interaktionen ermöglichen.

Generische Farben​

KERN bietet die in der Tabelle dargestellten generischen Farben. Diese werden im Design nicht direkt verwendet. Dafür stehen semantischen Farben zur Verfügung, die auf die generischen Werte verweisen. Die generischen Farben sind im OKLCH-Farbraum auf menschliche Wahrnehmung und Kontrastverhältnisse optimiert. KERN orientiert sich an der „Universal Color Palette“ von Kevin Muldoon, um barrierefreie Kontraste für KERN UI-Elemente zu gewährleisten. Die Lösung wurde leicht angepasst, die zugrunde liegenden Prinzipien bleiben jedoch erhalten: KERN verwendet nicht CIELCH, sondern OKLCH als Farbraum. Dadurch variiert der Farbkontrast leicht (z. B. 4.51, 4.57). Diese Abweichungen sind jedoch minimal und beeinflussen die WCAG-Konformität nicht – der Zielwert von mindestens 4.5:1 bei der Farbstufe 500 wird eingehalten.

Die Farben sind nach Helligkeit sortiert. Die Stufe 500 markiert dabei die Kontrastmitte zwischen Weiß und Schwarz. Die 500 kann also sowohl im Light-Modus als auch im Dark-Modus verwendet werden. Durch Spiegelung lässt sich der jeweilige Mode leicht ermitteln: 800 im Light-Modus wird zu 200 im Dark-Modus und umgekehrt. In dieser barrierefreien Farb-Systematik können Farben einer Helligkeitsstufe beliebig getauscht werden.Die kleinen Zahlen innerhalb der Farben zeigen den Farbkontrast zu Weiß. Die Farbtabelle wurde in der Web-Anwendung Leonardo erstellt. Auch charmant an dem Farbraum: Die Farbe lässt sich leichter manipulieren als ein RGB oder Hex-Wert, weil klarer ist, was die einzelnen Wertanpassungen eigentlichen bewirken. Das LCH in OKLCH schlüsselt sich wie folgt auf:

  • L:Lightness
  • C:Chroma
  • H:Hue)

Übersicht aller KERN Farben.

Die Bedeutung der Gruppen​

  • Seitenhintergründe im Light-Modus
  • Schattierungen im Dark-Modus

Weitere Farben​

Die Farben Weiß und Schwarz sind oben in der Tabelle nicht aufgeführt, finden aber ebenfalls Anwendung in der Semantik.

Visualisierung eines Farb-Token in Schwarz und Weiß.

Barrierefreie Kontraste​

In der Tabelle unten wurden alle Farbwerte entsättigt. Dies verdeutlicht, was die Farbsystematik besonders macht: Die Farben verhalten sich in den Kontrasten weitgehend gleichmäßig. Ein Blau-700 ist genauso kontrastreich wie ein Gelb-700. Damit können die in der Semantik auf barrierefreie Kontrastwerte abgestimmten Farben leicht ausgetauscht werden. Am entsättigten Beispiel der Alert-Komponente (Bild unten), erkennt man, dass alle Varianten (Information, Erfolg, Warnung, Fehler) die gleichen WCAG-Kontrastwerte erfüllen. Das zeigt außerdem, dass man sich nicht allein auf Farbe verlassen sollte, um auf Sachverhalte aufmerksam zu machen. In diesem Fall sollten zusätzliche Hinweise wie z. B. Symbole oder Icons verwendet werden.

Entsättigte Farbtabelle und Alert-Komponenten zur Darstellung gleichwertiger Kontraste unabhängig vom Farbton.

Herleitung des verwendeten Farbraums​

Die Farben der „Universal Color Palette“ basieren nicht auf dem sRGB-Farbraum, sondern wurden im Farbraum CIELAB entwickelt. Dieser Farbraum versucht die menschliche Wahrnehmung von Farbe zu modellieren. Er eignet sich besser, um barrierefreie Farbpaletten zu gestalten, bei der denen sich die Farben kontrastgleich zueinander verhalten. Mehr dazu lässt sich im Artikel von Daryl Koopersmith und Wilson Miner nachlesen: „Designing accessible color systems“.

Die Verwendung der Brand-Color Blau für die Dachmarke stellt eine Herausforderung dar. Bei Blau kommt es im CIELAB-Farbraum zu einer Farbton-Verschiebung. Björn Ottoson präsentiert in seinem Artikel „A perceptual color space for image processing“ eine Alternative zu CIELAB, die das Problem löst: OKLab. Die folgende Grafik stammt aus seinem Artikel und illustriert den Unterschied zwischen den verschiedenen Farbsystemen:

Grafik mit verschiedenen Blau-Gradienten aus unterschiedlichen Farbsysteme (OKLab, CIELAB, CIELUV, OSA-UCS, IPT, JzAzBz, HSV, CAM16-UCS). Die Tabelle zeigt, wie sich die Farbabstufungen in verschiedenen Farbsystemen verhalten und verändern. CIELAB weist eine Farbtonverschiebung Richtung Lila auf. OKLab zeigt einen sauberen Gradienten von Blau zu Hellblau zu Weiß.

Entsprechend wurde die Farbtabelle für KERN im OKLab-Farbraum generiert. Dieser Farbraum verhält sich sehr ähnlich zum CIELAB-Farbraum.

Da sich OKLCH leichter lesen lässt als OKLab verwenden wir OKLCH um , um daraus Farben im OKLab-Farbraum abzuleiten.

Ein weiterer Unterschied zur „Universial Color Palette“ ist die Anzahl der Farben. Wir haben den Farbstamm reduziert und vereinfacht. Die beiden Farben Weiß und Schwarz tauchen nur einmal auf. Sie werden als „000“ und „1000“ bei den „Neutral Colors“ geführt.

Artikel​
Tools​

Semantische Farben​

Semantisch verwendete Farben in KERN​

Für die Semantik kommt KERN aktuell mit einem Bruchteil der durch das Prinzip der „Universal Color Palette“ erzeugten Farben aus:

Übersicht aller KERN Farben.

Die Farben sind in KERN als Token angelegt. Eine Übersicht findest du hier. Die Benennungssystematik der Token folgt dem allgemeinen Prinzip wie unter Design-Token beschrieben. Um die richtige Verwendung der Farben musst du dich nicht kümmern, so lange du mit den vorgefertigten Komponenten arbeitest. Dort sind bereits die zu verwendenden Token eingesetzt. Mit KERN 2 folgen nun weitere semantische Farben, die dich beim Layouten unterstützen. Für Hintergründe gibt es entsprechend eine „Layout/Background/Default“-Farbe und ein „Hue“ für abgrenzende Inhalte (wie beispielsweise Hintergründe).

Token für Layout​

Layout-Token sind die Standard-Token für die Seitengestaltung. Die Gruppe umfasst Hintergründe für große Flächen, Text-, Border- und Divider-Farben.Für Icons gibt es kein eigenes Farb-Token. Sie übernehmen bei KERN standardmäßig die Textfarbe. Eine Ausnahme bildet Feedback, bei dem sich das Icon an der jeweiligen Feedback-Farbe orientiert.

Übersicht der Layout Token.

Token für Form Inputs​

Übersicht der Input Token.

Umgang mit Hintergründen in Form-Inputs​

Interaktive Flächen sollten immer klar als solche erkennbar sein. Daher haben z. B. die Input-Felder eine flächige Färbung. Es gibt jedoch begründete Ausnahmen, die in den jeweiligen Komponenten dokumentiert sind. So kann z. B. ein Input-Feld außerhalb eines Formulars auf einem dunkleren Hintergrund platziert werden. In diesem Fall wird die Hintergrundfarbe des Feldes auf --kern-color-form-inputs-background-inverted gesetzt (siehe Abbildung unten). Eine weitere Ausnahme ist der Tertiary-Button, der im Default-Zustand keine keine Hintergrundfarbe hat, um ihn sich deutlich vom Secondary-Button abzuheben. Auch bei der Tasklist kann sich die interaktive Farbe je nach Hintergrund ändern (siehe Abbildung unten).

Beispielhafte Darstellung, wie sich die Hintergrundfarbe eines Input-Feldes auf dunklem Hintergrund verändert.

Beispiehlafte Darstellung, wie sich die Hintergrundfarbe eines Tasklist-Feldes auf dunklem Hintergrund verändert.

Token für Action​

Übersicht der Action Token.

Token für Action State​

Um separate Farbtoken für die States zu vermeiden (z. B.: --kern-color-action-hover / --kern-color-action-active / ...), werden die States von der Action-Color abgeleitet.

Übersicht der Action State Token.

In der Entwicklung erfolgt das über die Manipulation der Helligkeit (mehr dazu im Abschnitt „Nutzung und Anwendung der OKLCH-Token im Code“).Da in Figma aktuell sowohl der OKLCH Farbraum also auch Variablen-Kalkulation noch nicht ohne Plugin zur Verfügung stehen, wird hier mit Transparenz gearbeitet, um die States von der Action-Farbe abzuleiten.

Übersicht der Action State Token.

In den meisten Fällen kann die Transparenz direkt angewendet werden – beispielsweise Primary-Button und die „action-opacity-disabled“.

Illustration der direkten Nutzung der Action-State-Token

In anderen Fällen behilft sich KERN mit einer eigenen Fläche, die mit der Action-Color (z. B. Secondary-Button) oder mit Weiß, bzw. Schwarz gefüllt wird (z. B. Input-Felder) und als „Action-Indicator” die Transparenz aufnimmt.

Illustration der Nutzung des Action-State-Indicators

Token für Feedback​

Die Feedback-Farben bestehen aus jeweils zwei Tokens: Einem Haupt-Token (benannt nach dem jeweiligen Feedback) und einem Hintergrund-Token. Das Haupt-Token kann für Icon und Border eingesetzt werden. Das Hintergrund-Token ist Hintergründen vorbehalten.

Action State Token Tabelle.

Nutzung und Anwendung der OKLCH-Token im Code​

Wenn L-, C- und H-Werte als einzelne CSS-Variablen definiert und zu OKLCH-Farben zusammengesetzt werden, entstehen zusätzliche Vorteile – besonders für die modulare und systematische Farbsteuerung in Design-Systemen.

So können beispielsweise Farbvariationen und -manipulationen direkt in CSS vorgenommen werden.

Werden die OKLCH-Parameter L, C und H jeweils separat als Variablen definiert:

  • --brand-color-l: 0.65;
  • --brand-color-c: 0.15;
  • --brand-color-h: 250;

lassen sich die Parameter gezielt anpassen, um daraus dynamische Varianten einer Farbe zu erzeugen.

Außerdem lässt sich leichter vorhersehen, welche Wirkung die Manipulation eines bestimmten Wertsverursacht:

  • L: Ändert die Helligkeit
  • C: Die Sättigung
  • H: Den Farbton

So lassen sich leicht Farbpaletten bilden, anpassen oder ergänzen, die sich durchgängig kontrasttechnisch gleichartig verhalten. Dies begründet sich darin, dass OKLCH ein Farbmodell ist, das entwickelt wurde, um Farben auf eine Weise darzustellen, wie Menschen sie einheitlich wahrnehmen.

Im folgenden ein paar Beispiele, wie sich die Auftrennung eines OKLCH-Farbwertes in jeweils einen separaten L-, C-, H-Wert nutzen lässt. Die dadurch gewonnene Flexibilität, Farben anzupassen, ist schwieriger oder unmöglich zu erreichen, wenn die Farbe als einzelner Hex-Code oder als komplette OKLCH-Zeichenkette in einer Variable gespeichert ist.

Farbe aufhellen oder abdunkeln​

Um hellere oder dunklere Varianten einer Farbe zu erzeugen, muss lediglich der L-Wert angepasst werden:

oklch(calc(var(--brand-color-l) + 0.1) var(--brand-color-c) var(--brand-color-h))

Farbe intensiver oder matter darstellen​

Die Entsättigung erfolgt durch Anpassung des C-Werts – je kleiner der Wert, desto grauer wirkt die Farbe:

oklch(var(--brand-color-l) calc(var(--brand-color-c) * 0.5) var(--brand-color-h))

Farbton verändern bei gleicher Helligkeit und Sättigung​

Der komplette Farbton lässt sich verändern, indem der H-Wert verändert wird:

oklch(var(--brand-color-l) var(--brand-color-c) calc(var(--brand-color-h) + 15))

Konsistente Ergänzung / Anpassung / Erstellung von Farbpaletten​

Für die systematische Erstellung einer eigenen Palette empfehlen wir das bereits erwähnte „Leonardo Color io - OKLCH“, weil es bei der Generierung von Farbpaletten alle drei Werte – also auch C und H – in die Kalkulation einbezieht, auch wenn Lightness der bestimmende Strang für die „Universial Color Palette“ ist.

Zentrale Steuerung einzelner Attribute​

Teilen mehrere Farben in einem Design-System einen bestimmten Wert (z. B. den Farbton), kann dieser als separate Variable definiert und damit einheitlich an einer Stelle verwalten.

Bessere Integration mit relativer Farbsyntax (zukünftig/erweitert)​

Die „CSS Color Module Level 4“ Spezifikation beschreibt Funktionen für relative Farben. Die Zerlegung einer OKLCH-Farbe in einzelne Variablen passt gut zu diesem Ansatz und ermöglicht komplexere Farbmanipulationen auf Basis einer einzigen Ausgangsfarbe.

Klarer Code​

Der verständliche Aufbau von OKLCH ist nicht nur für die genannten Anwendungsfälle, sondern auch bei der der Fehlersuche und der Wartung hilfreich.

Inhaltsverzeichnis