- Internet
Webfarben
Webfarben sind Farben, die bei der Gestaltung von Websites verwendet werden. Dabei bieten die Spezifikationen der unterschiedlichen Webbrowser die Möglichkeit, die darzustellenden Farbvorgaben hexadezimal oder dezimal zu definieren oder die browsereigenen Farbnamen zu nutzen.
Webentwickler·innen bestimmen im modernen Webdesign in der Regel eine Farbe innerhalb eines Stylesheets (CSS)1). Dazu sind folgende Notierungen bzw. Farbräume zulässig:
Hexadezimale Farbdefinition
Das System der hexadezimalen Farbdefinition wird in vielen Bereichen des computergestützten Designs – so auch im Programmcode von HTML und CSS – verwendet. Bei dieser Art der Farbdefinition wird eine Farbe durch drei aufeinander folgende Hexadezimalzahlen dargestellt, die jeweils für eine Grundfarbe des RGB-Farbraums stehen. Üblich ist die hexadezimale Farbdefinition in sechsstelliger Form, also eine Aneinanderreihung von drei jeweils zweistellig geschriebenen Hexadezimalzahlen nach dem Schema »#RRGGBB«.
Bei dieser Art der Farbdefinition beruht das Ergebnis der gewünschten Farbe auf der additiven Farbmischung. Die Werte der drei Grundfarben reichen dabei von »0« (dezimal) bzw. »00« (hexadezimal) für keine Farbe bis »255« (dezimal) bzw. »FF« (hexadezimal) für eine maximale Farbsättigung. So ergibt der hexadezimale Code »#FFFF00« (RGB = 255,255,0) die Farbe Gelb, weil diese aus Rot »#FF0000« (RGB = 255,0,0) mit Grün »#00FF00« (RGB = 0,255,0) gemischt wird.
Musterbeispiel einer HEX-Farbdefinition in einer CSS-Datei
| p { color: #F00; } /* #rgb */ (verkürzte Schreibweise) |
| p { color: #FF0000; } /* #rrggbb */ |
Beispiele für Hexadezimale Farbcodes
| HEX | ** | R | G | B | Farbe | Farbname |
|---|---|---|---|---|---|---|
| #000000 | #000 | 0 | 0 | 0 | Schwarz | |
| #FFFFFF | #FFF | 255 | 255 | 255 | Weiß | |
| #FF0000 | #F00 | 255 | 0 | 0 | Rot | |
| #FFFF00 | #FF0 | 255 | 255 | 0 | Gelb | |
| #00FFFF | #0FF | 0 | 255 | 255 | Cyan | |
| #FF00FF | #F0F | 255 | 0 | 255 | Magenta | |
| #4080FF | – | 64 | 128 | 255 | Himmelblau | |
| #E48B09 | – | 255 | 139 | 0 | Orange | |
| #9EE094 | – | 158 | 224 | 148 | Hellgrün | |
| #4C4C4C | – | 76 | 76 | 76 | Dunkelgrau* | |
| #D4D4D4 | – | 212 | 212 | 212 | Hellgrau* | |
| * nur wenn alle drei Kanäle den gleichen Farbwert besitzen, erhält man ein »reines« Grau ** Erlaubte verkürzte Schreibweise, wenn jedes HEX-Farbenpaar aus gleichen Werten besteht |
||||||
Andere Farbtiefen
Neben der üblichen 6-stelligen Angabe der Farbwerte sind auch 3-, 9- und 12-stellige Farbwertangaben möglich. Moderne Betriebssysteme unterstützen zwar alle vier Möglichkeiten, auch wenn in der Praxis die 9- und 12-stelligen Farbwertangaben auf 6-stellige reduziert werden, da kaum eine Grafikhardware in der Lage ist, derartige Farbtiefen zu verarbeiten.
Anwendung der verschiedenen Farbtiefen
| HEX-Code | Farbtiefe | Anzahl der darstellbaren Farben |
|---|---|---|
| #RGB | 12 Bit | 212 = 4.096 |
| #RRGGBB | 24 Bit | 224 = 16.777.216 |
| #RRRGGGBBB | 36 bit | 230 = 1.073.741.824 |
| #RRRRGGGGBBBB | 48 Bit | 248 = 281.474.976.710.656 |
RGB-Farbraum
Der zugrunde liegende Standard für die Farbkoordinaten ist sRGB (siehe auch Farbraum). Die Farben des RGB-Farbraums können in der CSS-Syntax wie folgt definiert werden:
Musterbeispiel einer RGB-Farbdefinition in einer CSS-Datei
| p { color: rgb(255, 0, 0); } /* ganzzahlig von 0 bis 255 */ |
| p { color: rgba(64, 0, 0, 0.7); } /* 0.7 = 70% Deckkraft – spezifiziert in CSS 3 */ (a = Alphakanal) |
| p { color: rgb(100%, 0%, 0%); } /* prozentuell von 0 bis 100 */ (kaum gebräuchlich) |
HSL-Farbraum
Die Farben nach dem Modell des HSL-Farbraumes können ab CSS 3 wie folgt notiert werden:
Musterbeispiel einer HSL-Farbdefinition in einer CSS-Datei
| p { color: hsl(120, 100%, 50%); } /* Grün */ |
| p { color: hsla(120, 100%, 50%, 0.7); } /* Grün mit 70% Deckkraft */ |
CMYK-Farbraum
Ab CSS 3 können die Farben außerdem nach dem CMYK-Farbmodell angegeben werden. Dabei entspricht der Wert »1« einem Farbauftrag auf Papier von 100%, der Wert »0.5« von 50%.
Musterbeispiel einer CMYK-Farbdefinition in einer CSS-Datei
| p { color: cmyk(0.0, 0.95, 1, 0.0); } /* Rot */ (entspricht im Druckbereich den Farbwerten 0/95/100/0) |
Rückwärtskompatibilität
Da nur neuere Webbrowser die rgb(a)-, hsl(a)- und cmyk-Notierung interpretieren können, sollten Webentwickler·innen in diesem Fall eine »Fallback-Farbe« definieren, damit die gewünschte Farbe auch auf älteren Computersystemen sicher angezeigt wird.
Musterbeispiel einer Fallback-Lösung in einer CSS-Datei
| p { |
| color: cmyk(0.0, 0.95, 1, 0.0); /* Wird von modernen Browsern interpretiert */ color: #FF0000; /* Rückwärtskompatibilität */ oder color: red; |
| } |
Benannte Farben
Es gibt einige Standards, die den hexadezimalen Farbwerten einen Farbnamen zuordnen. So lassen sich beispielsweise vordefinierte englische Farbnamen anstelle der Anteilswerte im RGB-Farbraum angeben. Die Verwendung solcher Farbnamen erleichtert es den Designer·innen, die Farbtöne nach eigener Wahrnehmung an Stelle der unhandlichen hexadezimalen Notierung zu wählen. Abhängig vom jeweiligen Standard ist die Anzahl an Farbnamen begrenzt, da diese naturgemäß bereits vorgegeben sein müssen. Farbnamen werden immer in ihrer englischen Bezeichnung verwendet.
HTML 4 / VGA Standard
Dieser Standard enthält die 16 Grundfarben eines jeden Betriebssystems für Computer. Dabei handelt es sich um vordefinierte Farben bzw. Farbnamen, die unabhängig von einer Grafikkarte immer angezeigt werden können. Das bedeutet beispielsweise in der praktischen Anwendung, dass ein Computer, der im sogenannten »abgesicherten Modus« hochgefahren wird (ohne Treiber, Netzwerk, Grafikkarte etc.), trotzdem eine farbige Anzeige mit diesen 16 Farben ermöglicht.
Beispiele für Hexadezimale Farbcodes
| Farbname | Farbcode | Farbe | Farbe | Farbcode | Farbname |
|---|---|---|---|---|---|
| Silver | #C0C0C0 | #000000 | Black | ||
| Red | #FF0000 | #800000 | Maroon | ||
| Lime | #00FF00 | #008000 | Green | ||
| Yellow | #FFFF00 | #808000 | Olive | ||
| Blue | #0000FF | #000080 | Navy | ||
| Fuchsia | #FF00FF | #800080 | Purple | ||
| Aqua | #00FFFF | #008080 | Teal | ||
| White | #FFFFFF | #808080 | Gray |
Die dunklen Farben ergeben sich durch eine (nahezu) Halbierung des Rot-, Grün- und Blauwerts von #FF auf #80 (Ausnahme: Schwarz und Silber).
CSS 3
Die CSS 3 Spezifikation des World Wide Web Consortium2) (W3C) definiert aus der Liste des X Window System (X11) – einem Standardbaukasten und dem Protokoll zum Bau einer grafischen Benutzeroberfläche für das Betriebssystem eines Computers – eine Liste von 140 Farben, die sich im Wesentlichen aus den ca. 120 Farben des ursprünglichen Netscape-Browsers3) und den 16 VGA-Farben (siehe oben) zusammensetzt.
In dieser Spezifikation kann statt »Gray« auch die Schreibweise »Grey« verwendet werden. Darüber hinaus repräsentieren »Aqua« und »Cyan« sowie »Fuchsia« und »Magenta« jeweils dieselbe Farbe.
Die Farben »Bisque« (#FFE4C4) und »BlanchedAlmond« (#FFEBCD) stammen nicht aus dieser Spezifikation.
Herstellerabhängige Farbnamen
Zusätzlich haben die meisten Hersteller von Webbrowsern eine Vielzahl von eigenen Farbnamen definiert. Bei diesen ist aber nicht sichergestellt, dass die Webbrowser der jeweils anderen Hersteller diese Farbnamen auch richtig interpretieren können.
Websichere Farben
Mit Beginn der grafischen Gestaltung von Websites wurde eine Gruppe von Farben als »websichere Farbpalette« definiert. Diese Farbpalette wurde Mitte der 1990er Jahre entwickelt, als die Grafikkarten der Computer in der Regel nur die 16 Farben des VGA-Standards (siehe oben) oder maximal 256 Farben4) anzeigen konnten.
Durch diesen technischen Umstand war der Spielraum für eine gute Farbgestaltung von Websites zwangsläufig eingeschränkt. Unzureichend kalibrierte Bildschirme und die subjektive Farbwahrnehmung der Betrachter·innen trug ebenfalls dazu bei, dass das Ziel von Farbgleichheit nicht erreicht werden konnte.
Daher schlug Lynda Weinmann5) als erste eine Farbpalette vor, deren Ziel es war, eine einheitliche Farbdarstellung auf Computersystemen mit unterschiedlich eingestellten Farbtiefen zu erreichen. Ihr Konzept beruhte auf sechs verschiedenen Farbtönungen jeder der drei Grundfarben des Bildschirms (RGB). Kombiniert man diese in allen möglichen Varianten miteinander, so ergibt sich eine Farbpalette von:
63 oder 6 (Rot) x 6 (Grün) x 6 (Blau) = 216 Farben
Spätestens seit dem Jahr 2000 können fast alle Grafikkarten eine ausreichend große Anzahl von Farben darstellen. Bei einer Notierung von je 256 Farbabstufungen der drei bildschirmbedingten Grundfarben ergeben sich 2563 also über 16,7 Millionen Farbdarstellungen als Standard bei den heutigen Computersystemen.
Dadurch hat die Palette der »websicheren Farben« als solche heute keine Bedeutung mehr. Da die 216 Farben jedoch Bestandteil des RGB-Farbraumes sind, kann es natürlich vorkommen, dass der eine oder andere »websichere« Farbcode unbewusst Verwendung in der Farbgestaltung einer Website findet.
Farbcodes der websicheren Farben in HEX und RGB
| HEX | RGB | ||||||
|---|---|---|---|---|---|---|---|
| R | G | B | HELLIGKEIT | R | G | B | |
| 00 | 00 | 00 | 0 | 0 | 0 | ||
| 33 | 33 | 33 | 51 | 51 | 51 | ||
| 66 | 66 | 66 | 102 | 102 | 102 | ||
| 99 | 99 | 99 | 153 | 153 | 153 | ||
| CC | CC | CC | 204 | 204 | 204 | ||
| FF | FF | FF | 255 | 255 | 255 | ||
Texte: Eigeninterpretationen des Autors, sowie auszugsweise aus typolexikon.de, Wikipedia und dem Schulbuch »Medien verstehen – gestalten – produzieren«, vereinfacht formuliert und für Berufsschüler·innen aufbereitet.