Wie man Farben bestimmt

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Jeder CSS-Eigenschaft, die Farbwerte akzeptiert, kann man mit einer der folgenden fünf verschiedenen Methoden Farbe zuweisen:

  • Farbnamen
  • Systemspezifische Farbwerte
  • RGB-Dezimalwerte
  • RGB-Hexadezimalwerte
  • RGB-Prozentwerte

Der gebräuchlichste Weg, eine Farbe anzugeben, ist über ihren reservierten Namen. Obwohl HTML und CSS nur 16 »offizielle« Bezeichnungen unterstützen, kann nahezu jeder moderne Browser eine Palette von insgesamt 140 Farbnamen interpretieren, so wie es von Netscape in den Anfängen des Internets vorgeschlagen wurde. (Anmerkung: Entgegen der Definition von 16 Standard-Farbnamen verlangt das W3C in seinen Richtlinien die Verwendung von Zahlenwerten anstatt Farbnamen.)

Eine vollständige Auflistung mit den dazugehörigen RGB-Werten finden Sie unter CSS-Farbreferenz. An dieser Stelle nennen wir nur die 16 offiziellen Farbnamen:

  • black (schwarz)
  • white (weiß)
  • aqua (hellblau)
  • blue (blau)
  • fuchsia (pink)
  • gray (grau)
  • green (grün)
  • lime (limonengrün)
  • maroon (kastanienbraun)
  • navy (marineblau)
  • olive (olivgrün)
  • purple (purpurrot)
  • red (rot)
  • silver (silber)
  • teal (türkis)
  • yellow (gelb)

Ich möchte Sie weder dazu ermutigen noch Ihnen davon abraten, die 124 übrigen Farbnamen in CSS einzusetzen. Auf der einen Seite werden sie in keiner offiziellen W3C-Empfehlung erwähnt. Damit besteht die Gefahr, dass zukünftige Browserversionen sie nicht mehr unterstützen. Außerdem kann nicht vorhergesehen werden, wie diese Farben mit anderen Browsern oder Betriebssystemen dargestellt werden, außer man testet es. Ehrlich gesagt, sehe ich aber kein wirkliches Risiko, und ich benutze diese Farbnamen sehr oft. Sie sind einfach der anschaulichste Weg, Farben im Quelltext zu beschreiben, und geben mir schon eine Vorstellung der Farbwirkung, bevor meine Seite im Browser sichtbar wird.

Neben den beschreibenden Farbnamen kann man mit CSS auch auf 28 systemspezifische Farbnamen zurückgreifen. Diese Bezeichnungen, etwa AppWorkspace, beziehen sich auf verschiedene Teile der grafischen Benutzerschnittstelle (GUI) des Betriebssystems. Jede dieser Farben wird vom verwendeten Betriebssystem und möglicherweise von den Benutzereinstellungen bestimmt. Mit diesen Farbnamen können Sie die Schnittstellen zu den GUIs der Benutzer erzeugen. Eine vollständige Liste der systemspezifischen Farbnamen finden Sie unter CSS-Farbreferenz.

Alle Farben auf einem Monitor werden durch die Mischung der drei Grundfarben Rot, Grün und Blau (in unterschiedlicher Intensität) erzeugt. Mit diesen drei Farben lässt sich auf zwei unterschiedliche Arten eine endlos scheinende Skala von Farbtönen festlegen:

  • Geben Sie in der rgb-Funktion drei Werte für die Grundfarben an, getrennt durch Kommata.
  • Oder als hexadezimale Werte, drei- oder sechsstellig, mit dem vorangestellten Hash-Symbol (#).

Die folgenden Eigenschaftsdefinitionen führen alle zu dem gleichen Ergebnis, einer Zuweisung der Farbe Blau:

color: blue;
color: rgb(0, 0, 255);
color: rgb(0%, 0%, 100%);
color: #0000ff;
color: #00f;

In der ersten Eigenschaft wird die Farbe einfach mit ihrem Namen definiert, blue gehört zu den 16 vom W3C unterstützten Farbnamen und kann bedenkenlos eingesetzt werden. Die zweite Eigenschaft wird mit einem dezimalen RGB-Wert festgelegt, der Anteil von Rot und Grün wird mit null definiert (Rot- und Grünanteile fehlen), Blau erhält den maximalen Anteil von 255. Die dritte color-Eigenschaft ist identisch mit der zweiten, das Mischungsverhältnis wird hier allerdings mit Prozenten angegeben. Etwas anders als die anderen Eigenschaften sieht die vierte Variation aus. Hier wird das Mischungsverhältnis hexadezimal formuliert – die ersten zwei Ziffern stehen für den Rotanteil, die zweiten für den Grünanteil und die dritten für den Blauanteil. Sind die jeweiligen Ziffern pro Farbanteil gleich, kann man die Farbe wie in der fünften color-Eigenschaft auch mit einem dreistelligen Hexadezimalwert angeben. Schwarz wird durch die Angabe von #000000 oder kurz #000 repräsentiert und Weiß durch #ffffff bzw. #fff. Wenn Sie lieber die rgb-Funktion benutzen, müssen Sie für Schwarz rgb(0, 0, 0) und für Weiß rgb(255, 255, 255) oder auch rgb(100%, 100%, 100%) angeben.

Die Vorteile von Farbnamen haben wir schon weiter oben besprochen. Doch RGB-Werte haben ebenfalls ihre Vorzüge. Wenn man einen Farbwert anschaut, oder noch einfacher, wenn man zwei Farbwerte miteinander vergleichen kann, sieht man meistens sofort, wie diese Farbe verändert werden muss, damit der gewünschte Effekt erzielt wird. Wenn Sie beispielsweise eine Farbe mit #ff7f50 definiert haben und dann der Meinung sind, dass der Blauanteil größer sein sollte, brauchen wir nur den Wert der letzten beiden Ziffern erhöhen, etwa auf #ff7f70.

Mit der Methode, die Mischungsverhältnisse zahlenmäßig anzugeben, stehen viel mehr Farbabstufungen zur Verfügung. Insgesamt gibt es für jede Grundfarbe 256 Abstufungen, was insgesamt über 16,7 Millionen Kombinationen von Rot, Grün und Blau möglich macht. Ebenso kann man mit RGB-Werten präziser arbeiten. Stimmt etwa der Farbton einer Schrift noch nicht hundertprozentig, kann man ihn graduell verändern, indem man einfach den Anteil von Rot, Grün oder Blau in kleinen Stufen erhöht oder verringert.

Gerade wegen der großen Flexibilität und Kontrolle über die Farbgestaltung kommen im professionellen Webdesign durchweg RGB-Werte zum Einsatz. Mit Grafikprogrammen können Sie den hexadezimalen Code einer Farbe herausfinden und diese Werte dann in Ihren CSS-Dateien verwenden. Doch für Entwickler wie mich, für die es nicht auf die kleinste Farbnuance ankommt, reichen die 140 Farben der Namenspalette vollkommen aus. Warum also mit Kanonen auf Spatzen schießen?

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg