Serie Modernes Webdesign Teil 2: Farben

Farben im WebDesign

Manche treiben’s gerne (zu) bunt. Viele lieben es gerne schlicht. Da stellt sich die Frage: Welche Farbgebung passt zu Ihrer WebSite? Oder anders formuliert: Mit welchen Farben transportieren Sie Ihre Inhalte am besten und welche kommen bei Ihrer Zielgruppe gut an? Hier helfen die Erkenntnisse aus der Farbpsychologie. Denn diese beschäftigt sich mit den Emotionen, die Farben auslösen und mit welchen Inhalten sie verbunden werden. Aber auch die design-technische Seite sollten Sie kennen. Schließlich können alle Farbnuancen, die Ihnen aus dem Druck oder der Kunst vertraut sind, auf Bildschirmen nur näherungsweise dargestellt werden. Deshalb gehen wir in diesem Beitrag zu unserer Serie „modernes Webdesign“ auch auf das Thema Farbcodierung mit Web-Farben ein.

Trotzdem geht es uns in diesem Beitrag weniger um eine umfassende Abhandlung, sondern vielmehr um einen praktischen Handlungsleitfaden. Deshalb präsentieren wir Ihnen zwei tabellarische Übersichten, die Sie auch downloaden können. Allerdings darf der Hinweis nicht fehlen, dass wir die Farbpsychologie hier aus mitteleuropäischer Sicht betrachten. Denn sowohl die Farbwahrnehmung als auch deren Bedeutung ist geografisch bedingt und kulturell erlernt. Das heisst für Sie: wenn Ihr Online-Business zum Beispiel überwiegend im afrikanischen oder asiatischen Raum stattfindet, dann müssen Sie sich an den lokalen Gegebenheiten orientieren.

Übersicht der wichtigsten Grundfarben

Hier finden Sie die wichtigsten Grundfarben im WebDesign mit ihren emotionalen (psychologischen) Bedeutungen sowie Beispiele für ihre Anwendungsbereiche. Bitte beachten Sie, dass es Farbvariationen gibt, die durch veränderte Farbintensität (Helligkeit, Kontrast) einzele Effekte abschwächen oder verstärken können. Diese Farben gehören übrigens zu den alten, sogenannten "Web Save Colors"
Farbe (CSS)SymbolAnwendungBranche
Weiß (#FFFFFF)Reinheit, Sauberkeit, Ehrlichkeit, Ordnung, Unschuld
Achtung: Trauerfarbe in anderen Kulturen!
Klassische HintergrundfarbeAlle
Schwarz (#000000)Stärke, Eleganz
aber auch: Trauer, Pessimismus
Klassische TextfarbeLuxusartikeln, Mode, Marketing und Kosmetik
Gelb (#FFFF00)Glück, Wärme, Optimismus, Jugend
aber auch: Feigheit, Betrug, schlechte Qualität
aktivierende Elemente, z. B. Call-to-Action Buttons, Warnhinweise oder AufmacherWellness, Freizeit, Beauty
Rot (#FF0000)Aktivität, Dynamik, Liebe, Energie
aber auch: Gewalt, Wut, Gefahr
Akzente, WarnhinweiseNahrungsmittel, Mode, Unterhaltung, Sport, Marketing, Werbung, Notfalldienste
Blau (#0000FF)Kompetenz, Qualität, Zuverlässigkeit, Loyalität, Kraft, Vertrauen, Sicherheit
aber auch: Kühle, Distanz
Klassische Farbe für Menüs und Bedienelemente (Buttons)Gesundheit, High-Tech, Medizin, Wissenschaft, Verwaltung, Recht, Versorgungsunternehmen

Die wichtigsten "Zwischentöne"

Diese Übersicht stellt Ihnen die wichtigsten Mischfarben mit den dazugehörigen emotionalen (psychologischen) Bedeutungen vor und zeigt Ihnen, in welchen Bereichen diese Farben gerne eingesetzt werden
Farbe (CSS)SymbolAnwendungBranche
Grün (#008000)Frische, Ruhe, Natur, Wachstum, Gesundheit, Harmonie
aber auch: Neid
Bilder, Grafikelemente, positive HinweiseWissenschaft, Tourismus, Medizin, Personalwesen, Umwelt, Nachhaltigkeit
Orange (#FFA500)Lebensfreude, Spaß, Energie, Wärme, Ehrgeiz, Begeisterung
aber auch: Aggression, Ablehnung
Handlungsaufrufe (Unterschriften, Kauf, Registrierung), Buttons, Akzent-Bereiche (Gliederungen, Menüs)Onlinehandel, Fahrzeugindustrie, Technologie, Entertainment, Nahrungsmittel,Kinder
Violett (#EE82EE)
Purpur (#800080)
Indigo (#4B0082)
Purpur: Luxus, Wohlstand, Reichtum
Hell: Raffinesse, Romantik
Kreativität, Vorstellungskraft, Autorität, Kraft, Geheimnis, Weisheit, Respekt
aber auch: Introvertiertheit, Eitelkeit
Hintergründe, Tönung, Menüs, AkzenteBeauty, Astrologie, Massage, Yoga, Heilung, Spiritualität, feminine Marken und Themen
Braun (#A52A2A)
Sattel-Braun (#8B4513)
Sinnlichkeit, Wärme, Erde, Robustheit, Zuverlässigkeit, Stabilität, Freundschaft
aber auch: Schwere, Bequemlichkeit
Hintergründe, Tönung, Menüs, AkzenteImmobilien, Tiere, Genussmittel, Finanzen
Grau (#808080)
Silber (#C0C0C0)
Formalität, Professionalität, Raffinesse, Praktikabilität, Zeitlosigkeit, Charakter
aber auch: Tristesse, Distanz, Kälte
Menüs, Bedien-Elemente, Strukturen, HintergründeInformierende Websites, Luxusgüter, Unternehmensseiten

Web Colors

Die „Web Save Colors“ stammen aus einer Zeit, als VGA-Monitore Standard waren. Ursprünglich waren es 16 Farben, die in der CSS-Codierung sogar in ihren Farbnamen verwendet werden dürfen. Sie haben den großen Vorteil, dass sie tatsächlich immer noch auf allen Bildschirmgeräten und Systemen eindeutig funktionieren. Doch unterm Strich wirken sie inzwischen etwas retro und die moderne WebDesign Gestaltung erlaubt inzwischen ein wesentlich differenzieres Farbbild. Deshalb zählen heute 216 Farbtöne zu den Web Save Colors. Die passenden Farbcode-Tabellen finden Sie hier …

Tipps und Tricks

Nun möchte man ja gerne auch mal verschiedene Farbtöne mixen, damit Ihre Website lebendig wird. Und damit das nicht „ins Auge geht“, stellen wir Ihnen zwei nützliche Tools vor, die einfach zu bedienen sind und mit denen Sie farbliche Fehlgriffe vermeiden können:

  • ColorDrop
    Hier können Sie Ihre Farbkombinationen testen
  • ColorZilla
    Dieses Werkzeug ist ein sogenanntes Browser Add-on, welches sowohl für Mozilla Firefox als auch für Google Chrome funktioniert

Sicherlich gibt es noch mehr gute Werkzeuge, aber diese benötigen etwas mehr Erfahrung und Zeit. Wenn Sie mehr darüber erfahren wollen, empfehlen wir Ihnen den Artikel im t3n-Magazin oder ein Gespräch mit Ihrem WebDesigner.