Ü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) | Symbol | Anwendung | Branche |
|---|---|---|---|
 Weiß (#FFFFFF) | Reinheit, Sauberkeit, Ehrlichkeit, Ordnung, Unschuld Achtung: Trauerfarbe in anderen Kulturen! | Klassische Hintergrundfarbe | Alle |
 Schwarz (#000000) | Stärke, Eleganz aber auch: Trauer, Pessimismus | Klassische Textfarbe | Luxusartikeln, 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 Aufmacher | Wellness, Freizeit, Beauty |
 Rot (#FF0000) | Aktivität, Dynamik, Liebe, Energie aber auch: Gewalt, Wut, Gefahr | Akzente, Warnhinweise | Nahrungsmittel, 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) | Symbol | Anwendung | Branche |
|---|---|---|---|
 Grün (#008000) | Frische, Ruhe, Natur, Wachstum, Gesundheit, Harmonie aber auch: Neid | Bilder, Grafikelemente, positive Hinweise | Wissenschaft, 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, Akzente | Beauty, 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, Akzente | Immobilien, 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ünde | Informierende 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.
