Webentwicklung

Webdesign: Farben richtig einsetzen

Farben sprechen eine deutliche Sprache: Sie können beim Betrachter Gefühle hervorrufen und die Aufmerksamkeit der Besucher lenken. Farben definieren die Identität einer Webseite.

  1. Webdesign: Farben richtig einsetzen
  2. Praktische Implikationen
internet, webdesign, farben, farbwerte, html, css

© Internet Magazin

Farben richtig einsetzen

Das Webdesign hat im Hinblick auf Farbe eine lange Metamorphose hinter sich, von den einst 216 als websicher eingestuften, handverlesenen Farben aus einem Farbraum von maximal 256 Werten bis hin zu RGBa. Wo die Möglichkeiten wachsen, wachsen jedoch auch die Anforderungen.

256 hoch drei

Farbwerte in HTML und CSS werden typischerweise mithilfe der hexadezimalen Notation (HEX) codiert. Der Code einer RGB-Farbe im hexadezimalen Zahlensystem besteht aus drei Paaren von zweistelligen Zahlen (von 0 bis F), also einem Paar pro Lichtquelle, mit einem voreingestellten Doppelkreuz (#). Der niedrigste Wert, der einer Lichtquelle zugewiesen werden kann, ist demnach 0, oder in hexadezimaler Notation 00. Der höchste Wert ist 255, in hexadezimaler Notation FF (in Kurzform F).

internet, webdesign, farben, farbwerte, html, css

© Internet Magazin

Stöbern in harmonischen Farbgruppen in kuler.adobe.com

Die Kombination aus Farbwerten für rot, grün und blau im RGB-Farbsystem bewegt sich jeweils auf einer Skala von 0 bis 255. Dieser Adressraum resultiert in über 16 Millionen verschiedenen Farben (256 x 256 x 256) und deckt sich weitgehend, wenn auch unvollständig, mit dem Farbspektrum, welches das menschliche Auge wirklich erfassen kann.Die HTML- und CSS-Spezifikationen definieren außerdem 147 Farbennamen (wie red, black und blue). Diese Namen können Sie anstelle numerischer Werte einsetzen.Mit dem Wechsel von RGB zu RGBa (in HTML5 und CSS3) werden aus 256 hoch drei Farbnuancen nun dank der Transparenz (oder Opazität) 256 hoch vier Möglichkeiten, einen sehr differenzierten Farbwert zu picken. Dieser RGBa-Farbraum eröffnet Webdesignern dank der Opazitätswerte ganz neue Möglichkeiten. Bei Farbe im Webdesign geht es heute nicht bloß um schlichte Farbe, sondern um das Zusammenspiel aus Farbe und Transparenz.

RGBa und die opacity-Eigenschaft

Die Deklaration opacity setzt die Opazität eines Elementes als Wert zwischen 1 (opak) und 0 (transparent), zum Beispiel:

div { background-color:
rgb(255,0,0); opacity: 1; }

Die rgba-Deklaration erlaubt es, die Opazität mithilfe eines Alphakanals als Bestandteil der Farbdefinition zu setzen:

div { background-color:
rgba(255,0,0,1); }

Die Eigenschaft opacity wird an alle Kindelemente des betreffenden Objektes vererbt. Die rgba-Deklaration setzt die Opazität nur auf das betreffende Element und vererbt sie nicht.

Farbmanagement mit ICC-Profilen

Liegt ein Bild vor einem Hintergrund, bedeuten numerisch identische Farbwerte dieser beiden Elemente noch lange nicht, dass die Farben tatsächlich identisch dargestellt werden. Wann immer es gilt, die Farben angrenzender Elemente einander anzugleichen und/oder einen vorhersehbaren Farbeindruck zu erzeugen, entsteht Bedarf für ICC-Profile.

internet, webdesign, farben, farbwerte, html, css

© Internet Magazin

Mit der Funktion Create/From an Image können Sie die Farbskala einer Webseite einem Bild entnehmen.

In einem Farbraum mit 8-Bit-Farbtiefe wie im Falle des RGB-Farbraums mit den drei Kanälen R, G und B lassen sich 16,7 Millionen Farbwerte abbilden. Die Größe des verfügbaren Adressraums besagt noch nichts darüber, ob diese Farben korrekt abgebildet werden. Um eine vorhersehbare Farbwiedergabe auf allen Displays zu gewährleisten und den verfügbaren Farbraum optimal zu nutzen, kommen sogenannte ICC-Profile zum Einsatz.Die Unterstützung für ICC-Profile ist in aktuellen Webbrowsern leider noch nicht vollständig und fehlerfrei implementiert. Microsofts Internet Explorer 9 unterstützt als erster Webbrowser lückenloses Farbmanagement und ICC-Profile sowohl in der Version 2 als auch in der neueren Version 4.Firefox hatte die Unterstützung für ICC-basiertes Farbmanagement zwar bereits in der Version 3 implementiert, aber diese Funktionalität war nicht aktiviert. Seit der Version 3.5 arbeitet Firefox mit aktiviertem Farbmanagement, berücksichtigt allerdings nur Bilder mit eingebetteten ICC-Profilen der Version 2. Google Chrome einschließlich Version 11 und Opera einschließlich Version 11 drücken sich dagegen bisher um jegliche Unterstützung für ICC-basiertes Farbmanagement.Das Farbmanagement in Firefox ähnelt dem Verhalten des Internet Explorer 9 und stellt derzeit einen goldenen Standard für farbgetreues Webdesign dar. Firefox im Farbmanagement-Modus 2 respektiert eingebettete ICC-Profile der Version 2 und konvertiert die damit versehenen Bilder zur Darstellung in den Farbraum Ihres Displays. Bilder ohne eingebettete Profile bekommen im Modus 2 auf dem Mac das Profil Ihres Displays und unter Windows sRGB zugewiesen.

internet, webdesign, farben, farbwerte, html, css

© Internet Magazin

Zusammenstellen harmonischer Farbgruppen aus benutzerdefinierten Farbfeldern.

Im Farbmanagement-Modus 1 weist der Mozilla-Browser allen Bildern ohne eingebettete ICC-Profile auf dem Mac und dem PC das Standardprofil sRGB zu, bevor er sie zur Bildschirmausgabe in den Farbraum Ihres Displays umwandelt. Die Profilzuweisung ist insofern relevant, da die meisten Bilder im Internet über eingebettete Profile nicht verfügen (Das Einbetten von ICC-Profilen erhöht die Dateigröße und wird oft gemieden.Falls Sie jedoch ein ICC-Profil der Version 4 als Ihr Display-Profil verwenden, kann Firefox ab Version 3.5 weder "profilierte" noch "unprofilierte" Bilder korrekt darstellen. Derzeit meistert diese Aufgabe überraschenderweise nur Internet Explorer 9. Ein Bug in Firefox 3.5 hatte nämlich die Kompatibilität mit ICC-Profilen der Version 4 gebrochen und wurde bisher noch nicht behoben (die letzte bestätigte Version ohne diesen Bug war Firefox 3.0.12).Interessanterweise liefert Firefox ein vorhersehbares Ergebnis unabhängig von der verwendeten Plattform, denn der Browser überschreibt auf dem Mac die Standardeinstellungen des Betriebssystems und legt den RGB-Arbeitsfarbraum anhand des sRGB-Profils aus. Dieses Profil ist für den Standard-Arbeitsfarbraum unter Windows verantwortlich. Mac OS X legt den RGB-Arbeitsfarbraum anhand des ICC-Profils des Displays aus. Den RGB-Arbeitsfarbraum von Photoshop und Illustrator legt der Benutzer selbst fest (in den Farbeinstellungen des Programms).In einem anderen Punkt hat Apple selbst die Farbdarstellung unter Mac OS X dem Windows-Standard angeglichen: Seit der Version 10.6.x verwendet der Mac dasselbe Gamma wie andere Betriebssysteme: 2.2 anstelle von 1.8.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…