"Der Begriff Design wird viel zu häufig benutzt, sogar Friseure nennen neuerdings Designer! " wettert Dieter Rams. Unter gutem Design versteht er die Ausgewogenheit von Funktion und Form.

» info
Dieter Rams ist einer der bekanntesten deutschen Designer. Berühmt würde er vor allem durch seine fast vierzigjährige Tätigkeit als Produktdesigner bei Braun.

Mit dem Web hat er zwar nichts zu tun, aber sein Design-Begriff lässt sich wohl auf dieses übertragen.

url Interview

bildschirmfarben

CMYK

In der Drucktechnik kommt das subtraktive Farbmodell CMYK (Cyan, Magenta, Gelb und Schwarz) zum Einsatz. Durch die Mischung verschiedener Farben entsteht Schwarz. Weisses Papier reflektiert das weisse Licht im Idealfall vollständig. Die Druckfarben absorbieren (subtrahieren) einen Teil des Lichtspektrums. Das reflektierte Restlicht entspricht der wahrgenommenen Farbe.

 

 

CMYK Farbmodell
Die Mischung aller Farben ergibt Schwarz (subtraktive Farbsynthese)

CMYK


RGB

Bildschirme sind selbstleuchtend. Die einzelnen Bildpunkte einer Farbbildröhre bestehen aus drei Phosphorzellen, je eine für die Farben Rot, Grün und Blau. In der Wahrnehmung verschmelzen diese drei Punkte zu einer Farbe. Der Farbton addiert sich also aus den Anteilen der jeweiligen Grundfarben. Der erzeugte Farbraum heisst RGB. Eine Mischung aller Grundfarben mit maximaler Intensität ergibt Weiss.

 

 

RGB Farbmodell
Die Mischung aller Farben ergibt Weiss (additive Farbsynthese)

RGB

Mit Hilfe von gängigen Bildbearbeitungsprogrammen wie z.B. Photoshop können weitere Farbmodelle genutzt werden:

HSB Das HSB-Farbmodell ordnet die Farben räumlich in Form eines Zylinders. Die Farben werden durch den Farbton (Hue, 0-360), die Sättigung (Saturation, 0-100%) und die Helligkeit (Brightness, 0-100%) beschrieben.
LAB Lab umschließt den geräteunabhängigen Farbraum von RGB und CMYK in gleichen Abständen. Räumlich kann man sich das Modell als Kugel vorstellen. L ist der Helligkeitskanal und 2 Farbkanäle: a von Grün bis Rot, b von Blau bis Gelb.

In Analogie zu den technischen Gegebenheiten wird beim RGB-Farbmodell eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau repräsentiert. Jede Farbe hat also einen Rotwert, einen Grünwert und einen Blauwert. Die Anzahl der Werte, die Rot, Grün und Blau annehmen können, wird als Farbtiefe bezeichnet und ist zunächst einmal beliebig.

In einem einzelnen Bit können zwei Werte (also zwei Farben) dargestellt werden, in einem Byte (8Bit) 256 (2 hoch acht) Werte. Bei 256 Abstufungen pro Grundfarbe (3*8Bit = 24 Bit) sind einzelne Farbabstufungen vom menschlichen Auge kaum mehr wahrnehmbar. Hierbei werden insgesamt 16,777,216 Farben (256 * 256 * 256) dargestellt.

Gängige Farbtiefen sind

 

1Bit = 2 Farben (auch Schwarzweiss)

8Bit = 256 Farben (auch Graustufen)

15Bit = 32.800 Farben (nur MacIntosh)

16Bit = 65.000 Farben

24Bit = 16.777.216 Farben (True Color, millions of colors)

32Bit = 16.777.216 Farben und eine 8Bit Graustufenmaske

Der Speicherbedarf für eine Bildschirmseite errechnet sich nach der Formel:

 

Horizontale Auflösung x * Vertikale Auflösung y * Farbtiefe z

Zur Zeit, als die ersten grafikfähigen Webbrowser entwickelt wurden, verfügte die überwiegende Zahl der Consumer-Videokarten nur über spartanisch dimensionierte Videospeicher (256 KB) und konnte daher bei einer Auflösung von 640*400 Pixel lediglich 256 Farben darstellen. Dies entspricht einer Farbtiefe von 8-Bit
(640*400*8 = 2.048.000Bit = 256KByte).

Auf diesem Hintergrund entwickelte Netscape eine Farbpalette (Color Cube) mit 216 Farben für die plattformübergreifende Darstellung von Bildern auf Systemen mit 256 Farben. Diese Farbpalette wird auch vom Internet Explorer unterstützt und hat sich unter dem Namen 'Web Safe Palette' als Standard etabliert. Bei der Web Safe Farbpalette stehen für R,G und B jeweils 6 Werte zur Verfügung (6*6*6=216). R,G und B können hierbei jeweils die Werte 0, 51, 102, 153, 204 und 255 annehmen. Die einheitlichen Abstände zwischen den Einzelwerten gewährleisten eine gleichmässige Abdeckung des Farbraumes.

 

 

Color Cube
Die Web Safe Palette von Netscape, hier in der Version von Victor Engel.

WebSafe Palette nach Victor Engel

 

Die übrigen 40 Farben stehen den Betriebssystemen beispielsweise für Fensterrahmen und Hintergründe zur Verfügung. Auf Systemen mit 8Bit Farbtiefe werden bei Vordergrundgrafiken alle Farben, die sich ausserhalb der Web216 Palette befinden, gedithert. Bei Hintergrundgrafiken werden sie durch die nächste Farbe im Farbwürfel ersetzt (WebSnap).

 

 

Dithering
kann beim Export beeinflusst oder dem Browser überlassen werden.

Dithering

 

 

WebSnap
verschiebt Farben ausserhalb der Palette in die nächste Web-Safe Farbe.

WenSnap

 

In HTML werden Farben im Hexadezimalsystem repräsentiert. Zum Beispiel sind die Farbwerte RGB 51-204-102 im hexadezimalen System als #33CC66 ausgedrückt. Websafe-Werte bestehen im hexadezimalen System ausschliesslich aus Kombinationen der Werte CC, FF, 00, 33, 66 und 99. Umrechnungstools sind in Programme wie Photoshop, ImageReady oder Fireworks integriert.

 

Ein Grundproblem des Webdesign ist, dass einzelne Farbtöne auf verschiedenen Plattformen (PC, Mac, SGI, Sun) und sogar auf identischen Systemen mit gleicher Hardware stark variieren. Dies ist darauf zurückzuführen, dass nur wenige Bildschirme exakt gleich kalibriert sind. Unter Farbkalibrierung versteht man das aufeinander Abstimmen der Farbdarstellung einzelner Geräte (z.B Scanner, Bildschirm und Drucker). Leider gibt es kein universelles Kalibrierungsmodell für bildschirmbasierte Farben. Versuche in diese Richtung wurden bereits unternommen, haben sich aber noch nicht als Standard durchgesetzt.

  • Das von Microsoft und Hewlett Packard 1996 vorgeschlagene sRGB definiert den RGB Farbraum genauer. Es greift eine Kalibrierung heraus, die auf einem 'durchschnittlichen' Monitor beruht, vom Betriebssystem interpretiert und so als Standardeinstellung verwendet werden kann. sRGB wurde vom W3C als Internet-Standard akzeptiert, setzt aber voraus, dass das Originalbild in sRGB erstellt wurde, das Anzeigegerät sRGB erkennt und die Browsersoftware sRGB anzeigen kann.
  • Eine weitere Möglichkeit sind Farbprofile wie die vom International Color Consortium (Adobe, Apple, Kodak, Microsoft, SGI, Sun und Taligent) verabschiedeten ICC Profile, die mittlerweile von 29 Herstellern unterstützt werden. Die ICC Profile wurden zwar für den Druck entwickelt, erstellen aber idealerweise Bilder, die auf jedem Ausgabegerät gleich aussehen. Für das Web sind ICC Profile aber nicht geeignet, da ein vollständiges Profil schnell knapp 1MB gross werden kann.

Zusätzlich zur unterschiedlichen Farbkalibrierung spielt die Gammawert-Voreinstellung des Betriebssystems eine bedeutende Rolle in der Darstellung auf dem Bildschirm. Eine Videokarte arbeitet mit Spannungen zwischen 0 und 5 Volt. Legt die Videokarte an den Ausgängen 0 Volt an, wird schwarz dargestellt, bei 5 Volt Weiß.

Die anliegende Spannung verhält sich aber zur Helligkeit der Darstellung nicht linear. So ist z.B. bei 2,5 Volt Eingangsspannung das dargestellte Bild nicht 50% grau, sondern meist deutlich heller (z.B. 75% grau). Dies kann softwareseitig über die sogenannte Gammakorrektur ausgeglichen werden. Hierbei wird die zu erwartende Abweichung der Monitordarstellung bereits bei der Berechnung der Ausgangsspannung berücksichtigt.

 

 

Gammakorrektur in Photoshop 6.

Gammakorrektur in Photoshop 6

 

Die Betriebssysteme gehen hierbei standardmässig von einem 'durchschnittlichen' Monitor aus, allerdings unterscheiden sich die Annahmen, von welchem Gammawert bei einem 'durchschnittlichen' Monitor auszugehen ist, offensichtlich erheblich. MacOs verwendet eine Gammawert-Voreinstellung von 1.8, Windows rechnet mit dem Faktor 2.2, Silicon Graphics veranschlagt 1.7. Aus diesem Grund sehen auf einem PC erstellte Bilder auf einem Mac verwaschen und zu hell aus, während auf einem Mac erstellte Bilder auf dem PC zu dunkel wirken.

 

Ressourcen zur Bidschirmfarben und netzgerechtem Farbeinsatz:

FARBCODES ist ein Diplomprojekt an der Filmakademie Baden-Württemberg.

Jede Menge Farbpaletten und ein toller Überblick beim Visibone Color Lab.

Ein Tool zur farblichen Gestaltung von Dokumentelementen kann man bei mook benutzen.

Death of the Web Safe Color Palette? hat viel Aufsehen erregt, denn anscheinend erfreut sie sich bester Gesundheit.

Lynda zu ihrem Leib-und-Magen Thema Farbkalibrierung.

Beim CGSD Service findet man einen Haufen Tipps und vertiefende Erklärungen zum Gamma-Problem.