Überblick über die Farbcodierungen in HTML

Von den insgesamt möglichen 16 777 216 Farben wird hier nur eine kleine Auswahl von 216 Farben (den sogenannten "Standardfarben") geboten. Das bedeutet, dass es zu jedem der hier gezeigten Farbtöne noch über 77000 weitere Nuancen gibt, die hier nicht dargestellt werden können, weil die Datei sonst einfach zu groß würde.

Auf dieser Seite wird über Farben nicht nur geredet.

Zweck dieser Seite:

Der Zweck dieser Darstellung besteht darin, die Farben für den Hintergrund von WEB-Seiten sowie für Fonts differenziert auswählen zu können. Der Grund, warum ich diese Übersicht verfasst habe, war der Ärger darüber, dass ich eine solche Seite nirgends im Internet fand. Ursprünglich war die unten stehende Tabelle mit den 216 Farben also nichts weiter als ein Hilfsmittel für mich selber. Da ich sie aber sehr nützlich fand, dachte ich, dass sie vielleicht auch für andere interessant sein könnte, und habe sie deshalb mit ein paar Erläuterungen versehen und ins Netz gestellt. Inzwischen habe ich, lange nachdem ich diese Seite bereits veröffentlich hatte, doch eine sehr gute Seite zu diesem Thema gefunden, aber da sie etwas anders aufgebaut ist, wird meine Seite durch sie wohl nicht gänzlich überflüssig, so dass ich sie weiterhin im Netz stehen lasse.

Die Verwendung von Hintergrundfarben anstelle von Hintergrundbildern bzw. -grafiken bietet zwei Vorteile: Erstens werden Seiten ohne zusätzliche Grafiken schneller geladen, was vor allem den Surfern, die per Modem mit dem Internet verbunden sind, das Leben leichter macht, und zweitens ist jeder Text vor einem einfarbigen Hintergrund (ausreichenden Kontrast vorausgesetzt, s.u.) immer leichter lesbar als vor jeder noch so netten Grafik.

Funktionsweise der Farbcodes:

Die ersten beiden der sechs Ziffern einer Farbcodierung (wobei ich hier auch die hexadezimalen Zahlen A, B, C, D, E und F als "Ziffern" bezeichne) kodieren den Rot-Wert einer Farbe, der von 00 bis FF ansteigen kann, die beiden mittleren Ziffern den Grün-Wert und die letzten beiden den Blauwert. Zur Veranschaulichung gebe ich eine kleine Tabelle, in der man das gut sehen kann (die betreffenden Codes stehen im jeweiligen Feld):

Ansteigen des Rot-Wertes: 000000 330000 660000 990000 CC0000 FF0000
Ansteigen des Grün-Wertes: 000000 003300 006600 009900 00CC00 00FF00
Ansteigen des Blau-Wertes: 000000 000033 000066 000099 0000CC 0000FF

Sind Rot-, Grün- und Blauwert einer Farbe gleich, dann heben sie sich gegenseitig auf und ergeben eine sogenannte "unbunte" (achromatische) Farbe, also eine der möglichen Graustufen zwischen Schwarz und Weiß. Auch hier zur Illustration eine kleine Skala (mit 6 von 256 möglichen Werten):

000000 333333 666666 999999 CCCCCC FFFFFF

Einige Hinweise zur Syntax der Farbcodierung unter HTML finden Sie am Ende dieser Seite.

Bei der Auswahl der Farbe sollten Sie unbedingt bedenken, dass für gute Lesbarkeit des Textes stets ein ausreichender Helligkeitskontrast zwischen der Schrift und dem Hintergrund gegeben sein muss. Es empfehlen sich also vorzugsweise helle Hintergründe. Zugleich muss auch beachtet werden, dass die Farbe des Hintergrundes sich ausreichend von den Farben unterscheiden muss, die bei den meisten Browsern für (verfolgbare und verfolgte) Links eingestellt sind. Blaue und lila Töne sind deshalb als Hintergründe denkbar ungeeignet, es sei denn, man setzt zugleich ausreichend kontrastierende Farben (z.B. gelb und weiß) für die Links fest. Kaum etwas liest sich schlechter als etwa blaue oder lila Links auf schwarzem Hintergrund - eine Qual für jedes Auge, trotzdem viel zu oft im Internet anzutreffen! :-(

Übersicht:

Und nun kommt endlich die versprochene Tabelle mit den 216 Farben. Da es mir vor allem um die hellen Farben geht, die als Hintergründe geeignet sind, habe ich mit den hohen Werten begonnen. Die Tabelle ist also - anders als die obigen Skalen - nicht aufsteigend, sondern absteigend angeordnet.

Viel Spaß beim Aussuchen Ihrer Lieblings-Hintergrundfarbe(n)!

FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00
CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00
99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00
66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00
33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00
00FFFF 00FFCC 00FF99 00FF66 00FF33 00FF00
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00
66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00
33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00
00CCFF 00CCCC 00CC99 00CC66 00CC33 00CC00
FF99FF FF99CC FF9999 FF9966 FF9933 FF9900
CC99FF CC99CC CC9999 CC9966 CC9933 CC9900
9999FF 9999CC 999999 999966 999933 999900
6699FF 6699CC 669999 669966 669933 669900
3399FF 3399CC 339999 339966 339933 339900
0099FF 0099CC 009999 009966 009933 009900
FF66FF FF66CC FF6699 FF6666 FF6633 FF6600
CC66FF CC66CC CC6699 CC6666 CC6633 CC6600
9966FF 9966CC 996699 996666 996633 996600
6666FF 6666CC 666699 666666 666633 666600
3366FF 3366CC 336699 336666 336633 336600
0066FF 0066CC 006699 006666 006633 006600
FF33FF FF33CC FF3399 FF3366 FF3333 FF3300
CC33FF CC33CC CC3399 CC3366 CC3333 CC3300
9933FF 9933CC 993399 993366 993333 993300
6633FF 6633CC 663399 663366 663333 663300
3333FF 3333CC 333399 333366 333333 333300
0033FF 0033CC 003399 003366 003333 003300
FF00FF FF00CC FF0099 FF0066 FF0033 FF0000
CC00FF CC00CC CC0099 CC0066 CC0033 CC0000
9900FF 9900CC 990099 990066 990033 990000
6600FF 6600CC 660099 660066 660033 660000
3300FF 3300CC 330099 330066 330033 330000
0000FF 0000CC 000099 000066 000033 000000

Ursprünglich umfasste meine Tabelle nicht 216, sondern 4096 Farben. Da diese Datei dadurch zu groß und zu unhandlich war, habe ich sie durch diese kleinere Tabelle ersetzt. Falls Sie sich aber doch die ursprüngliche Langfassung ansehen möchten - bitte sehr, hier ist der Link (Achtung, die Datei ist ca. 130 KB groß!).

Zur Syntax der Farbcodierung:

Falls Sie eine der vielen möglichen Farben auf Ihrer Web-Seite als Hintergrund verwenden wollen, müssen Sie folgende Syntax verwenden:
<body bgcolor="#xxxxxx">

Diese Zeile muss unmittelbar nach dem Head der Web-Seite (also nach dem Befehl </head>) folgen.

Wollen Sie auch für die Buchstaben (von Teilen) des Textes eine Farbe festlegen, dann müssen Sie folgende Syntax verwenden:

<font color="#xxxxxx">

Dieser Befehl ist wirksam, bis Sie ihn durch den Befehl </font> wieder aufheben, oder aber bis zum Ende eines Tabellenfeldes.

Viel Erfolg mit Farben wünscht Ihnen Armin Bassarak, der gerne zu dieser Seite erfahren würde.

Zurück zu meiner Homepage.