Das Rot-Grün-Blau-Modell

Das RGB-Modell

"Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau definiert. Jede Farbe hat also einen Rotwert, einen Grünwert und einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der Wert 0 bedeutet: keinen Anteil an der betreffenden Grundfarbe, der Wert 255 bedeutet: maximalen Anteil an der betreffenden Grundfarbe. Ein dunkles Blau z.B. hat nach diesem Schema die Farbwerte 0,0,153 (0 rot, 0 grün, 153 blau). Mit diesem Schema können bis zu 16,7 Mio. unterschiedliche Farben definiert werden." (aus: SELFHTML)

Das Hexadezimalsystem

Eine gewünschte Farbe kann durch Angabe der möglichen Rot-, Grün- und Blauwerte (RGB-Werte) in Hexadezimalform (0 bis FF) oder durch Angabe eines Farbnamens (z.B. "black") definiert werden. Die hexadezimale Angabe ist Browser-unabhängig und ermöglicht die Darstellung von 16,7 Millionen Farben. Die korrekte Syntax für die Hexadezimalform ist "#112233" - die Raute als einleitendes Symbol, dann sechs Ziffern, wobei jeweils ein Ziffernpaar für den Rot-, Grün- bzw. Blauwert zur Verfügung steht.

An dieser Stelle ist zu bedenken, daß das weitverbreitete Format GIF nur 256 Farben darstellen kann.

Für WWW-gerechte Farben sollte man sich an ein Standardschema halten, das auch vom Browser optimal interpretiert wird. Erlaubt sind alle Farben, deren RGB-Werte durch 51 dividierbar sind. Rot, Grün und Blau sollten danach einen der Werte 0, 51, 102, 153, 204 oder 255 (hexadezimal: 00, 33, 66, 99, CC oder FF) haben, was 20%-Stufen entspricht. Ein erlaubter Wert wäre also 255,51,204 (hexadezimal: #FF33CC). Auf diese Weise ergeben sich 6 x 6 x 6 = 216 mögliche Farben (siehe Farbtabelle). Die verbleibenden 40 Farben können Sie mit gewünschten Farben definieren, die Ihnen für einzelne Grafiken eventuell fehlen.

Farbnamen

Statt des Hexadezimalwertes können Sie auch den Farbnamen eingeben. "#000000" für Schwarz müßte durch "Black" ersetzt werden. Allerdings ist diese Vorgehensweise Browser-abhängig und es ist "sicherer", immer den Hexadezimalwert einzugeben. Weiter unten finden Sie eine Liste der Farbnamen (wie sie Netscape definiert) und die entsprechenden Hexadezimalwerte.

Farbwähler

Mit diesem kleinen Werkzeug können Sie ganz unkompliziert verschiedene Farbkombinationen ausprobieren. Spielen Sie das Beispiel hier ruhig einmal durch, Sie werden dieses Tool auf den nächsten Seiten sehr nützlich finden. Schreiben Sie in das Eingabefeld z. B. den Hexadezimalwert für 'Rot': FF0000 (groß oder klein, hier auch ohne die Raute #):

Farbwähler

Ein Klick auf "Color" verändert den Hintergrund sofort in diese Farbe (was nicht unbedingt sehr hübsch aussieht...).
Wenn Sie nun durch die Tabelle/Liste blättern, erkennen Sie, welche Farben einen guten Kontrast zum Hintergrund bilden.
Sie können einen anderen Farbwert aus der Liste einfach mit Copy and Paste in das Eingabefeld übertragen.
Auch Grafiken und Icons lassen sich damit testen.
Um die Ursprungsfarbe wiederherzustellen, löschen Sie den Wert im Eingabefeld und drücken "Enter".
Mit dem folgenden Code können Sie den Farbwähler in jedes beliebige HTML-Dokument einfügen, um eine passende Hintergrundfarbe zu finden.

<form>
<p><font color="#800080">
<input
	type="text"
	name="color"
	size=18>
<input
	type="button"
	value="Color"
	onClick="document.bgColor=
	(this.form.color.value)" name="button">
<input
	type="reset"
	name="cancel"
	value="Reset">
</font></p>
</form>

Ansicht des Farbwählers

Dieser Button zum Wiederherstellen der ursprünglichen Hintergrundfarbe läßt sich mit folgendem Code erzeugen:

<form name"backcolor">
<input
	type="button"
	value="Originalfarbe"
	onClick="resetbackground()" name="button">
</form>

Zusätzlich müssen Sie auch das folgende JavaScript im Kopf der Datei (irgendwo zwischen <head> und </head>) einbinden:

<script language="Javascript">
<!--
  function resetbackground(){
	document.bgColor = "#ffffff";
	}
// -->
</script>

HTML lernen (4): Farben