Im vorigen Abschnitt haben wir als Werte für die beiden Farbeigenschaften jeweils die englischen Namen für die gewünschten Farben angegeben. Tatsächlich ist die Auswahl an solchen Farbnamen in CSS sehr groß. Trotzdem reichen die Abstufungen für viele Anwendungen nicht aus und es kann sich auch nicht jeder alle Farbnamen merken. Viel praktischer ist da die Angabe von Farbcodes. Mit diesen können wir uns selbst die Farben so "mischen", wie wir sie haben wollen!

Ein Farbcode besteht immer aus drei Zahlen, welche den Rot-, Grün- und Blauanteil der Farbe angeben (RGB-Modell). Für die Zahlen verwendet man aber meist nicht das sonst übliche Dezimalsystem, sondern das Hexadezimalsystem. Bei diesem gibt es nicht nur unsere zehn Ziffern 0-9, sondern noch die Buchstaben A-F, welche für die Zahlen 10 (A) bis 15 (F) stehen. Insgesamt stehen uns hier also 16 Zeichen pro Stelle zur Verfügung. Für jeden der drei Farbanteile benutzen wir zwei Stellen. Zusammen erhalten wir dann einen sechsstelligen Code, dem noch ein # vorangestellt wird, z.B. #D0110F.
Dieses Beispiel weist einen hohen Rotanteil auf (als Dezimalzahl wäre das 13*16+0*1=208) und geringe Grün- und Blauanteile, wobei der Grünanteil (1*16+1*1=17) noch ein bisschen größer ist als der Blauanteil (0*16+15*1=15). Die Werte für die Farbanteile liegen immer zwischen 0 und 255.

Das Farbmischen auf diese Weise lässt sich leicht üben und wir können uns das Ergebnis ja immer gleich im Browser anzeigen lassen. Wenn man aber mal eine bestimmte Farbe haben will oder von einer Farbe ausgehend verschiede Schattierungen davon bekommen möchte, dann gibt es dafür zahlreiche Onlinetools. Außerdem ist die Anzeige von Farbcodes auch in Bildbearbeitungsprogrammen möglich. Wenn man also ein Bild vorliegen hat und eine bestimmte Farbe daraus genau so auch auf der Website verwenden will, dann kann man das Bild im Bildbearbeitungsprogramm öffnen und sich dort den Farbcode der Farbe anzeigen lassen.

Aufgaben

  1. Färbe Elemente in dem HTML-Dokument aus dem vorigen Abschnitt nun mit Hexadecimal-Farbcodes ein und sieh dir das Ergebnis an. Versuche auch mal einen gewissen Farbton zu treffen, den du haben möchtest.
  2. Wie lassen sich Graustufen mit solchen Farbcodes darstellen?