Farbe

Ich nehm immer Blau … das finden alle gut.

Farbe ist Identität.

Ein paar Farbflächen reichen, um eine Marke zu erkennen.

Einstieg (ca. 5 Minuten)

Nur die Farben, kein Logo. Raten lassen: Welche Marke ist das? Auflösung der Reihe nach: Telekom, eBay, Coca-Cola, Ikea, IntelliJ (JetBrains), TikTok.

Pointe: Farbe allein reicht, um eine Marke zu erkennen. Farbe ist Identität, und Unternehmen schützen sie zum Teil sogar als Marke (das Magenta der Telekom ist als Farbmarke eingetragen).

Irritationen: Danach zwei Bilder, bei denen die Augen nicht mitspielen.

Der gleiche Farbwert: Beide Blautöne sind identisch, wirken aber je nach umgebenden Streifen heller oder dunkler (White-Täuschung, Michael White 1979).
Verläufe: An den Kanten benachbarter Tonstufen sehen wir helle und dunkle Säume, die es nicht gibt (Mach-Bänder, Ernst Mach 1865). Bei den Verläufen wirkt der untere Streifen je nach Nachbarschaft unterschiedlich.

Ausführlich im Phänomen »Farbe ist relativ«.

Grundlagen

Was ist Farbe überhaupt?

Sichtbares Licht: ein schmaler Ausschnitt des elektromagnetischen Spektrums

Von Infrarot bis Ultraviolett: das Farbspektrum

Hue, Saturation, Brightness: das HSB-Farbmodell

Grundlagen (ca. 15 Minuten)

Farbe ist keine Eigenschaft der Dinge, sondern eine Empfindung. Sichtbares Licht ist ein schmaler Ausschnitt des elektromagnetischen Spektrums, etwa 380 bis 780 Nanometer, zwischen Ultraviolett und Infrarot. Die Netzhaut hat drei Zapfentypen für kurze, mittlere und lange Wellenlängen. Aus deren Verhältnis konstruiert das Gehirn die Farbe.

Additiv und subtraktiv: Am Bildschirm mischen sich Lichtfarben (RGB): Rot, Grün und Blau zusammen ergeben Weiß. Im Druck filtern Pigmente Licht heraus (CMY, plus K für Schwarz): Alle zusammen ergeben fast Schwarz. Deshalb sehen Farben auf Papier und am Screen nie ganz gleich aus.

Farbkreis: Aus den Grundfarben abgeleitet. Gegenüberliegende Farben sind Komplementärfarben. Es gibt verschiedene Farbkreise, z. B. den symmetrischen und den nach Harald Küppers.

HSB: Für Gestaltende praktischer als RGB, weil es beschreibt, wie wir Farbe wahrnehmen: Farbton (Hue), Sättigung (Saturation), Helligkeit (Brightness). Das HSB- bzw. HSV-Modell hat Alvy Ray Smith 1978 beschrieben. In Figma und anderen Werkzeugen ist es der Standard-Farbwähler.

Quellen: Itten, Kunst der Farbe (1961); Albers, Interaction of Color (1963); Groß u. a., Generative Gestaltung (2018).

Farbmodelle im Screendesign

Welches Modell wofür?

Farbmodelle im Screendesign

Modell	Beschreibt	Begegnet Ihnen in
RGB / Hex Red, Green, Blue / Hexadezimal	Rot, Grün, Blau als Lichtfarben	Bildschirm, CSS, Entwicklung
HSB / HSV Hue, Saturation, Brightness / Value	Farbton, Sättigung, Helligkeit	Farbwähler in Figma, Photoshop
HSL Hue, Saturation, Lightness	Farbton, Sättigung, Helligkeit (Weiß bei 100 %)	CSS, Farbvarianten ableiten
OKLCH Oklab Lightness, Chroma, Hue	Helligkeit, Buntheit, Farbton, wahrnehmungsgleichmäßig	Paletten, Design Tokens, modernes CSS
CMYK Cyan, Magenta, Yellow, Key (Schwarz)	Cyan, Magenta, Gelb, Schwarz als Druckfarben	Druck, Übergabe an Druckerei

RGB und Hex Red, Green, Blue · Hexadezimal

Kann gut

Beschreibt direkt, was der Bildschirm tut

Überall verfügbar: CSS, Figma, jedes Werkzeug

Hex ist kompakt zum Kopieren und Weitergeben

Kann nicht so gut

Für Menschen kaum lesbar: Welche Farbe ist #9313ce?

Hellere oder dunklere Varianten lassen sich schwer ableiten

Die Zahlen sagen nichts über die wahrgenommene Helligkeit

HSB und HSV Hue, Saturation, Brightness · Value

Kann gut

Intuitiv: erst den Farbton, dann Sättigung und Helligkeit

Standard im Farbwähler von Figma, Photoshop und Co.

Gut zum Variieren entlang einer Achse

Kann nicht so gut

Gibt es nicht in CSS, muss umgerechnet werden

Gleiche Helligkeitswerte wirken je nach Farbton verschieden hell

Leicht zu verwechseln mit HSL

HSL Hue, Saturation, Lightness

Kann gut

In CSS direkt nutzbar

Varianten über die Helligkeit ableiten, z. B. für Hover-Zustände

Farbton als Zahl: gut für systematische Paletten

Kann nicht so gut

Nicht wahrnehmungsgleichmäßig: Gelb wirkt viel heller als Blau

Gleiche Abstufungen wirken ungleichmäßig

100 % Helligkeit ist immer Weiß, anders als bei HSB

hsl(h 100% 50%): gleiche Helligkeit laut Zahl, sehr unterschiedlich hell fürs Auge

OKLCH Oklab Lightness, Chroma, Hue

Kann gut

Wahrnehmungsgleichmäßig: gleiche Zahl, gleiche gefühlte Helligkeit

Paletten und Design Tokens systematisch ableiten

Kontraste besser planbar, größerer Farbraum (Display P3)

Kann nicht so gut

Noch neu und ungewohnt

Noch nicht in allen Design-Werkzeugen verfügbar

Manche Werte liegen außerhalb dessen, was ein Bildschirm darstellen kann

oklch(70% 0.13 h): gleiche Helligkeit laut Zahl, auch fürs Auge gleich hell

CMYK Cyan, Magenta, Yellow, Key (Schwarz)

Kann gut

Sagt das Druckergebnis voraus

Standard für die Übergabe an die Druckerei

Sauberes Schwarz durch eigene Druckfarbe (K)

Kann nicht so gut

Kleinerer Farbraum: Leuchtende Bildschirmfarben lassen sich nicht drucken

Für Web und App ohne Bedeutung

Ergebnis hängt von Papier und Druckverfahren ab (Farbprofil)

Im Code: eine Farbe, vier Schreibweisen

#9313ce Hex

rgb(147 19 206) Rot, Grün, Blau

hsl(281 83% 44%) Farbton, Sättigung, Helligkeit

oklch(51.5% 0.25 310) wahrnehmungsgleichmäßig

Farbmodelle im Screendesign (ca. 10 Minuten)

Erst die Übersicht, dann pro Modell eine Folie: Was kann es gut, was nicht? Die Stärken und Schwächen nacheinander einblenden.

RGB und Hex beschreiben, was der Bildschirm tut. HSB/HSV und HSL beschreiben Farbe so, wie Menschen über sie sprechen, und unterscheiden sich nur in der Helligkeitsachse: Bei HSB ist 100 % Helligkeit die reine Farbe, bei HSL ist 100 % immer Weiß. Das HSB- bzw. HSV-Modell hat Alvy Ray Smith 1978 beschrieben.

HSL gegen OKLCH: Die beiden Farbstreifen zeigen den Kern. In HSL haben alle sechs Farben dieselbe Helligkeit von 50 %, trotzdem wirkt Gelb fast weiß und Blau fast schwarz. In OKLCH haben alle 70 % Helligkeit, und sie wirken auch gleich hell. OKLCH ist die wahrnehmungsgleichmäßige Weiterentwicklung von Lab und LCH (CIE 1976), beschrieben von Björn Ottosson (2020). In CSS seit 2023 in allen großen Browsern.

Abkürzungen: Bei OKLCH steht »OK« für Oklab, Ottossons Farbraum; L ist Lightness, C Chroma (Buntheit), H Hue. Bei CMYK steht K für Key, die Schlüsselfarbe Schwarz, auf die die anderen Platten ausgerichtet werden.

CMYK brauchen Sie nur, wenn etwas gedruckt wird. Sonderfarbsysteme wie Pantone oder RAL sind keine Farbmodelle, sondern Farbbibliotheken mit festen Namen und Nummern.

Im Code: CSS kennt mehrere Schreibweisen für dieselbe Farbe. Hex und rgb() sind technisch, hsl() ist näher an der Wahrnehmung, oklch() wahrnehmungsgleichmäßig. Damit lassen sich Farbpaletten und Design Tokens sauberer ableiten.

Danke für's Mitmachen

https://christiannoss.de