Farben in CSS

Bislang haben Sie sich nur mit der Struktur von Stylesheets beschäftigt, nicht aber mit den eigentlichen Befehlen. In den nächsten Kapiteln werden viele wichtige Style-Definitionen und die zugehörigen Werte genauer betrachtet. Dieses Kapitel beginnt mit den Möglichkeiten, Farben in CSS zu notieren.

Benannte Farben

In den vorherigen Kapiteln haben Sie die Definition von Farben mit Farbnamen bereits es mehrfach gesehen. Diese sog. benannten Farben bestehen aus dem englischen Farbnamen:

H1 { color: red; }

Die folgenden 16 Farben werden von praktisch allen Browser erkannt und richtig dargestellt:

RGB-Farben

Von Bildbearbeitungsprogrammen wie Photoshop kennen Sie es vielleicht: Farben lassen sich auch durch eine Kombination aus den drei RGB-Werten definieren:

R steht für den Rot-Anteil, G für den Grün-Anteil und B für den Blau-Anteil. Jeder Anteil kann einen Wert von 0 bis 255 annehmen und so ergeben sich 16.777.216 verschiedene Farben (Truecolor).

Numerische RGB-Angabe

Um eine Überschrift rot zu gestalten, lässt sich folgende Angabe benutzen:

H1 { color: rgb(255,0,0); }

Folgende Tabelle stellt die Angaben für die wichtigsten, oben genannten Farben dar:

Sollten einzelne Werte höher oder niedriger als 255 bzw. 0 sein (z.B. rgb(-50,3000,9000)), werden sie auf den nächstmöglichen Wert gestellt (ergibt: rgb(0,255,255)).

Prozentuale RGB-Angabe

RGB-Farben lassen sich auch als Prozentangaben des Rot-, Grün- und Blau-Anteils angeben:

H1 { color: rgb(0%,0%,0%); }     /*schwarz*/
H2 { color: rgb(50%,50%,50%); }  /*grau*/

0% bedeutet dabei keinen Anteil an der jeweiligen Farbe, 100% vollen Anteil:

P.eins { color: rgb(0%,0%,0%); }
P.zwei { color: rgb(20%,20%,20%); }
P.drei { color: rgb(40%,40%,40%); }
P.vier { color: rgb(60%,60%,60%); }
P.fuenf { color: rgb(80%,80%,80%); }
P.sechs { color: rgb(100%,100%,100%); }

Hexadezimale Angabe

Diese letzte Möglichkeit Farben zu notieren, ist die gebräuchlichste Variante.

Hier wird der Anteil der einzelnen Farben durch hexadezimale Zahlen bestimmt. Der gültige Bereich für hexadezimale Zahlen ist 00 bis FF.

Diese Notation kommt daher, dass hexadezimale Zahlen einem 16-System gehorchen. Da es nur zehn Ziffern gibt (0-9), folgen nach der Ziffer 9 die Buchstaben A, B, C, D, E und F.

Die ersten 32 Werte – beispielsweise für den Rotanteil – sehen so aus:

00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F,
10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F

Hexadezimale Kurzform

Bei den hexadezimalen Angaben können Sie in CSS zur Notation eine spezielle Kurzform verwenden, um Tipparbeit zu sparen.

H1 { color: #F00; }  /*rot - statt #FF0000*/
H2 { color: #00F; }  /*blau - statt #0000FF*/
H3 { color: #000; }  /*schwarz - statt #000000*/
H4 { color: #FFF; }  /*weiß - statt #FFFFFF*/
H5 { color: #999; }  /*Grauwert - statt #999999*/
H6 { color: #369; }  /*Blauton - statt #336699*/

Es kann – sofern die beiden Ziffern der Rot-, Grün- und Blau-Werte übereinstimmen – jeweils nur eine Ziffer notiert werden.

Zum Schluss noch einmal die wichtigsten Farben in allen Notationsformen: