What the Hex?
Wer als Designer viel mit Farben arbeitet, geht gerne mit offenen Augen durch die Welt und lässt sich inspirieren. „Die Welt“ ist heute aber oftmals das Web. Also freut sich jeder darüber wenn er sich die Farben, die er auf einer Webseite findet, digital merken kann. „Web Colour Data“ ist eine Webseite, die dabei hilft, Farben von Webseiten zu analysieren und aufzulisten.
Gelangt man zum ersten Mal auf die Webseite www.webcolourdata.com/ werden dem Nutzer in komprimierter Balkenform die Hauptfarbwerte bekannter Webseiten angezeigt. Per Klick darauf erfährt man Näheres.
Farbzusammenstellungen und Farbwerte von Webseiten in der Übersicht
„Web Colour Data“ ermittelt Farben aus bestehenden Webseiten, einfach, indem man die gewünschte URL eingibt. Das Web-Tool erstellt dann eine Übersicht aller verwendeten Farben mit prozentualer Angabe. Bisher gab es verschiedene kleine Tools, mit denen man Farben auf Webseiten partiell ermitteln und speichern konnte. Die Webseite „mooColorFinder“ kann ansonsten als direkter Vorläufer von „Web Colour Data“ gelten.
Ein typisches Beispiel für Farbverteilung ist www.wordpress.com mit zwei Hauptfarben (Blau und Orange) und einer klaren Präferenz auf einem Blau. Alle weiteren Farbwerte nehmen in der Häufigkeit ihres Gebrauchs rapide ab.
Die meisten großen Webseiten nutzen wenige Farben schwerpunktmäßig
Einige der größten oder bekanntesten Webseiten wie Facebook, Pinterest oder Instagram verwenden relativ wenig Farben. Ein breites Farbspektrum kommt bei vielen Webseiten nicht zum Zuge. In der Regel liegt der Schwerpunkt auf einer oder zwei bis drei korrespondierenden Farben. Das heißt, dass die prozentuale Farbverteilung bei den meisten Webseiten bei den ersten Farben hohe Werte anzeigt und bei den nachfolgenden stark abfallende Marginalwerte.
Ein weiteres Beispiel für Farbgebrauch im Internet ist die Webseite www.web-crossing.com/ mit nur einer Hauptfarbe, die sich aber gleichmäßig auf sehr unterschiedliche Blaus bzw. Blautonwerte verteilt. Nur eine Hauptfarbe zu verwenden, ist der Klassiker im Corporate Design.
Farbbeispiele von Webseiten-Designs
Natürlich bietet das Web bezüglich der Farbgebung auch eine kaum zu überblickende Anzahl gegenteiliger Beispiele selbst unter sehr großen Webseiten. Dazu zählt Google.
www.google.com arbeitet mit Grundfarben und legt wert auf kräftige Farben. Dies hat seinen Ursprung vor allem im sehr farbigen Logo. So erscheinen die Farben einer Webseite, die man für denkbar farblos gehalten hätte, hier besonders klar und variantenreich.
„Web Colour Data“ zeigt die Verwendung von Farben in vier Dimensionen:
- Im ersten Feld „Breakdown“ werden die verwendeten Farben in der Reihenfolge ihrer Nutzungshäufigkeit als Farbbalken aufgeführt. Zu sehen sind hier der Hexadezimalwert der Farbe und ihr Gebrauch als Prozentwert.
- Das zweite Feld „Hue Distribution“ – also die Farbwertverteilung – zeigt anhand eines Kurvendiagramms die relative Verteilung der Farben. Hier ist auf den ersten Blick am besten zu sehen, welche Farben den Schwerpunkt auf der Webseite bilden.
- Das dritte Feld „Colour Wheel“ (Farbrad) zeigt eher, welche Bereiche aus dem Farbspektrum verwendet werden und welche nicht. Interessant ist, dass bei den meisten Webseiten das Farbrad nur spärlich ausgeschöpft wird, weil Gestalter klare Präferenzen auf eine oder wenige Hauptfarben legen.
- Das vierte Feld „Websites with Similiar Colours“ zeigt Seiten an, die ähnliche Farben bzw. Farbverteilungen aufweisen.
Nicht alltäglich ist die Farbverteilung bei www.endoplast.de mit einer sehr paritätischen Farbverteilung. Zwischen der ersten und der letzten Farbe wechselt die Farbhäufigkeit in geringen Prozentschritten, das heißt die Verwendungshäufigkeit der Farben liegt eng beieinander. Die Farbgestaltung ist weniger kontrastreich und dafür mehr harmonisch.
Fazit: „Web Colour Data“ als hilfreicher Farbwerte-Assistent
Die Webseite „Web Colour Data“ ist noch nicht perfekt und bis zum Letzten ausgereift aber sie bietet für die Arbeit brauchbare Ergebnisse vor allem für einen schnellen Überblick über Farbkanon und Farbkombinationen anderer Webseiten. Urteil: Sehr hilfreich.
Am Beispiel von www.print24.de sieht man ein anderes Extrem: Die zwei deutlich voneinander abgegrenzten Farben Rot und Blau aus dem Spektrum der Grundfarben setzen klare Akzente. Dem entsprechend wenig ist der Farbkreis ausgeschöpft.
