Tipps für Selbermacher
Viele, viele bunte Farben!
Die Farben, die im Layout einer Website festgelegt werden, bestimmen noch vor allen anderen Merkmalen wie Schriftart oder -größe den Eindruck, den der Besucher erhält. Deshalb ist die Auswahl der Farbtöne – sowohl für Grafiken, als auch für Fensterhintergrund und Texte – so wichtig, dass Sie sich unbedingt näher mit diesem Thema befassen sollten.
Ich möchte in diesem Artikel versuchen, Ihnen grundlegende Entscheidungen und ihre Hintergründe näher zu bringen.
Viele Grafikprogramme und auch die Möglichkeiten von HTML erlauben es Gestaltern, ihre Farbpaletten aus bis zu 16.777.216 Farbtönen zusammenzusetzen. Gegen Kompositionen aus all zu vielen, schrillen Farbkombinationen sprechen jedoch hauptsächlich zwei Gründe. Erstens wirkt Design mit vielen verschiedenen Farben zu unruhig. Besucher solcher Seiten können sich nicht auf das Wesentliche – ob nun Text oder Bild – konzentrieren, sondern werden durch die Kontraste der Farbkanonade abgelenkt. Schrillbunte Seiten mögen zwar im ersten Moment die Aufmerksamkeit erhöhen, lösen jedoch rasch ein Schockgefühl aus, das grundsätzliche Ablehnung bewirkt.
Zum Zweiten können Sie nicht davon ausgehen, dass Ihre Besucher auch alle in den Genuss Ihrer Farbkomposition kommen. Zwar erlauben moderne Displays und Grafikkarten die Darstellung aller sechzehn Millionen, oder gar noch mehr möglicher Farben. Allerdings ist nicht gesagt, dass die Systemeinstellungen auch tatsächlich auf diese hohen Werte gesetzt sind. Zudem gibt es immer noch Displays, die deutlich weniger Farben anzeigen können. Manche Bildschirme stellen bei acht Bit maximaler Farbtiefe lediglich 256 verschiedene Farben dar, Palm PCs sind gar oftmals auf sechzehn Grautöne beschränkt.
Absolute Farbreduzierung
Auch wenn Sie es nicht allen Besuchern Recht machen können oder wollen, sollten Sie aus den beiden genannten Gründen die Verwendung von Farben mit Mäßigung planen. Abgesehen von Fotografien oder sonstigen vielfarbigen Bildern sollten Sie eine Palette von einigen wenigen, vielleicht vier oder fünf Farben verwenden. Denken Sie auch daran, Hintergrund und Schrift kontrastreich voneinander abzusetzen. Nur dann können auch Besucher, die Bilder mit niedrigerer Farbtiefe angezeigt bekommen, trotzdem noch etwas lesen. Mittelgraue Schrift vor hellgrauem Hintergrund mag elegant aussehen; so mancher Betrachter der Seite wird aber nur eine glatte graue Fläche wahrnehmen, auf der Fensterhintergrund und Schrift im gleichen Farbton dargestellt werden. Es muss ja nicht gleich Schwarz auf Weiß sein, aber behalten Sie bei der Farbwahl das Kontrastargument im Hinterkopf.
Vor diesem Hintergrund sollten Sie sich Gedanken darüber machen, welche Farben Sie verwenden wollen. Im HTML-Quelltext können Sie Farben auf drei unterschiedliche Weisen ansprechen. Zum einen stehen Ihnen Farbnamen zur Verfügung. Standardisiert sind die Namen für sechzehn Grundfarben, die von jedem VGA-kompatiblen Bildschirm angezeigt werden können. Beschränken Sie sich auf diese Farben, so können Sie sicher sein, dass annähernd alle Betrachter Ihrer Seiten das sehen, was Sie vorgegeben haben.
Natürlich ist die Auswahl aus nur sechzehn Farben ziemlich mickrig, selbst für Gestalter mit geringen Ansprüchen auf eigenständiges und exklusives Layout. Abgesehen von diesen Standard-Farbnamen gibt es auch eine ganze Menge von Varianten mit aufregenden Bezeichnungen wie »lightgoldenrodyellow« oder »navajowhite«. Ich rate Ihnen aber von der Verwendung solcher Farbnamen ab, da ihre Darstellbarkeit nicht in allen Browsern garantiert ist. Zwar sollten moderne Browser auch die exotischen Farbnamen kennen, zum Standard aber gehören Sie nicht.
Kompletter Farbraum
Wer tiefer ins Farbtöpfchen greifen möchte, sollte statt Farbnamen hexadezimale Farbwerte im Rot-Grün-Blau (RGB) Schema verwenden. Das kingt komplizierter als es ist. Die Farbwerte beginnen stets mit dem # Zeichen. Danach folgen zwei Ziffern oder Buchstaben für den Rotanteil des Farbtons, zwei für seinen Grünanteil und zwei für den Blauanteil. Wenn Sie in Abbildung 1 den Mauszeiger über einen der Farbnamen bewegen, wird der Hex-Code der Farbe eingeblendet.
Jeder einzelne Farbanteil kann zwischen den Werten 00 und FF alle möglichen Werte im Hexadezimalen Zahlensystem annehmen. (Dabei stehen außer den Ziffern 0 bis 9 auch die Buchstaben A bis F zur Verfügung.) 00 entspricht einem Farbanteil von Null, FF einem von 255. Für jeden der drei Farbanteile stehen also 256 Tonwerte zur Verfügung. Jeder komplette Farbwert liegt also zwischen #000000 (schwarz) und #FFFFFF (weiß). Insgesamt stehen demnach 256×256×256, das sind die bereits erwähnten 16.777.216 verschiedenen Farbtöne zur Verfügung.
Der Vollständigkeit halber sei noch erwähnt, dass Sie beim Einsatz von CSS als dritte Möglichkeit den Farbwert auch prozentual oder dezimal im RGB Schema angeben können. Um den Fensterhintergrund etwa in »silver« einzufärben, könnten Sie zum Beispiel folgende Angabe innerhalb des CSS-Bereichs machen:
body {
background-color: rgb(192,192,192);
}
Dabei stehen die drei Zahlen in Klammern hinter »rgb« für die Rot-, Grün- und Blauanteile des gewählten Farbtons. Sie können dezimal zwischen 0 und 255 liegen, oder prozentual zwischen 0% und 100%. Wenn Sie Prozentangabe vorziehen, würde das Beispiel so aussehen:
body {
background-color: rgb(75%,75%,75%);
}
Ich möchte allerdings darauf hinweisen, dass auch mit der zuletzt geschilderten Methode keine anderen Farbtöne erzeugt werden können, als mit der hexadezimalen Darstellung. Es ist also reine Geschmacks- oder Verständnisfrage, welcher der Varianten Sie den Vorzug geben wollen. Bei der Mehrheit der professionellen Gestalter haben sich die hexadezimalen Farbwerte durchgesetzt.
Kommen wir nochmals zurück auf die Auswahl der Farben. Weiter oben in diesem Kapitel haben wir festgestellt, dass sechzehn Grundfarben zu wenig Variationsmöglichkeiten für gehobene Ansprüche bieten. Andererseits sind fast siebzehn Millionen Farben sicher mehr als ausreichend für alles, was Sie vorhaben könnten. Denken Sie nochmals an unsere Feststellung zurück, dass viele Displays die komplette Palette sowieso nicht unterstützen.
Kompromiss: »Netscape Color Cubes«
Als Kompromisslösung kann man eine Palette von 216 Farben ansehen, die seinerzeit von Netscape eingeführt wurde, die oft als »Netscape's 6×6 Color Cubes« bezeichnet und dargestellt wird. Die Auswahl der Farbtöne dieser Palette folgt einem algorithmischen Schema: Für jeden der drei Farbanteile sind nur die hexadezimalen Werte 00, 33, 66, 99, CC, oder FF erlaubt. Mit diesen Werten ergibt sich die folgende Farbpalette:
Wenn Sie sich auf diese Farbtabelle beschränken, profitieren Sie beim Einsatz von CSS von der Möglichkeit einer verkürzten Farbspezifikation. Stimmen nämlich jeweils beide Stellen aller drei Farbanteile im RGB Schema überein – und das tun sie bei allen Elementen der Abbildung 2 –, so brauchen Sie bei der hexadezimalen Darstellung nicht alle sechs Stellen angeben, sondern können Sie auf drei verkürzen. Statt #FFFFFF für weiß reicht also #FFF aus. Diese Möglichkeit sollten Sie verwenden; nicht um Zeit zu sparen, sondern um in Ihren Style Sheets eindeutig darauf hinzuweisen, dass Sie mit den 216 Netscapefarben arbeiten.
Exotenauswahl
Die Einschränkung auf ausgerechnet diese 216 generisch gestaffelten Farbtöne erscheint vielen Gestaltern jedoch zu willkürlich. Für ihr Farbempfinden fehlen wünschenswerte Zwischentöne besonders im Pastellbereich. Deshalb schob Netscape noch eine weitere Palette als Ergänzung nach. Die Auswahl von 120 zusätzlichen Farbtönen stellt im strengen Sinn keine Farbpalette dar, sondern ist eben als Zusatz gedacht. Die ausgewählten Farben erhielten ebenfalls Namen, die an Stelle der hexadezimalen Codes verwendet werden können. Auf diese exotischen Namen habe ich bereits weiter oben in diesem Kapitel hingewiesen. Wenn Sie diese Töne verwenden wollen, sollten Sie nicht auf die Namen, sondern lieber auf die Codes zurückgreifen, um Darstellungsprobleme in manchen Browsern zu vermeiden.
In der folgenden Übersicht finden Sie die benamten Farbtöne in ihrer alphabetischer Reihenfolge. Allerdings stelle ich jeder Farbe auch den hexadezimalen Code links zur Seite. So können Sie vergleichen und außerdem erkennen, ob Ihr Browser Probleme mit der Darstellung dieser teilweise poetischen Farbnamen hat.
Ich gestehe, dass auch ich mich nicht immer an die 216 Netscapefarben aus der Abbildung 2 halte. Allerdings verzichte ich konsequent auf die Farbnamen aus Abbildung 3, obwohl diese ein einfacheres Wiedererkennen der Farbtöne im Code ermöglichen würde. Welche Farbtöne auch immer Sie verwenden wollen, wichtig ist, dass Sie die Anzahl der Elemente Ihrer Palette so klein wie möglich halten und farblich aufeinander abstimmen. Nehmen Sie folgende Daumenregel als Grundsatz: eine Farbe für den Fensterhintergrund, eine zweite für den Text, eine dritte für Links und eine vierte für besuchte Links. Mehr als eine fünfte Farbe als Alternative für besondere Fälle brauchen Sie eigentlich nicht.
Ihre Grafiken stimmen Sie dann auf diese Farbpalette ab. So sind Sie auf dem besten Weg zu einem harmonischen, nicht überfrachteten Farblayout.
