Welche Farben Deine Website zum Strahlen bringen
Farben sind etwas ganz Wunderbares. Sie tauchen unsere Welt in einen bunten Schleier und begleiten uns ein Leben lang auf allen Wegen. Sie sind immer dabei und deswegen verbinden wir mit ihnen auch etwas ganz Besonderes. Jede Farbe weckt Assoziationen und Erinnerungen in uns und deswegen solltest Du gut darauf achten, welche Farbkombinationen Du auf Deiner Unternehmenswebsite benutzt. Du wirst selber wissen, wie sehr Farben unseren ersten Eindruck prägen und da der auf Deiner Website gut sein soll, müssen wir ein paar Dinge beachten um die es im Folgenden gehen wird.
Farben sehen
Wir haben das Glück ein breites Farbspektrum wahrnehmen zu können. Unsere Augen mögen kein Ultraviolett oder Infrarot sehen können, dafür breitet sich vor uns die ganze Vielfalt von Violett über Grün bis zum Rot aus. Trotzdem sieht jeder Mensch die Welt in etwas andere Farben. Das Grün dieser Website wird für Dich ein ganz kleines bisschen anders aussehen, als für mich. Manche Menschen sehen unsere farbige Welt sogar auf ganz andere Weise, weil sie etwa eine Rot-Grün-Schwäche haben. Auch auf sie müssen wir in der Farbauswahl Deiner Unternehmenswebsite achten, doch dazu später mehr. Obwohl unsere Bildschirme nur einen Teil der Farbenvielfalt wiedergeben können, die uns umgibt, musst Du trotz dessen noch aus über 16 Millionen RGB Farben eine passende Farbkombination für deine Website auswählen. Damit dies gelingt tauchen wir erst einmal ein, in die Welt der Farben und Farbkombinationen.
Ohne Farbkontrast keine Website
Warum können wir Gegenstände unterscheiden? Warum sehen wir eine rote Rosenblüte klar und deutlich inmitten des grünen Rosenstrauchs? Aus welchem Grund kannst Du diesen Text problemlos lesen? Die Antwort auf all diese Fragen ist – Kontrast. Kontraste ermöglichen es uns Dinge voneinander zu unterscheiden, sie bieten unserem Auge den nötigen Anhaltpunkt um die Kontur der Rosenblüte zu erkennen, oder einen Button auf einer Website. Sicherlich erinnerst Du Dich an eine Reihe von Kontrasten, doch da diese von entscheidender Bedeutung für die Nutzbarkeit deiner Website sind, wollen wir sie noch einmal kurz auffrischen:
- Hell-Dunkel Kontrast
Der klassische Kontrast zwischen Schwarz und Weiß. Die Farben unterscheiden sich in ihrer Helligkeit. Je größer der Unterschied, desto höher der Kontrast. - Farbe-an-sich Kontrast
Der Farbe-an-sich Kontrast entsteht immer, wenn zwei reine, ungebrochene Farben nebeneinander liegen. Am stärksten ist er bei den Farben Gelb, Rot und Blau. - Warm-Kalt Kontrast
Dieser Kontrast lebt davon, dass wir manche Farben als warm und andere als kalt empfinden. Dabei musst Du darauf achten, dass nicht jedes Rot warm und nicht jedes blau eine kalte Farbe ist. - Qualitätskontrast
Stell Dir einen nebligen Morgen vor. Alles ist in eine weiße Dunstwolke gehüllt und wirkt merkwürdig Farblos, entsättigt. Nur Dein Auto, das direkt vor dir steht sieht noch so kräftig rot aus, wie immer. Dieser Kontrast zwischen einer reinen, kräftigen Farbe und blassen, entsättigten Farben bezeichnet man als Qualitätskontrast - Quantitätskontrast
Dieser Kontrast entsteht dadurch, dass verschiedenen große Farbflächen gegeneinandergesetzt werden. Ein kleines blaues Quadrat auf einer riesigen Roten Leinwand zum Beispiel. - Komplementärkontrast
Kennst Du das, wenn man zulange ohne zu blinzeln auf einen Gegenstand schaut und diesen danach in seiner Gegenfarbe sieht? Der Kontrast zwischen Rot und Grün ist zum Beispiel solch ein Komplementärkontrast. Er entsteht, wenn sich zwei Farben, die im Farbkreis gegenüberstehen, treffen. - Simultankontrast
Dieser Kontrast lässt uns Farben sehen die gar nicht da sind. Farbflächen beeinflussen sich immer gegenseitig. Ein graues Quadrat auf einer gelben Fläche sieht anders aus, als auf einer weißen. Manchmal erkennen wir an den Kanten einen leichten Schimmer der Gegenfarbe.
Farbenkombinationen für Deine Website
Wenden wir uns nun Deiner Website zu. Um die richtigen Farben für Deine Internetseite zu finden, müssen wir zunächst ein paar Dinge klären:
Wenn Du weißt, wer Du bist, weißt Du auch, welche Farben die Website Deines Unternehmens braucht
Schau Dir zunächst Dich und Dein Unternehmen an. Welche Werte hat das Unternehmen, welche Ziele? Gibt es Attribute, die mit Deinem Unternehmen verbunden werden? All das sind Fragen, die Du dir früher oder später stellen musst und vielleicht hast Du das sogar schon. Um eine gute Farbauswahl zu treffen, musst Du wissen, wie Dein Unternehmen wahrgenommen wird oder wahrgenommen werden soll. Wirf auch einen Blick auf dein Logo, Deine bisherigen Kommunikationsmittel, also Visitenkarten, Flyer und ähnliches. Gibt es hier schon eine Farbe, die mit Deinem Unternehmen in Verbindung gebracht wird? Wenn ja, solltest Du diese auch auf Deiner Website aufgreifen. Lass dabei aber nicht die Wirkung dieser Farbe aus den Augen. Vielleicht hast du auch schon ein festgeschriebenes Corporate Design. Wenn nicht, währe jetzt der Zeitpunkt zusammen mit Deiner Website auch eine Farbpalette für dein Unternehmen zu definieren.
Farben und Ziel der Website hängen zusammen
Welches Ziel willst Du mit der Website erreichen? Welche Wirkung soll erzielt werden? Welche Stimmung möchtest Du erzeugen? In den ersten 90 Sekunden auf der Website fällen wir ein Urteil. Weit über die Hälfte dieses Urteils wird von den Farben die wir sehen beeinflusst. Farben wecken in uns Assoziationen, Gefühle und Empfindungen. Viel davon ist subjektiv und von unseren eigenen Erlebnissen und Erfahrungen geprägt, doch es gibt auch einige grundlegende Empfindungen, die Farben hervorrufen. Diese sind allgemein und erlauben uns eine objektive Beurteilung der Farben und ihrer Wirkung. Wie Du bereits weißt, können wir Farben als warm oder kalt wahrnehmen, doch es gibt auch neutrale Farben. Ob wir eine Farbe auf Deiner Website nun positiv oder negativ beurteilen hängt nicht nur von der einzelnen Farbe, sondern dem genauen Farbton, den Kontrasten und der Kombination mit anderen Farben ab. Trotzdem hier ein kleiner Überblick über die Assoziationen, die Farben in uns hervorrufen können:
- Rot:
Stark, mutig, dynamisch, warm
Gefährlich, aggressiv, dominant, laut - Orange:
Freundlich, warm, jung, fröhlich
Billig, unseriös, aufdringlich, laut - Gelb:
Freundlich, glücklich, optimistisch
Aufdringlich, giftig, neidisch - Grün:
Natürlich, entspannend, ruhig, harmonisch
Unreif, sauer, unerfahren, bitter - Blau:
Still, vertrauensvoll, autoritär, stark, entspannend
Kalt, unpersönlich, depressiv, langweilig - Violett
Außergewöhnlich, magisch, originell, kreativ
Unnatürlich, künstlich, zweideutig, unsicher - Schwarz:
Seriös, elegant, neutral, modern, funktional
Düster, traurig, einsam - Weiß:
Schlicht, neutral, sauber, rein
Kalt, steril, leer - Grau:
Sachlich, elegant, professionell
Langweilig, charakterlos, deprimierend - Braun:
Warm, erdverbunden, zuverlässig, traditionell
Schwer, bequem, altmodisch
Wenn Du eine Farbkombination für Deine Website aussuchst, versuch an diese psychologische Wirkung der Farben zu denken und suche Dir eine Farbe nicht nur aus, weil Du sie besonders gerne magst.
Nutze Farbkombinationen für Deine Website, die Deine Zielgruppe ansprechen
Nicht nur Du hast eine Lieblingsfarbe, sondern auch deine Kunden und die Besucher deiner Website. Anders als Deine Lieblingsfarbe, ist ihre für Deine Farbauswahl von Bedeutung. Eben haben wir uns die Psychologie der Farben angesehen. Die Assoziationen die Farben in uns wecken hängen aber von verschiedenen Umständen ab. Ganz wichtig ist der Kulturkreis, in dem wir aufgewachsen sind. Ein gutes Beispiel für die Auswirkungen der Kultur bieten die Farben Schwarz und Weiß. Während im europäischen Raum Schwarz eine Trauerfarbe ist und Weiß zu fröhlichen Anlässen, wie etwa einer Hochzeit getragen wird, kehren sich diese Bedeutungen im asiatischen Raum um, wo Weiß als Zeichen der Trauer gilt. Es ist also wichtig, die Farbauswahl für Deine Website auf den Kulturkreis Deiner Zielgruppe abzustimmen. Deine Zielgruppe ist nämlich das wichtigste, was Du bei der Farbwahl beachten musst, schließlich sind sie es, denen Deine Website ein positives Gefühl vermitteln soll. Neben der Kultur spielen auch das Alter und das Geschlecht einer Person eine Rolle in ihrer Farbwahrnehmung. So haben Männer und Frauen im Durchschnitt unterschiedliche Lieblingsfarben und auch diese ändert sich mit dem Alter. Betrachte die Persönlichkeit Deiner Zielgruppe. Welche Emotionen möchtest Du bei ihnen wecken, auf welche Farben und Farbkombinationen sprechen sie besonders gut an. Gibt es eine Farbe, die Deine Zielgruppe anspricht, die richtigen Emotionen überträgt und auch noch mit den Werten Deines Unternehmens übereinstimmt, hast Du Deine Grundfarbe schon gefunden.
Welche Farben benutzen deine Konkurrenten auf ihren Internetseiten?
Neben der Zielgruppe beeinflusst auch die Branche in der Du Tätig bist Deine Farbwahl. In manchen Branchen hat sich eine Farbe als branchenspezifisch durchgesetzt. Ein schönes Beispiel hierfür sind Versicherungen, von denen eine große Anzahl auf die Farbe Blau setzt. Schau nach, ob es auch für Deinen Tätigkeitsbereich Farben und Farbkombinationen auf Websites gibt, die besonders häufig auftreten, oder gibt es Farben, die – vielleicht aus gutem Grund – nie verwendet werden? Bei branchenspezifischen Farben musst Du gut abwägen. Meistens wird diese Farbe mit der Branche verbunden. Sie schafft Vertrauen, da die Besucher Deiner Website sie wiedererkennen. Andererseits wird Deine Website dadurch auch ein Stückweit austauschbar und beliebig. Du solltest Dich also entscheiden, ob Du den klassischen Weg gehen möchtest, oder Dich gezielt von der Konkurrenz abheben möchtest.
Farben dienen der Orientierung auf einer Website
Erinnerst Du Dich an die Kontraste? Sie lassen uns erst nebeneinanderliegendes von einander unterscheiden. Und genau das tun auch die Farben auf unserer Website. Sie sollen die Bedienung erleichtern, indem sie uns bei der Orientierung helfen. Farben verleihen Dingen eine Bedeutung, sie leiten unseren Blick und erlauben es, eine visuelle Hierarchie aufzubauen. Wir erkennen also auf einen Blick, ohne den Text lesen zu müssen, was besonders wichtig ist. Wir erkennen welche Bereiche der Website zur Navigation dienen und wo wir etwa über Links weitere Informationen bekommen können. Beim Verwenden der Farbe auf einer Website sollten wir also darauf achten, dass wir sie auch im Sinne der Usability einsetzten. Darüber hinaus müssen auch alle Texte gut zu lesen sein, es gilt also darauf zu achten, dass der Kontrast von Text zu Hintergrund ausreichend groß ist, doch dazu später mehr.
Eine Website mit Farben für alle
Nicht jeder Mensch sieht Farben gleich. Neben knapp 5% der Bevölkerung mit einer Farbenblindheit gibt es auch noch etwa 10% mit einer Rot-Grün-Schwäche oder anderen Farbfehlsichtigkeiten. Wenn Du auch den davon Betroffenen Deine Website erlebbar machen möchtest, gibt es ein paar Grundregeln für Farbkombinationen, auf die Du achten kannst:
- Symbole und Farben
Nimm nicht nur eine Farbe um zum Beispiel zu bestätigen, dass eine Eingabe korrekt war oder nicht (meist rot und grün), sondern greife zusätzlich auf Symbole zurück (Häkchen und X) - Texturen
Probiere statt vielen verschiedenen Farben doch auch mal unterschiedliche Texturen für Flächen. Etwa um in einem Diagramm Bereiche voneinander zu unterscheiden. - Kontrast
Ein guter Hell-Dunkel Kontrast lässt Texte auch lesbar erscheinen, wenn die Farbtöne anders wahrgenommen werden. - Abstufungen
Verwende nicht zehn verschiedenen Farbtöne, sondern wenige und nutze ihre Abstufungen indem du ihre Helligkeit oder Sättigung variierst. - Bestimmte Kombinationen vermeiden
Achte darüber hinaus auf bestimmte ungünstige Kombinationen, wie Rot und Grün oder Grün und Braun.
Bevor wir uns nun der tatsächlichen Farbsuche zuwenden noch etwas, das Du beachten solltest. Versuche extrem grelle und leuchtende Hintergrundfarben zu vermeiden. Auch komplementäre Farben, die direkt aufeinander sitzen sind nicht zu empfehlen. So ist ein grüner Text auf einem roten Hintergrund nicht gut lesbar. Versuche auch nicht zu viele Farben zu verwenden, denn sie sind der Wegweiser auf Deiner Website und sollten die Besucher nicht durch ihre bloße Masse verwirren.
So findest Du die richtigen Farben für Deine Website
Bisher haben wir viel darüber gesprochen, worauf Du bei der Auswahl der Farbpalette achten solltest. Doch noch stehst du weiterhin vor 16 Millionen RGB Farben und hast vielleicht schon die Rottöne und Orange ausgeschlossen. Doch es bleiben immer noch viel zu viele Farben um einfach eine auszuwählen. Um Dir die Auswahl zu erleichtern gibt es verschiedene Methoden, die Du je nach Deinen Anforderungen auch kombinieren kannst.
Inspirationen helfen Dir, Deiner Website Farbe zu verleihen
Bilder und Fotografien halten unsere Welt fest. Sie fangen Augenblicke und Stimmungen in den Farben des Momentes ein. Da wir genau nach so etwas suchen – nach einer Farbpalette, die eine bestimmte Stimmung übermittelt – lohnt es sich in der Welt der Bilder auf Suche zu gehen. Dabei ist es egal, ob Du Naturfotografien verwendest, Fotos von Menschen oder grafische Abbildungen. Du kannst Dir auch Websites und Brandings von anderen Unternehmen ansehen oder im Internet nach fertigen Farbschemata suchen. Sowohl aus den Bildern, als auch aus den Websites kannst Du dann mithilfe eines Bildbearbeitungsprogrammes und dem Pipetten Werkzeug die Grundfarben extrahieren. Wenn das Bild Dir eine bestimmte Stimmung übermittelt hat, wir sich diese in der Farbpalette wiederfinden.
Farbsuche mit Tools und Eigenschaften
Hast Du bereits eine Farbe oder Farbkombinationen gefunden, die Du verwenden möchtest, Du findest aber keine weiteren dazu passenden Farben? Dann bietet das Netz und auch Dein Grafikprogramm eine Vielzahl von Möglichkeiten und Tools, um Dir die Suche zu erleichtern. Auch über die Eigenschaften, die wir bestimmten Farben zuordnen, kann die Auswahl eingegrenzt werden. Ob es nun gut ist, oder nicht, wie verbinden mit Rosa meist mit Weiblichkeit, während Blau für Männlichkeit steht. Neben diesen Klischeefarben gibt es jedoch noch viele andere Eigenschaften, die wir bestimmten Farben zuordnen.
Eine Farbpalette für Deine Website erstellen
Mittlerweile hast Du eine Reihe von Farben ausgewählt. Vielleicht hast Du das Bild eines ruhigen Sees im Sommer als Grundlage genommen und nun besteht deine Farbauswahl aus einigen Blautönen, Grüntönen und vielleicht dem Rotton einer Seerose. Bevor Du diese Farben für Deine Website verwenden kannst, müssen wir sie aber noch etwas anpassen. Zunächst einmal betrachten wir, wie viele verschiedene Farben überhaupt notwendig sind. Wenn wir nach der 60-30-10 Regel gehen, dann nimmt die Grundfarbe 60% unserer Website ein, die Sekundärfarbe 30% und 10% bleiben für eine Akzentfarbe. Als Minimum brauchen wir also drei Farben. Doch in der Realität ist eine Website meistens zu komplex um mit nur drei Farben auszukommen. Für den Anfang sollten wir mit etwa fünf Farben starten Daraus ergeben sich bereits 25 Farbkombinationen die Du für deine Unternehmenswebsite benutzen kannst. Je komplexer die Website ist und je mehr Hierarchien auch visuell von einander getrennt werden sollen, desto größer muss Deine Farbpalette werden.
Mit HSB zur passenden Website-Farbpalette
Farbton (H), Sättigung (S) und Helligkeit (B) definieren eine Farbe. Alle drei Werte können unabhängig von einander verändert werden und ermöglichen es so einen Farbton in eine Vielzahl von Abstufungen zu unterteilen. Für Deine Website sollten wir also mit etwa drei Farbtönen aus Deiner Auswahl beginnen und diese entsprechend Abstufen. Nun geht es darum, dass diese Farben und ihre Farbkombinationen auch auf der Website deines Unternehmens verwendet werden können. Wir müssen also ausreichend Kontraste schaffen. Allgemein werden dezente und helle Farben auf der Website in größerem Maße Verwendung finden, als markante, gesättigte Farben. Wir sollten daher eine ausgewogene Farbpalette erzeugen. Dabei solltest Du darauf achten, dass Du mindestens eine Textfarbe benötigst, die einen ausreichenden Hell-Dunkel Kontrast zum Hintergrund aufweist. Da wir meistens mehrere Hierarchien im Text haben, also Überschriften, Fließtext und auch Links, brauchen wir tatsächlich mehr als eine Farbe, die sich als Textfarbe eignet. Dabei sollte der Kontrast allerdings nicht zu hoch werden. Auf Bildschirmen erscheint schwarzer Text auf weißem Hintergrund meist hart, sodass eher auf ein dunkles Grau zurückgegriffen werden sollte. Um heraus zu finden, ob die Kontraste ausreichen und ob sich genügend Möglichkeiten aus der Farbpalette ergeben gibt es im Internet nützliche Tool, wie etwa der Accessible color palette builder, mit dessen Hilfe sich die Farbkombinationen die Du für deine Website verwenden möchtest überprüfen lassen.
Eine Website mit eigener Farbkombination
Am Ende steht nun Deine Farbpalette, doch zuletzt muss sie noch den Praxistest bestehen. Verwende die Farbkombinationen auf Deiner Website und probiere ruhig verschiedene Variationen aus. Erst jetzt wirst Du wirklich feststellen, ob die visuellen Hierarchien stimmen, die Texte gut zu lesen sind und die Website auch die richtige Wirkung erzielt. Wahrscheinlich musst Du noch ein paar kleine Anpassungen vornehmen, doch der größte Teil der Arbeit ist bereits getan.
Falls Dir unser Beitrag gefällt, hinterlasse uns doch einen Kommentar.
