Hexadezimale Farbangaben

Diese Art, Farben anzugeben, kommt ursprünglich von HTML her. Vergangene HTML-Versionen, in denen es zahlreiche, heute obsolete Attribute zur physischen Formatierung gab, boten zwei Möglichkeiten an, Farbwerte zu notieren. Die eine bestand in vordefinierten Farbnamen, die andere in dem hier vorgestellten Format.

Beispiel

h1 { 
   color: #20A020; 
   background-color: #F4E840; 
}

Erläuterung

In dem Beispiel wird für Überschriften 1. Ordnung (h1-Element) eine grüne Schriftfarbe und eine hellgelbe Hintergrundfarbe festgelegt.

Das Format der hexadezimalen Farbdefinition ist 6stellig und hat das Schema: #RRGGBB.
Zunächst notieren Sie also ein Gatterzeichen #. Dahinter folgen 6 Stellen für die Farbdefinition. Die ersten beiden Stellen stellen den Rot-Wert der Farbe dar, die zweiten beiden Stellen den Grünwert, und die letzten beiden Stellen den Blau-Wert.

Lesart der Hexadezimalnotation von Farbangaben

Jede der Ziffern ist eine hexadezimale Ziffer. Hexadezimale Ziffern sind:

0 (entspricht dezimal 0)
1 (entspricht dezimal 1)
2 (entspricht dezimal 2)
3 (entspricht dezimal 3)
4 (entspricht dezimal 4)
5 (entspricht dezimal 5)
6 (entspricht dezimal 6)
7 (entspricht dezimal 7)
8 (entspricht dezimal 8)
9 (entspricht dezimal 9)
A (entspricht dezimal 10)
B (entspricht dezimal 11)
C (entspricht dezimal 12)
D (entspricht dezimal 13)
E (entspricht dezimal 14)
F (entspricht dezimal 15)

Eines hexadezimale Ziffer kann also 16 Zustände haben. Für jeden Farbwert (Rot, Grün, Blau) stehen 2 Ziffern zur Verfügung. Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert und insgesamt 256³ = ca. 16,7 Millionen unterschiedliche Farben. Das Format deckt damit das volle RGB-Farbschema ab.

Anstelle der Großbuchstaben bei den hexadezimalen Ziffern A bis F dürfen Sie auch Kleinbuchstaben a bis f verwenden.

Bei doppelten Ziffern pro Farbwert dürfen Sie auch nur eine davon notieren. So sind etwa auch Angaben wie #04A oder #ffe erlaubt. Diese bedeuten in Wirklichkeit #0044AA bzw. #FFFFEE.

Farbangaben mit dem rgb-Format

Das Schema zu dieser weiteren Möglichkeit, Farben in CSS zu definieren, lautet rgb(rrr,ggg,bbb).

Beispiel

body  { 
   background-color: rgb(51,0,102); 
}
blockquote  { 
   border-left: dotted 5px rgb(60%,90%,75%);
}

Erläuterung

Im Beispiel erhält die gesamte Webseite mit background-color eine blauviolette Hintergrundfarbe, und Blockzitate erhalten mit border-left links einen gepünktelten, 5 Pixel dicken, grünlichen Rahmen.

Der Ausdruck rgb(…) ist dabei immer gleich. Innerhalb der Klammern müssen drei Dezimalwerte oder drei Prozentwerte stehen, durch Kommata voneinander getrennt. Für alle drei Werte sind entweder absolute Zahlen zwischen 0 (kein Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) oder Prozentwerte von 0% (kein Anteil an der entsprechenden Farbe) bis 100% (maximaler Anteil der entsprechenden Farbe) erlaubt. Der erste Farbwert bedeutet den Rot-Anteil (r), der zweite Farbwert den Grün-Anteil (g), und der dritte den Blau-Anteil (b) der gewünschten Farbe.

Anwender-relative Farbwörter (Systemfarben)

Seit CSS 2.0 gibt es die Möglichkeit, anwender-relative Farbwörter zu verwenden, hinter denen sich Farben verbergen, die der Anwender an seinem Rechner als Arbeitsumgebung eingestellt hat. Auf diese Weise können Sie zur Gestaltung Ihrer Inhalte Farben verwenden, die auf die Bildschirmumgebungsfarben des Anwenderrechners abgestimmt sind, ohne dass Sie diese Farben kennen. Die erlaubten anwender-relativen Farbwörter werden im Folgenden erläutert.

div.tooltipp { 
   color: InfoText; 
   background-color: InfoBackground; 
}

Erläuterung

Im Beispiel wird für eine CSS-Klasse namens tooltipp festgelegt, dass div-Bereiche mit class="tooltipp" als Hintergrund- bzw. Vordergrund die Farben erhalten, die der Anwender in seiner grafischen Benutzeroberfläche für Tooltipp-Fenster eingestellt hat.

Nachfolgende Tabelle listet Farbwörter dieser Art auf.

Farbnamen

Seit CSS 1.0 besteht die Möglichkeit, für Standard-VGA-Farben auch entsprechende Farbnamen anzugeben. Da in dieser Palette die Farbe Orange fehlt, wurde diese in CSS 2.1 noch als Extra-Farbe mit aufgenommen.

Beispiel

body { 
   color: black; 
   background-color: white; 
}

Das Beispiel verpasst dem Dokument einen weißen Hintergrund und schwarze Schrift.

Nachfolgende Tabelle listet die Farbnamen und die ihnen entsprechenden Hexadezimalangaben auf.

Da Farbnamen sehr praktisch und menschenfreundlich sind, hat der Netscape-Browser bereits frühzeitig ein umfangreicheres Set von insgesamt 120 Farbnamen entwickelt. Diese Farbnamen gehören zwar nicht zum CSS-Standard, werden aber von allen modernen Browsern erkannt und erzeugen zumindest keine syntaktischen Fehler in CSS:

Netscape-Farbpalette

Ebenfalls aus der Frühzeit des Web und ebenfalls von Netscape stammt das Konzept der reduzierten Farbpalette, das auf Anzeigegeräte mit maximal 256 Anzeigefarben zugeschnitten ist. Für heutige PCs und Monitore ist dieses Thema längst nicht mehr relevant. Doch durch tragbare Kleingeräte als Web-Zugangsgeräte ist die Netscape-Farbpalette wieder interessant geworden.

Es handelt sich um 216 als plattformübergreifend deklarierte Farbwerte, die in CSS in Form der weiter oben beschriebenen Notationsformen #RRGGBB oder rgb(rrr,ggg,bbb) verwendet werden können. Nachfolgend werden die erlaubten Farbwerte dieser Palette in Hexadezimalschreibweise aufgelistet. Erkennbar ist, dass immer nur die RGB-Werte mit den Hexadezimalwerten 00, 33, 66, 99, CC und FF zum Einsatz kommen. Das entspricht den Dezimalwerten 51, 102, 153, 204 und 255. Dass so nur 216 Farben zustande kommen und nicht 256, ist Absicht. 40 Farben sollten auf 256-Farben-Displays für System- und Umgebungsfarben übrig bleiben.

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.