Tripod-HTML-Kurs (1)
Tripod-HTML-Kurs (2): Einführung
- <BODY>-Tag
- <IMG>-Tag
- Imagemaps
- Farbmodelle
- Bildformate
- <META>-Tag
- farbige Tabellen
- Style Sheets
- Formulare
- Test
Tripod-HTML-Kurs (2): Farbmodelle
In diesem Kapitel erfahren Sie eine Menge über das RGB-Farbmodell. Wenn Ihnen dieses
Kapitel zu theoretisch ist, können Sie es einfach überspringen und mit dem
Kapitel "Das <META>-Tag" weitermachen.
Und hier können Sie sich informieren über .......
Um Farben darzustellen, ist im Computerbereich das RGB-Farbenmodell üblich.
"RGB" steht für Red - Green - Blue, d.h. Rot - Grün - Blau: werden diese
Farben zusammengemischt, können viele Farbtöne erzeugt werden.
Dieses Modell ist ein sogenanntes additives Farbmodell, d.h. mischen Sie diese Farben zusammen,
d.h. addieren Sie diese erhält man irgendwann weiß, nehmen Sie Farben weg,
also subtrahieren Sie Farben erhält man irgendwann schwarz.
Bei einem subtraktiven Farbmodell (z.B. das CMYK-Modell - Cyan - Magenta - Yellow -
Prozentanteil an blacK, d.h. Cyan - Magenta - Gelb - Schwarzanteil) erreicht man durch
das Mischen der Farben, also Addieren der Farben schwarz, durch das Subtrahieren
gelangt man zu weiß.
Wieviel Rot - Grün - Blau einem bestimmten Farbton beigemischt ist, wird durch
den RGB-Wert angegeben.
Weiß hat in diesem Modell die Werte (255,255,255), nimmt man Farbe weg, landet
man bei schwarz, schwarz hat daher die Werte (0,0,0). Entsprechend hat ein "reines"
blau die Werte (0,0,255), "reines" rot hat (255,0,0) und "reines" grün hat die
Werte (0,255,0). Je höher ein Einzelwert ist desto, heller ist der Farbton (alle
Werte auf 255 gesetzt ergeben weiß!).
Für jede Farbe gibt es 256 Werte, von 0 bis 255, d.h. mit diesem Farbmodell
sind 256 X 256 X 256 = 16 777 216 Farben möglich.
Wieviele dieser Farben ihr Computermonitor darstellen kann, ist von der verwendeten
Hard- und Software abhängig, z.B. der Graphikkarte und dem Betriebssystem.
Welche Farbpalette (und Auflösung) bei Ihrem
Windows-Computer eingestellt ist, können Sie überprüfen:
clicken Sie auf den Start-Knopf (links unten) und wählen Sie dort
die "Einstellungen" und von dort aus die "Systemsteuerung". Sie erhalten ein Fenster
mit vielen Icons: wählen Sie das Icon "Anzeige" aus. Ein Click auf "Einstellungen"
gibt Ihnen einen Überblick über die verwendete Farbpalette, die Bildschrimfrequenz
und die verwendete Auflösung. Diese Einstellungen können Sie in diesem Menü
natürlich auch ändern.
Vielleicht kommt Ihnen die Farbkombination Rot - Grün - Blau bekannt vor.
Farbfernsehapparate nutzen diese drei Grundfarben, um die farbigen Bildpunkte zu
erzeugen, aus denen ein Bild aufgebaut ist. Ein weißer Bildpunkt ist
gleichmäßig zusammengesetzt aus blauen, grünen und roten Punkten
(das sieht man, wenn man sich ganz nah an den Bildschirm setzt.......was natürlich
nicht zu empfehlen ist).
Die Darstellung der Pixel, der Bildpunkte einer Grafik basiert auf den Bits aus
denen ein Computerspeicher zusammengesetzt ist. Der Speicher ist aufgeteilt in Bytes,
das sind 8 Bits, es werden daher immer 8 Bits zusammen abgespeichert.
Je nachdem wieviele Bits für ein einzelnes Pixel verwendet werden,
können mehr oder weniger Farben für die Darstellung benutzt werden.
Wird ein Pixel pro Bit angespeichert, gibt es 2 Schalterzustellungen: das Bit hat
den Wert 1 oder 0, d.h. die Graphik ist schwarz-weiß.
Soll eine Graphik farbig abgespeichert sein, reichen diese 2 Einstellungen nicht mehr
aus. Ein Pixel bentigt mehr Bits, damit mehr Kombinationen von Schalterstellungen
möglich werden.
Verwenden Sie pro Pixel 2 Bits sind schon 4 Farben verwendbar: die Schalterstellungen
00,11,01 und 10 der beiden Bits ergeben schon 4 Farben.
Speichern Sie einen Pixel auf 4 Bits ab haben Sie schon 16
Kombinationsmöglichkeiten:
0000, 0001, 0010, 0011, 0100, 0101, 0110, 0111, 1000, 1001, 1010, 1011, 1100, 1101,
1110, 1111.
Nimmt ein Pixel 8 Bits Speicherplatz in Anspruch ergeben sich 256 Farben, bei
16 Bits pro Pixel sind es 65536 Farben, bei 24 Bits pro Pixel ergeben sich
16 777 216 Farben, bei 32 Bits sind es 4 294 967 296 Farben.
Die Anzahl der möglichen verwendbaren Farben wird als Farbtiefe
bezeichnet.
Wieviele Farben dargestellt werden, hängt letztendlich jedoch auch, wie weiter
oben bereits erwähnt von der verwendeten Hard- und Software ab (z.B.
Betriebssystem).
Wollen Sie ein Bild darstellen, das z.B. 16.7 Millionen Farben enthält, Ihr
Computer kann aber nur 256 darstellen, wird das Bild "verfälscht" dargestellt.
Bilder werden von der verwendeten Software z.B. mit dem Dithering- oder
Banding-Effekt dargestellt.
Beim Banding werden dem Betrachter mehr Farben vorgegaukelt als wirklich dargestellt
werden können. Die wird bewerktstelligt indem mehrere nebeneinanderliegende
Farbpunkte zusammengefaßt werden, d.h. die vorhandenen Farben werden so
gemischt, daß die fehlenden Farben ausgeglichen werden.
Beim Banding werden die vorhandenen Farben verwendet, dies kann aber in einer
zu harten, scharfen Übergängen in der Graphik führen.
Auf diese Effekte werden wir hier aber nicht weitereingehen.
Wieviele Farben ein Bild enthält, bestimmt letztendlich nicht die
Dateigröße eines Bildes, der entscheidende Faktor ist die Kompressionsart.
Darauf gehen wir im nächsten Kapitel ein: Bildformate.
Hat man nur eine begrenzte Auswahl an Farben zur Verfügung ist es vernünftig
sich zu einigen, welchen Farben das sein sollen. Sonst werden Bilder auf jedem Computer
anders dargestellt, wenn nicht die volle Bandbreite an 16.7 Millionen Farben
ausgeschöpft werden kann.
Eine solche Palette können Sie sich individuell, vergleichbar einem Kunstmaler,
zusammenstellen: dann gibt es aber wieder das Problem der Nicht-Vergleichbarkeit.
Im Webbereich hat man sich auf die sogenannte Webpalette geeinigt. Die Webpalette
enthält 216 Farben und nicht 256 Farben, da bereits das Betriebssystem und der
Browser Farben für die Darstellung benötigen. Deshalb werden von Rot,
Grün und Blau je nur 6 Werte in 20%-Schritten benutzt, das ergibt 6X6X6 = 216 Farben, die restlichen 40
Farben sind für das Betriebssystem und den Browser.
Vielleicht ist Ihnen der Begriff 6X6X6-color cube begegnet, dieser Ausdruck bezieht sich auf
die limitierte Webpalette von 216 Farben und heißt übersetzt 6X6X6-Farbwürfel.
20% von 255 sind 255 * 0.2 = 51, d.h. so ergeben sich die die RGB-Werte 0, 51, 102,
153, 204, 255 (je + 51). Eine Farbe aus der Webpalette ist eine Kombination aus diesen Werten,
eine andere Zahl als diese kommt nicht vor.
Diese RGB-Werte werden dann noch in hexadezimaler Notation geschrieben. Wie das geht,
erläutern wir Ihnen im nächsten Abschnitt.
Wie Sie bei der Angabe des RGB-Wertes gesehen haben, kann man Farben mit Zahlen
angeben.
Diese Angabe können Sie allerdings nicht durch die einfache Angabe des RGB-Wertes
erledigen. Die RGB-Werte müssen in einer anderen Zahlenbasis angegeben werden,
mit einer sogenannten hexadezimalen Notation.
Nicht erschrecken! Einfach weiterlesen.
Da der Mensch 10 Finger an den Händen hat, hat es sich irgendwann in unserem
Zählsystem eingebürgert, daß die Grundlage unseres Zählens die
10 ist.
Bei Computern ist es einfacher die 16 als Grundlage für das Zählen zu benutzen.
8 Bits ergeben ein Byte, i.d.R. werden diese Bytes paarweise notiert, wenn man Zahlen
angibt. 2 Bytes sind 16 Bits, daher die 16 als Grundlage für das Zählen.
Da bei einem Zahlensystem, daß auf der Basis 16 basiert die Ziffern ausgehen,
werden für die Zahlen ab 9 Buchstaben verwendet.
In der Tabelle sind die unterschiedlichen Zählweisen gegenübergestellt:
Bei einer dezimalen Darstellung wiederholen sich die Ziffern alle 10 Zeichen
(einschließlich der 0), bei einer hexadezimalen Darstellung wiederholen sich die
Ziffern alle 16 Zeichen (einschließlich der 0).
Sie müssen diese Darstellungsweise nicht verstehen, wenn Sie dezimale Zahlen
einfach hexadezimal notieren möchten. Zur schnellen Orientierung haben wir Ihnen
die RGB-Werte der Webpalette in hexadezimaler Notation:
zusammengestellt:
| RGB-Wert: Dezimal |
0 |
51 |
102 |
153 |
204 |
255 |
| RGB-Wert: Hexadezimal |
00 |
33 |
66 |
99 |
CC |
FF |
Ein Farbwert der Webpalette ist stets nur aus diesen Werten zusammengesetzt:
z.B. #CC99FF oder #CC3366 usw.
Zur Erinnerung: das Zeichen "#" gibt an, daß die folgenden Zahlen hexadezimal sind.
Die Werte der Webpalette stehen in der Tabelle. Möchten Sie beliebige
dezimale Zahlen umwandeln, also nicht nur solche, deren Werte den 20%-Schritten der
Webpalette entsprechen, gibt es ein bißchen Rechnerei.
Die Dezimalzahl wird so umgewandelt: wenn Sie einen Taschenrechner haben,
der mit einer Hex-Konversion ausgestattet ist, dann müssen Sie nicht weiterlesen.
Gegebenenfalls die Anleitung für Ihren Taschenrechner.
Möchten Sie die Umwandlung ohne Taschenrechner erledigen, gibt es hier ein
Beispiel für die Umwandlung zu "Fuß":
Möchten Sie diese Aufgabe nicht einem Taschenrechner überlassen, teilen Sie
die Dezimalzahl, beispielsweise 230 durch 16. Das ergibt 14.375:
Was ist mit dem Rest? D.h. was ergibt 230 - 14*16 = 230 - 224 = 6.
Sie haben nun die beiden Zahlen 14 und 6, die in eine hexadezimale Zahl umgewandelt werden.
Die Tabelle oben ist Ihnen dabei behilflich: 14 ist in dieser Notation 0E, 6 ist 06.
230 in hexadezimaler Notation ist also E6.
Wenn Sie eine Zahl angeben möchten, deren RGB-Werte (40,255,60) beträgt, müssen
Sie jede einzelne Zahl in eine Hex-Zahl umwandeln.
So eine umgewandelte Zahl wird angegeben mit einem "#" davor, das Zeichen das die
nun folgenden Zahlen hexadezimale Zahlen sind.
40: 40/16 = 2.5, 2 in Hex ist 2, der Rest: 40 - 16*2 = 8, 8 in Hex ist 8. 40 in Hex
wird dargestellt durch 28.
255: 255/16 = 15.9375, 15 in Hex ist F, der Rest: 255 - 15*16 = 15, 15 in Hex ist F.
255 in Hex ist FF
60: 60/16 = 3.75, 3 in Hex ist 3, der Rest: 60 - 3*16 = 12, 12 in Hex ist C. 60
in Hex ist damit 3C
Die RGB-Werte (40,255,60) in hexadezimaler Notation: #28FF3C.
--> Weiter zum nächsten Kapitel: Bildformate für Webseiten
<-- Zurück zum vorherigen Kapitel: Imagemaps
