Farbdarstellung in CSS verstehen: Farbmodelle & Farbräume
Von: Jonas, Charleen Während das Farbmodell die mathematische Grundlage beschreibt und der Farbraum den darstellbaren Bereich definiert, sorgt die Farbnotation für die konkrete, technische Angabe einer einzelnen Farbe.
Farben können in CSS auf viele verschiedene Arten definiert werden. Damit ihr versteht, wo all diese Schreibweisen herkommen und wie moderne CSS-Techniken Farben optimal darstellen, lohnt sich ein kurzer Blick auf die Grundlagen von Farbmodellen und Farbräumen.
Farbmodelle
Ein Farbmodell (auch »Farbsystem« genannt) ist ein theoretisches, geräteunabhängiges, mathematisches System, das beschreibt, wie Farben durch die Kombination bestimmter Grundkomponenten erzeugt werden. Das Farbmodell definiert also, wie Farben rechnerisch gemischt werden können, ohne eine direkte Verbindung zu einem bestimmten Gerät oder Medium.
Ein Farbmodell legt damit die Regeln für die Farbmischung fest, bestimmt aber nicht, welche Farben tatsächlich auf einem Monitor, Drucker oder anderen Medien darstellbar sind. Dies regelt der Farbraum.
Bekannte Farbmodelle sind RGB, CMYK, CIELab, HSL oder OKLCH, die jeweils für unterschiedliche Zwecke eingesetzt werden.
Farbräume
Ein Farbraum ist die praktische Umsetzung eines Farbmodells. Der Farbraum beschreibt die Menge und systematische Anordnung von Farben, die auf einem bestimmten Medium – etwa einem Bildschirm – dargestellt oder verarbeitet werden können.
Da nicht alle Geräte, Drucktechniken oder Anwendungen denselben Farbumfang abbilden, existieren unterschiedliche Farbräume für verschiedene Anforderungen. Jeder Farbraum basiert zwar auf einem Farbmodell, kann dessen theoretisch mögliche Farben aber nur teilweise wiedergeben.
Ein Beispiel: Ein Bild wirkt im Grafik-Tool kräftig und leuchtend, und sieht später im Browser blasser aus. Mögliche Ursache: Das Grafik-Tool verwendet einen Farbraum, der mehr Farben darstellen kann als der Browser – z.B. Adobe RGB im Grafikprogramm und sRGB im Browser. Beide Farbräume basieren auf dem Farbmodell RGB, besitzen aber einen unterschiedlichen Farbumfang (Gamut).
Schnittmengen der Farbräume
Wer Farben gezielt für verschiedene Medien einsetzen will, muss verstehen, wo Farbräume übereinstimmen und wo sie sich unterscheiden. Denn Farben, die in einem Farbraum problemlos darstellbar sind, können in einem anderen abweichen oder nicht reproduzierbar sein.
Farbräume auf Bildschirmen
Da wir uns bei kulturbanause mit Web-, App- und Interface-Design beschäftigen, und somit der Darstellung auf Bildschirmen, interessieren uns die Farbräume mit additiver Farbmischung am meisten. Beginnen wir also damit.
sRGB
Über viele Jahre war sRGB der maßgebliche Standard für digitale Anwendungen. Klassische CSS-Farbangaben werden beispielsweise immer in RGB interpretiert. Der sRGB-Farbraum sorgt für eine einheitliche Farbdarstellung auf den meisten Monitoren und ist bis heute der meistgenutzte Farbraum für Websites, Social Media und alltägliche Geräte wie Laptops oder Smartphones.
Display P3
Display P3 ist ein moderner Farbraum, der u. a. in Apple-Geräten, hochwertigen Monitoren und 4K/5K-Displays eingesetzt wird. Er deckt etwa 25 % mehr Farben als sRGB ab – insbesondere in den Bereichen Rot und Grün. Dadurch ist er ideal für Fotografie, Filmproduktion und UI-Designs auf Retina-Displays.
Dank der Unterstützung in modernen Browsern und Betriebssystemen wird Display P3 zunehmend auch im Web eingesetzt.
Adobe RGB
Adobe RGB bietet einen größeren Farbumfang als sRGB oder Display P3, vor allem im Grünbereich. Er wird häufig in der professionellen Bildbearbeitung und Fotografie verwendet, wenn Farbmanagement sichergestellt ist.
Allerdings unterstützt nicht jedes Gerät Adobe RGB. Auf einem sRGB-Monitor können Inhalte verfälscht wirken, wenn der Workflow nicht farbverwaltet ist.
Farbräume im Druck
Im Druck wird fast ausschließlich das CMYK-Modell verwendet, das auf subtraktiver Farbmischung basiert. Typische Farbräume für den Offsetdruck sind ISO Coated V2 oder FOGRA39, die exakt festlegen, wie Farben auf bestimmten Papiertypen wiedergegeben werden.
Geräteunabhängige Farbräume
Ein wichtiger Farbraum ist auch CIELAB. Er orientiert sich an der menschlichen Farbwahrnehmung – unabhängig von technischen Geräten. CIELAB umfasst den gesamten wahrnehmbaren Farbraum des Menschen – also mehr Farben, als RGB oder CMYK darstellen können. Deshalb wird er häufig als Vermittler genutzt, wenn Farben zwischen unterschiedlichen Farbräumen konvertiert werden.
Schreibweisen für Farben in CSS
Eine Farbnotation bezeichnet die Schreibweise im Code, mit der eine bestimmte Farbe dargestellt wird, damit Computer, Software oder Drucksysteme sie eindeutig interpretieren können.
Klassische (implizite) Notationen
Traditionell wurden alle CSS-Farbwerte automatisch (implizit) im sRGB-Farbraum interpretiert – unabhängig davon, ob man Hex, rgb() oder hsl() verwendete.
color: #ff0000; /* Hexadezimal */
color: rgba(255, 0, 0, 0.5); /* RGB mit Alpha-Transparenz */
color: hsl(0, 100%, 50%); /* HSL */Moderne (explizite) Notationen mit Farbraumangabe
Mit neueren CSS-Spezifikationen (ab CSS Color Level 4) können auch andere Farbräume explizit angesprochen werden, etwa Display-P3. Dadurch lassen sich Farben auf modernen Displays präziser und realistischer darstellen, während die alte sRGB-Notation weiterhin für Kompatibilität sorgt.
/* sRGB Farbraum */
color: color(srgb 1 0 0); /* Rot im sRGB-Farbraum */
color: color(display-p3 1 0 0); /* Rot im Display-P3 */
color: color(oklch 0.627 0.259 29.23); /* Rot im OKLCH-Farbraum */
/* Neuere, native CSS-Funktionen als Kurzschreibweise */
color: lab(53.24 80.09 67.20); /* Rot im Lab-Farbraum */
color: lch(53.24 113.87 40.00); /* Rot im LCH-Farbraum */
color: oklch(0.627 0.259 29.23); /* Rot im OKLCH-Farbraum */
…
Geschrieben von:
Charleen Warkentin
