Farben

Farben auf dem Computermonitor entstehen durch rotes, grünes und blaues Licht (RGB). Durch die additive Mischung können auf modernen Monitoren 16 Millionen Farbvarianten dargestellt werden. Die Anzeige einer Webseite ist jeweils abhängig, was für Hardware auf dem Computer bzw. was für Einstellungen auf dem Browser installiert sind. Das bedeutet, dass man nicht von einer bestimmten Anzahl verfügbarer Farben auf einem Rechner ausgehen kann. Damit die Wiedergabe der Farben einer Webseite und der dort enthaltenen Grafiken nicht verfälscht wird, sollte bei der Programmierung der Web-Seiten und bei der Bildbearbeitung nach Möglichkeit eine einheitliche Web-Palette benutzen. Anderenfalls könnte es passieren, dass homogene Farbflächen bei Grafiken gerastert oder Farben falsch dargestellt werden.

Websichere Farben
Früher hielt man sich an das Standard-Schema, das von den Browsern optimal interpretiert wird. Die Standard-Palette wurde eingesetzt, da auf den Computern nur 256 Farben anzeigen wurden (8 bit Grafikkarte). Die Standard-Palette bietet 216 Farben. Heute haben die Computer kaum mehr Grafikkarten mit weniger als 24 bit Farbtiefe. Sogar die Mehrheit der Mobiltelefone beherrscht mittlerweile über 16,7 Millionen Farben. Folglich sind websichere Farbcodes ein Dinosaurier mit bemerkenswertem Bekanntheitsgrad. Trotz allem werden die Farbcodes der websicheren Farben heute noch überdurchschnittlich oft verwendet, da die Farbpalette eine übersichtliche Orientierungshilfe bei der Zuordnung von Farbtönen bietet.

Checkliste Webfarben:
- max. fünf unterschiedliche Farbtöne wählen
- Monochrome Farbpalette auswählen oder mit einer komplementären Farbe als Akzent arbeiten
- drei Grundfarben: Basisfarbe (geringe visuelle Kraft, Unterstützung anderer Farben), Hauptfarbe (grosse visuelle Kraft, definiert Kommunikation), Highlight-Farbe (Elemente hervorheben, oft Kontrast zu anderen Farben)
- Farbe von Schrift und Hintergrund mit genügend Kontrast wählen
- Farbsymbolik beachten (z.B. Rot Signalfarbe) / Achtung: kulturelle und länderspezifische Unterschiede (Beispiel Post: Post CH, Mail UK, Mail USA)


Farbkonzepte entwickeln

Ein stimmiges Farbkonzept ist entscheidend für den Erfolg einer Website. Farben transportieren Emotionen und werden unmittelbar und unterbewusst wahrgenommen. Anhand eines Moodboards entsteht bereits ein erstes Stimmungsbild in der Planungsphase. Mittels eines Farbschemas können Farbkonzepte erstellt werden. Hierbei gibt es die Möglichkeit von folgenden Farbzusammenstellungen:
- monochrome Farben (einzelner Farbton kombiniert mit Sättigungs- und Helligkeitsstufen) / Beispiel monochrome Website
- Komplementärfarben (im Farbkreis 180° gegenüberliegend) / Beispiel starker Kontrast
- Triaden (drei Farben im Farbkreis im gleichen Winkelabstand zueinander) / Beispiel Vielfarbigkeit


Farbbezeichnungen CSS

Es gibt im Web verschiedene Möglichkeiten Farben zuzuordnen:

  • Englische Farbbezeichnung: red
  • Hexadezimalcode: #FF0000
  • RBG-Farbmodel: RGB(255,0,0)


englische Farbbezeichnung
Die einfachste Möglichkeit den Schriften sowie Hintergrund Farben zuzuordnen, ist diese mit dem englischen Namen im CSS zu bezeichnen (z.b. color=silver, color=red, color=lightgreen).
p { color: yellow; }

<p>gelbe Schriftfarbe</p>
 

Hexadezimalcode
Beim Webdesign werden die einzelnen Farbanteile oft im Hexadezimalsystem wiedergegeben, statt 0 bis 255 (siehe RGB) wird 0 bis FF verwendet, wobei 00 am wenigsten und FF am meisten intensiv ist.
- die zwei ersten Zahlen/Buchstaben stehen für die Intensität der roten Farbe
- die dritte und vierte Zahl/Buchstabe stehen für die Intensität der grünen Farbe
- die fünfte und sechste Zahl/Buchstabe stehen für die Intensität von blau

"Reines" Rot hätte damit den Code #FF0000, "reines" Blau den Code #0000FF. Schwarz wäre #000000, Weiß #FFFFFF. Grautöne erhält man, wenn alle drei Farben den gleichen Anteil haben (z.B. #555555 oder #A1A1A1).

RGB-Farbmodell
Der RGB-Farbraum wird für selbstleuchtende Systeme benutzt (TV, Monitore). Beim RGB-Farbmodell werden die drei Grundfarben Rot, Grün und Blau gemischt (additives Farbmodell - die Farben werden zueinander addiert: Je höher die Farbwerte, desto heller). Alle drei Farben zusammen ergeben Weiß. Man stelle sich drei Scheinwerfer vor, die aus verschiedenen Richtungen auf einen Punkt strahlen - in der Mitte ergibt sich Weiß. Jede Farbe kann einen Wert zwischen 0 und 255 annehmen. Nimmt man den höchsten Wert, erhält man die reine Farbe. So besteht Rot dann aus den Anteilen 255 Rot, 0 Grün und 0 Blau. Weiß ist 255,255,255 und Schwarz das Gegenteil 0,0,0. Damit können insgesamt 256*256*256 = 16.777.216 (16,7 Mio.) Farben erzeugt werden.

HSL (hue, sauration, ligthness)
Im HSL-Farbraum können Farben nach Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) angeordnet werden. Auch diese Farbbezeichnung gehört neben den Anderen seit CSS3 zum Standard. Allerdings haben ältere Browser noch Probleme den hsl-Code zu lesen, weshalb die anderen Varianten noch bevorzugt werden sollten.

Vorherige Seite: bilderundgrafiken Nächste Seite: Schriften