Introduction

Farblehre, Farbtiefe, 8Bit, 16Bit, Pixel, ... was soll das eigentlich alles heissen? Wer blickt da noch durch? Aber so schwer ist es eigentlich gar nicht. Jedoch muss man sich am Anfang ein paar theoretische Grundlagen aneignen auf denen nachher alles aufbaut.
Was ist eigentlich ein Pixel? Pixel ist eine Wortneuschöpfung aus den 60ern und setzt sich zusammen aus den Worten Picture (Pix) und Element (el). Pixel bezeichnen die kleinsten Elemente eines Bildes, die individuell bearbeitet werden können (Webster's College Dictionary, New York 1991). Pixel sind also die atomisierten Bestandteile eines Bildes ..., gut wäre das also geklärt. Dann können wir ja loslegen.





Abb. 1: 216 Web-Farben
Farbtiefe, Farbpaletten etc.
Bit Tiefe Exponential Farbanzahl
1
2
2
4
3
8
4
16
5
32
6
64
7
128
8
256
16
16-Bit-True-Color
24
24-Bit-True-Color
32
32-Bit-True-Color
     


Die Anzahl der Farben eines Bildes beeinflusst dessen Größe. Ein Bild mit einem Bit hat nur zwei Einstellungen - ein (weiss) und aus (schwarz) (1). Hat ein Bild mehr Bit, hat es auch mehr Farben, was aber auch größere Bilddokumente bedingt und zu längeren Ladezeiten führt.
Als Webdesigner ist es wichtig zu wissen, dass man meistens mit weniger als 256 Farben auskommen muss, damit die Grafik vom Surfer sauber gesehen werden kann. Das top of the line nehmen momentan Bilder mit 32Bit Farbtiefe ein, die über einen zusätzlichen Alphakanal verfügen. Ein Alphakanal ist für Transparenz und Überlagerungen zuständig. Es gibt zwei Möglichkeiten farbige Rasterbilder zu speichern: indiziert und RGB. Ein Bild im RGB-Modus (Vollfarben bzw. True-Color-Bilder) verwendet 8Bit (0-255) Rot-, Grün- und Blauwerte, um einen Pixel von 24Bit zu generieren (8+8+8=24). Hat ein Bild nur 256 Farben oder weniger, nennt man es indiziert. Hier besteht eine Synergie zur sog. CLUT oder COLOR LOOKUP TABLE (1). Diese Findet sich in Abb. 1 bereits im 216 Farben-Modus.
Web-Farbtabellen für hexadezimale Farbangaben

Abb. 2: Sechs Seiten des Color Cubes

Der Netscape-Browser hat einen eigenen Farbwürfel, den sog. Color Cube. Dieser ermöglicht eine plattformunabhängige Darstellung von 256 Farben bei entsprechender Peripherie. Charakteristisch an diesem Farbwürfel ist, dass er bei seinen sechs Seiten nur 216 Farben darstellt. Aber warum 216 und nicht 256. Antiquiert aber gängig! Windows braucht 20 Farben, andere Programme bekommen 20 Farben zugeteilt, also bleiben für den Browser nur noch 216 (256-20-20=216). In Abbildung 2 sieht man den Würfel in einzelne Quadrate aufgeteilt, deren Seiten jeweils aus sechs Quadraten bestehen. Aus den Eckpunkten lassen sich die acht möglichen Kombinationen aus 0 und 255 ableiten.




Abb. 3: Der Color Cube und seine acht Eckpunkte -
Quelle: Siegel, D., Web Site Design (1999)
 

Beispiele


Blau: Quardrat 66+Reihe 33+Spalte FF

Schwarz: #000000     Weiss: #FFFFFF
        Rot: #FF0000       Grün: #00FF00
      Blau: #0000FF       Grau: #CCCCCC
      Gelb: #FFFF00   Orange: #FF9933

Übung: Was für ein Farbton ist #666666 ?

Im Web werden jedoch keine RGB-Angaben zur Farbdefinition verwandt, sondern sog. hexadezimale Beschreibungen. Diese Hex-Zahlen ermöglichen es, Werte von 0-15 in einer einzigen Zahl festzulegen. Kompliziert? Kompliziert! Diese gehen von 0 bis F. Jetzt wird's noch besser! Wir können jetzt durch zweistellige Kombinationen der Form #XXX aus der Menge {00,33,66,99,CC,FF} Farben generieren, die ein Bestandteil des Farbenwürfels sind. Das Gitter (#) leitet die Hex-Zahl ein. Beispiel: Hellblau = #99CCFF oder dasselbe in grün = #66FF00. Wie schön wäre diese ganze Grafik-Geschichte ohne Mathe! Aber Achtung da kommt sie! Im RGB-Modus werden Farben (256) mit Ziffern von 0 bis 255 angegeben (0 zählt mit, darum 256 Farben bei 0-255). Alle Farben des Color Cubes sind dreifache RGB-Konstellationen des Hexadezimalwertes 51. Also ist jedes Vielfache von 51 bzw 51 selbst und 0 ein Bestandteil des Farbwürfels. Beispiele: RGB-Kombinationen wie (51,204,0), (153,153,51) oder (51,102,153) werden im Web immer sicher abgebildet. Was ausserhalb liegt, kann daneben gehen (Red.:Wortspiel). Auf der linken Seite finden sich einige Beispiele zum Verständnis der hexadezimalen Schreibweise (1).
Das war jetzt mit großen Schritten durch die Web-Farblehre marschiert. Im nächsten Kapitel sehen wir uns die verschiedenen Grafiktypen an.


 
 Quellen:

 [1] Siegel, D., Web Site Design (1999)


Grafiktypen >