Das Homepage-Handbuch speziell für blutige Anfänger

Die Farbtabelle der RGB-Farben

RGB bedeutet Rot-Grün-Blau. Dies sind die 3 Grundfarben. Aus ihnen lassen sich alle anderen Farben mischen. Auch im Computer lassen sich alle Farben definieren, indem man angibt wie hoch der Anteil jeder der 3 Grundfarben ist. Dazu verwendet man Zahlenwerte. Ganz typisch für moderne Grafikkarten sind 256 Abstufungen pro Grundfarbe. Die Werte für die 3 Grundfarben werden in der Reihenfolge Rot, Grün, Blau angegeben. Die Farbe 255,0,0 würde also Rot ergeben.

CSS unterstützt tatsächlich die Angabe der Farbwerte im dezimalen Zahlensystem, also mit Zahlenwerten zwischen 0 und 255.
Beispiel: color: rgb(123,4,56); mit Gibt man die Farbe

In der Computerwelt verwendet man allerdings sehr gern das Hexadezimalsystem für solche Zahlenwerte. Im Vergleich zum normalen Dezimalsystem kennt das Hexadezimalsystem mehr als nur 10 verschiedene Ziffern. Nämlich 16, wenn man die Null mitzählt. Es müssen die Ziffern 0 bis 15 dargestellt werden. Wo es an Ziffern fehlt, verwendet man einfach Buchstaben. Und zwar werden die Zahlen 0 bis 9 ganz normal dargestellt und dann folgen die Zahlen 10 bis 15 als Buchstaben A bis F. Zählt man auf diese Weise, dann erfolgt der Übertrag immer erst ab 16. Die Zahl 16 würde daher als "10" dargestellt. Und damit man im HTML-Dokument normale Zahlen von Hexadezimalzahlen unterscheiden kann, bekommen sie ein Vorzeichen, nämlich die Raute. Also: #10 = 16. Klar?

Verwenden wir nun also die Hexadezimalzahlen für unsere 256 Farbwerte. Es müssen die Werte 0 bis 255 dargestellt werden. "Wie es der Zufall so will" ist 16 mal 16 genau 256. Also in Hex-Schreibweise: #10 mal #10 ist #100. Die Zahl 255 ist eins weniger, also #FF. Die Zahlenwerte pro Grundfarbe liegen also im Bereich von #00 und #FF. Und da wir alle drei Farbwerte angeben müssen, notieren wir sie in der Reihenfolge Rot-Grün-Blau (RGB) und schreiben wie folgt:

#000000
#FF0000
#00FF00
#0000FF
#FFFFFF

Ein wenig hiervon - ein wenig davon - so werden RGB-Farben gemischt

Mischt man die Grundfarben zu gleichen Teilen, dann ergeben sich daraus die sogenannten 'Komplementärfarben'. Im Gegensatz zum Tuschekasten sind Computerfarben 'Lichtfarben', die sich in der Helligkeit addieren. Je mehr man also davon nimmt, um so heller wird die Farbe.

#FFFF00

Rot + Grün = Gelb

#FF00FF

Rot + Blau = Violett

#00FFFF

Grün + Blau = Cyan

Durch die Hinzumischung von Grün wird aus Rot erst Orange und dann Gelb:

#FF 00 00
#FF 33 00
#FF 66 00
#FF 99 00
#FF CC 00
#FF FF 00

Weniger aufregend ist die Verwandlung von Grün zu Gelb:

#00 FF 00
#99 FF 00
#CC FF 00
#EE FF 00
#FF FF 00

Im Folgenden wird die Farbe Blau entsättigt. Sind schließlich alle 3 Grundfarben in gleichem Maße vorhanden, dann erhält man Grau:

#00 00 FF
#44 44 DD
#66 66 CC
#88 88 CC
#99 99 BB
#AA AA AA

Drei gleiche Werte ergeben immer Grau:

#00 00 00
#44 44 44
#66 66 66
#99 99 99
#CC CC CC
#FF FF FF

Farbauswahl mittels Farbnamen

Man kann die Farben auch im Klartextformat benennen. Namo WebEditor kennt die Farbnamen ebenfalls. Da HTML auf der englischen Sprache basiert, sind auch die Farbnamen alle in englisch. Bei einigen grundlegenden Farben können Sie davon ausgehen, dass so ziemlich jeder Browser sie zumindest darstellen kann. Dies sind die 16 Farben der ursprünglichen VGA-Palette:

Die 16 VGA-Farben und ihre Farbnamen:

white (weiß)	#FF FF FF	yellow (gelb)	#FF FF 00
siver (silber)	#C0 C0 C0	olive (olivgrün)	#80 80 00
gray (grau)	#80 80 80	lime (hellgrün)	#00 FF 00
black (schwarz)	#00 00 00	green (grün)	#00 80 00
aqua (aquamarin)	#00 FF FF	red (rot)	#FF 00 00
teal (blaugrün)	#00 80 80	maroon (rotbraun)	#80 00 00
blue (blau)	#00 00 FF	fuchsia (pink)	#FF 00 FF
navy (marineblau)	#00 00 80	purple (lila/purpur)	#80 00 80

Diese Farbnamen gehören zum W3C-Standard (siehe HTML4) und werden auch in Verbindung mit CSS empfohlen. Ab CSS Level3 werden offiziell 140 Farbnamen unterstützt! Darunter auch die folgenden bekannten Farbbezeichnungen:

Weitere allgemein bekannte Farben:

beige	#F5 F5 DC	chocolate	#D2 69 1E
brown	#A5 2A 2A	darkred	#8B 00 00
orange	#FF A5 00	gold	#FF D7 00
palegreen	#98 FB 98	forestgreen	#22 8B 22
violet (violett)	#EE 82 EE	indigo	#4b 00 82
turquoise	#40 E0 D0	steelblue	#46 82 B4
darkgray	#A9 A9 A9	dimgray	#69 69 69

Eine ausführliche Abhandlung dieses Themas würde den Rahmen dieses Handbuches für blutige Anfänger aber sprengen. Moderne Browser kommen mit den Farbnamen prima zurecht. Trotzdem empfehle ich die Verwendung der Hex-Schreibweise.

Sie können mehr über das Thema 'Farbnamen' nachlesen bei:

Ein Wort zu "Websicheren Farben"

In Zeiten, als moderne Grafikkarten (24-Bit bzw. Millionen Farben) noch nicht sehr verbreitet waren, hatte sich der VGA-Standard durchgesetzt. Dieser konnte 256 verschiedene Farben anzeigen. Bei billigen - vor allem aber auch bei Bürocomputern hat es sehr lange gedauert, bis sich modernere Grafikstandards durchsetzten. Außerdem muss man ja immer auch Rücksicht nehmen auf diejenigen, die ein etwas betagteres System ihr eigen nennen.

Aus diesem Grunde hat man damals (mitte 90er Jahre) ausgetüftelt, welche Farben mit einem alten VGA-System sicher darzustellen sind. Den Webdesignern wurde dann empfohlen, sich an diese Farbauswahl zu halten.

Grob gesagt hat man aus den 256x256x256 = 16.777.216 RGB-Farben des modernen Standards 16x16 = 256 Paletten-Farben ausgesucht. Um das wieder ins RGB-Modell umzurechnen, verwendete man 6x6x6=216 Farben. In der hexadezimalen RGB-Farbendarstellung, die weiter oben ja schon besprochen wurde, verwendet man nur noch die Werte 00 , 33 , 66 , 99 , CC und FF.

Heute kann man wohl davon ausgehen, dass selbst bei sehr alten Computern und billigen Handys zumindest der XGA-Standard mit True-Color-Modus (65536 Farben) vorausgesetzt werden kann. Dies in Verbindung mit relativ hohen Bildauflösungen reicht aus, um notfalls mit Hilfe des sog. Ditherings auch True-Color-Bilder stets in brauchbarer Qualität auszugeben.

Somit ist die Verwendung von 'websicheren Farben' heute nicht mehr relevant. War aber trotzdem schön, dass wir mal darüber gesprochen haben. Ich verzichte dann auch auf eine Demonstration der 256 VGA-Farben. Wenn Sie aber mehr Details darüber nachlesen wollen, dann schauen Sie doch mal in die Wikipedia:

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum

Copyright by Jörg Wischnewski - Logos, Warenzeichen, Schutzmarken etc. stehen im jeweiligen Recht und Eigentum der eingetragenen Inhaber, auch wenn dies nicht ausdrücklich einzeln angegeben ist.