Der Umgang mit Webfarben gehört natürlich zum Handwerkszeug und ist gar nicht so kompliziert, wie es auf den ersten Blick anmuten mag. Kurze Einleitung: grundsätzlich unterscheidet man bei Farben zwei Farbsysteme: Additive Farbmischung und Subtraktive Farbmischung. Bei Licht-Farben, die entweder mit Scheinwerfern oder auf Bildschirmen dargestellt werden handelt es sich um Additive Farbmischung. Das heißt grob gesagt „Rot + Grün + Blau = Weiß„.

Bei allen ‚physischen‘ Farben, die man beispielsweise auf eine Oberfläche aufbring, spricht man von der subtraktiven Farbmischung.

Der Farbraum der Substraktiven Farben verhält sich anders, als der der Additiven Farben. Anstelle von Rot, Grün und Blau (RGB) haben wir es hier mit Cyan, Magenta und Gelb (Yellow) zu tun: CMYK. Das „K“ steht dabei für „Key“, die Farbtiefe – also den Schwarzanteil. Grob gesagt bedeutet dies: „Cyan + Magenta + Gelb = Schwarz„.

Für alle, die tiefer in das Thema der Druck-Farben einsteigen möchten hier ein Buch-Tipp: 4 Farben ein Bild: Grundwissen für die Farbbildbearbeitung von der Eingabe bis zum Proof mit Photoshop, QuarkXPress, InDesign und PDF/X (X.media.press) (bei amazon.de).

Webfarben in HTML und CSS – RGB vs. HEX

Mithilfe von CSS lassen sich auch im Web Farben definieren – allerdings funktioniert das bei Webfarben ganz anders, als bei Druckfarben. Ein gutes Beispiel für den Unterschied ist die Farbe Cyan. Eigentlich gibt es keine „Lichtfarbe“, die der Druckfarbe Cyan entsprechend würde. Trotzdem gibt es eine Webfarbe „Cyan“ mit dem HEX Code #00FFFF und den RGB Werten 0, 255, 255. Auf dem Bildschirm ähnelt dieses HTML Cyan dem gedruckten Farbton tatsächlich – beide Farben haben aber rein technisch betrachtet nichts miteinander zu tun.

Im HTML Code bzw. im CSS Code lassen sich Farben also als RGB-Wert oder auch als sogenannten HEX-Wert (HEX Color Code) angeben. Manchmal werden die im Webdesign verwendeten Farben auch gerne HTML Farben oder CSS Farben genannt – passender wäre der etwas allgemeiner gehaltene Begriff Webfarben. Beiden Systemen ist gemein: die Farbe wird aus einer Kombination von Rot, Grün und Blau gebildet – daher kommt auch die Abkürzung RGB. Über jeweils einen Wert wird der Rot-, der Grün- und der Blau-Anteil der gewünschten Farbe angegeben – zusammen ergeben sie dann den gewünschten Farbton.

Die Zusammensetzung von solchen RGB Codes („RGB Farben“) ist relativ einfach zu erklären. Die ersten drei Zahlen stehen für den Rot-, Grün-, Blauanteil. Für die Farbintensität stehen je Farbton 8 Bit oder 256 Stufen zur Verfügung. Der Wert wird als Dezimalzahl angegeben – Null „0“ ist dabei der niedrigste Wert und „255“ dementsprechend der höchste. Bei einem RGBa Farbraum hat man zusätzlich noch den Alphakanal zur Verfügung, um die Transparenz eines Farbtons oder einer Farbfläche zu bestimmen.

Beim HEX Color Code („HEX Farben“) ist es hingegen ein bisschen anders. Auch hier hat man im Prinzip 8 Bit bzw. 255 Stufen je Farbton zur Auswahl – also 255 Farbtöne je Grundfarbe Rot, Grün und Blau. Die Ziffer „00“ hat dabei den niedrigsten Wert, der Letter „FF“ den höchsten Wert. Der gewünschte Farbton wird dann nicht als Dezimalzahl, sondern als Hexadezimalzahl angegeben. Anschliessend werden die drei Werte zu einer sechstelligen Zahlen- und Buchstabenkombination zusammengefügt – dem HEX Color Code.

Hier nun ein paar Tabellen mit jeweiligen HEX-Werten und einem Farbfeld, das den jeweiligen Farbton repräsentiert: