Eines der schwierigsten Aspekte bei der Gestaltung eines Screendesigns ist die Auswahl eines Farbschemas für die Website.

Eine Farbkombination zu finden, die zum Thema passt und deren Farben vor allem auch untereinander passen und harmonieren. Eine Farbkombination, die bei Texten gut lesbar ist und auch die inhaltliche Struktur und die visuelle Hierarchie der Website verdeutlichen.

Folgende Fragen tauchen hierbei regelmäßig während des Gestaltungsprozesses auf:

  • Wie finde ich passende Farbtöne?
  • Auf was muss ich bei der Auswahl alles achten?
  • Wie viele Farbtöne sollen ausgewählt werden?
  • Passen die Farbtöne zum Projekt/Unternehmen?

Diesen Fragestellungen möchte ich mich im folgenden annähern und einige hilfreiche Tips und Arbeitsabläufe vorstellen:

 

Anforderungen an das Farbschema – Kriterien zur Farbauswahl

Es gibt einige Aspekte zu beachten, bevor man sich wild im Grafikprogramm an den Farben austobt. Denn nicht alle über 16 Millionen RGB-Farben stehen einem zur Verfügung, bzw. sind sinnvoll für das Website-Projekt.

Unternehmensanalyse und Corporate Design

Zuerst sollte man sich mit dem Unternehmen ausführlicher auseinander setzen. Klar, sollte man sowieso intensiv, aber eben auch in Hinblick auf mögliche Farbtöne.

Für was steht das Unternehmen, welche Werte vertritt es, welche Ziele will es erreichen? Wie sieht sich das Unternehmen selber, welche Attribute passen zum Unternehmen? Fragen, die in einer sinnvollen Konzeption sowieso gestellt werden (sollten). Und deren Antworten eben auch bei der Farbauswahl behilflich sind.

Und dazu natürlich die Frage nach Corporate Design-Vorgaben! Diese sind nicht immer zwingend in einem Design-Handbuch schriftlich festgehalten, können aber auch in Form von schon produzierten Kommunikationsmitteln vorliegen. Welche Farben wurde im Flyer, in den Visitenkarten, beim Logo eingesetzt? Auch das können schon Design- und Farbvorgaben sein, die man einhalten kann/sollte. Es gilt abzuklären, inwieweit diese Farben verbindlich sind, bzw. eindeutig definiert.

Gibt es noch keine klar definierten Farbwerte, dann ist die Website-Gestaltung der Zeitpunkt, dies nun nachzuholen.

Farbwerte Corporate Design

Farbwerte im Corporate Design Styleguide definiert.

 

Website-Ziele und die Farbpsychologie

Welche Ziele soll die Website erreichen? Welche Wirkung soll erzeugt werden? Welche Stimmung soll vermittelt werden?

Die Antworten sind wichtig, um passende Farben auswählen zu können. Denn jeder Farbton ruft Assoziationen beim Betrachter hervor. Dafür sind sowohl Kenntnisse der psychologischen Wirkung der Farben hilfreich, wie auch die gewünschten Wirkungen, die die Website erzielen soll.

Erst dann lassen sich Farbkombinationen finden und gestalten, die zum Thema und den Zielen passt.

Farbwirkung

Farben erzielen bestimmte psychologische Wirkungen.

 

Zielgruppe

Zu dem oberen Punkt gehört auch zwingend die Zielgruppe, also die Besucher/Betrachter der Website. Denn die Wirkung wird bei ihnen erzeugt, diese haben bestimmte Assoziationen, die es zu steuern gilt. Je nach Alter, Geschlecht, Kulturkreis usw. kann die Farbassoziation nämlich (ganz) anders aussehen.

Da die Zielgruppenanalyse auch Teil der Website-Konzeption ist, hat kann man hier gut drauf aufbauen und diese um die Farbthematik erweitern.

 

Wettbewerb

Welche Farben setzen die Konkurrenten ein? Gibt es branchenspezische Farbtöne, die immer wieder zum Einsatz kommen?

Und genauso wichtig: Gibt es bestimmte Farbtöne, die nie eingesetzt werden (sollten)?

Ob man dann branchenübliche Farbtöne einsetzt, ist eine individuelle Projekt-Entscheidung. Dies kann einerseits die Wiedererkennung/Zugehörigkeit und das Vertrauen stärken. Andererseits kann es die Austauschbarkeit und Beliebigkeit erhöhen.

Zusammen mit dem Corporate Design des Auftraggebers, den gewünschten Zielen und Wirkungen kann dann entschieden werden, ob man eher den klassischen Weg wie viele Wettbewerber wählt oder bewusst farblich dagegen steuert.

Farbe als Differenzierungsmerkmal im Wettbewerb

Farbe als Differenzierungsmerkmal im Wettbewerb

 

Usability und Accessibility

Es nützt die schönste Farbkombination nichts, wenn sie sich auf einem Bildschirmmedium nicht sinnvoll einsetzen lässt.

Farben sollen zum einen (wie oben schon beschrieben) bestimmte Assoziationen hervorrrufen. Andererseits aber auch die Bedienung erleichtern. Farben schaffen Orientierung und geben den Elementen Bedeutung. Sie unterstützen damit die visuelle Hierarchie der Website und leiten den Blick des Betrachter durch die Inhalte.

Visuelle Hierarchie durch Farben

Farben unterstützen die visuelle Hierarchie einer Website und lenken die Blicke des Betrachters.

 

Da Website-Inhalte vor allem aus Texten bestehen, ist die Lesbarkeit das Entscheidende.

Es reicht also zum Beispiel nicht ein schönes pastellfarbenes Farbschema gefunden zu haben – bei dem aber der hellblaue Text auf hellgelbem Hintergrund nicht mehr lesbar ist.

Der Kontrast zwischen Textfarbe und Hintergrundfarbe entscheidet über die Lesbarkeit.

Es gibt zur Unterstützung, um einen ausreichenden Hell-Dunkel-Kontrast zu finden sog. Accessibility-Tools, mit denen man Farbkombinationen überpüfen kann:

Color-Contrast-Checker

Farbkombinationen nach Accessibility-Richtlinien überprüfen mit Hilfe des Tools Color Contrast Checker.

 

Dazu gibt es Hürden bei der Farbwahrnehmung, wie beispielsweise die Rot-Grün-Sehschwäche, die nicht wenige betrifft. Das Farbschema sollte auch dies berücksichtigen und nicht unnötige Hürden aufstellen.

Viele hilfreiche Infos zum Thema Accessibility gibt es im Artikel Designing for Colour Blindness.

Auch sollten keine extrem grell leuchtenden Hintergründe vorhanden sein. Oder zwei Farben übereinander liegen, die dem Komplementär-Kontrast entsprechen.

Selten sind auch zu viele unterschiedliche Farbtöne sinnvoll (Ausnahmen bestätigen auch hier die Regel). Die Besucher gewöhnen sich schnell an ein Farbschema der Website und wissen dann intuitiv, wie welche Elemente wie gestaltet sind. Diese durch zu viele Farbausgestaltungen zu überfordern oder gar durch wechselnde Farbgestaltung zu irritieren, ist ungünstig und unnötig.

Auch bei der Farbwahl gilt:
Weniger ist mehr.

Mit ein bisschen gesundem Menschverstand kann man aber schon viel erreichen (sowieso im Leben, aber auch bei der Farbwahl):

Einfach die Farbgestaltung der Website nüchtern betrachten und analysieren: Kann man alle Elemente gut erkennen und lesen. Wie ist Farb-Hierarchie der Website, dafür die inhaltliche Wahrnehmung einmal ausblenden und sich rein auf die Optik beschränken. Dabei ergibt sich schon gut ein erstes Bild zur Einschätzung.

Farbschema Kriterien Farbauswahl

 

Methoden zur Farbfindung

Es gibt natürlich nicht nur DEN einen Weg zu einer Farbpalette zu gelangen. Vermutlich hat hier jeder Designer so seine eigene Methode, die gar nicht bei jedem Projekt diesselbe sein muss.

Ich selber finde auch nicht immer auf demselben Weg Farben für meine Website-Projekte. Dies liegt zum einen an den jeweils unterschiedlichen Ausgangsvoraussetzungen. Mal ist ein Farbschema schon strikt vorgegeben und muss nur punktuell ergänzt werden. Mal sind nur erste Ideen oder Wünsche kundenseitig vorhanden und mal ist man völlig frei in der Wahl.

Dazu lasse ich mich auch immer wieder gerne „treiben“ und vom künstlerisch-kreativen Zufall überraschen, was entsteht.

Es gibt aber immer einige Methoden, die hilfreich sein können, um ein Farbschemata zu finden, dass für eine Website geeignet ist. Einige stelle ich dir hier vor:

1. Farbinspirationen sammeln

Wer die Farbrichtung noch gar nicht weiß oder sich sehr unsicher ist, findet genug Inspirationsmöglichkeiten – offline wie online. Aus allen möglichen Quellen lassen sich Farbkombinationen extrahieren:

Natur / Offline Leben / Fotografien

Das „wahre“ Leben bietet genug Anreize für gelungene Farbschemata. Einfach mit offenen Aufgen durch die Welt gehen. Alleine die Natur bietet so viele tolle Farbkombinationen. Dazu in den Städten die Häuser, Architektur, Fassaden, Plakate usw.

Man kann es hier fast zusammenfassen unter dem Begriff „Fotografie“, denn meistens werden die Farben von Landschafen, Stadtansichten usw. durch digitale Repoduktionen gewonnen und weniger direkt vor Ort.

Farbkombinationen aus Fotos

Farbkombinationen aus dem „echten“ Leben.

 

Grafik Design

Auch die vielfältige Welt des Grafik-Design kann tolle Farbvorlagen liefern. Ob Flyer, Poster, Logos, Werbeanzeigen, Plattencover, Inneneinrichtungen/Interiour Design, Produktdesign usw.

Auch hier muss man nur gut hinschauen auch solche Designprodukte auf ihre Farbgebung untersuchen.

Farbinspirationen Grafik Design

Farbinspirationen aus der weiten Welt des Grafik Designs.

 

Websites

Klar, es geht um die Gestaltung von Websites, also bietet es sich an andere Websites zu analysieren und deren Farbschemata aufzunehmen. Dabei geht es nicht um eine 1zu1-Kopie, sondern um Anregungen.

Farbinspirationen aus Websites

Farbinspirationen aus Websites extrahiert.

Brandings

Noch weiter als die Websitegestaltung gedacht, kann man sich gleich die Corporate Designs anderer Unternehmen anschauen. Mit welchen Farbwerten bilden diese ihr visuelles Branding, nicht wenige Unternehmen, die diese ja in einem Corporate Design-Styleguide festgehalten haben.

Farbinspirationen Brandings Corporate Designs

Farbinspirationen aus Brandings anderer Unternehmen.

 

Farbschemata-Websites

Und wie könnte es anders sein im Netz: Es gibt auch Websites, die nur Farbschemata sammeln und präsentieren. Auch dies kann eine erste Anlaufstelle sein.

Farbkombinationen von Farbinspirations-Websites

Es gibt Websites wie Design Seeds die liefern gleich Farbinspirationen frei Haus.

Weitere Websites, die vorgefertigte Farbinspirationen anbieten:

Color Hunt
ColorDrop
Color Favs
Color Palettes
Adobe Color
HueSnap

 

Tools zur Farbfindung

Und es gibt jede Menge Farb-Tools, um Farbkombinationen zu finden. Diese sind in so zahlreicher Fülle vorhanden, dass ich hier nur eine Auswahl vorstelle:

ColorBlender
ColorMe
Coolors
Color Supply

 

Eigenschaften von Farbkombinationen

Oftmals werden zu bestimmten Eigenschaften und Funktionen passende Farben / Farbkombinationen gesucht.

Die folgende Auswahl zeigt Stichwörter/Attribute und dazu pasende Farbenkombinationen:

Aktivität / Dynamik: Rot, Orange, Gelb (zusammen mit Blau als Kontrast kann die Wirkung der genannten Farben noch gesteigert werden)
Ehrlichkeit: Weiß, Blau, Grün
Entspannung: Blau, Weiß, Grün
Funktionalität / Sachlichkeit: Weiß, Grau, Schwarz, Blau
Hoffnung: Grün, Blau, Weiß
Klugheit / Weisheit: Weiß, Blau, Silber
Leistung: Blau, Gold, Rot
Luxus: Gold, Violett, Schwarz, Grau, Silber
Männlichkeit: Blau, Schwarz, Braun
Modernität: Weiß, Schwarz, Rot
Neuigkeit: Weiß, Rot, Gelb
Originalität: Silber, Orange, Gelb
Schnelligkeit: Silber, Rot, Gelb
Sicherheit: Grün, Blau, Weiß
Sympathie: Blau, Grün, Weiß
Vertrauen: Blau, Grün, Weiß
Weiblichkeit: Violett, Weiß
Zuverlässigkeit: Blau, Grün, Braun

Aber auch hier daran denken, dass es immer auf den Einzelfall ankommt und manchmal gerade eine alternative Auswahl interessanter sein kann.

 

2. Farben auswählen

Hat man eine Palette gefunden, die den eigenen Vorstellungen entsprechen könnte, gilt es damit weiterzuarbeiten. Denn selten passt eine externe Farbkombination oder der eigene Entwurf auch gleich gut zu einer Website-Umsetzung.

Im Gegenteil:

Meistens sind einige korrigierende Handgriffe notwendig, um eine einsatztaugliche Farbpalette zu bekommen.

Als Basis ist eine Palette von fünf bis sechs Farbtönen hilfreich. Manchmal reichen auch nur drei, um ausreichend Kontraste zu schaffen und Akzente setzen zu können (vom Prinzip könnte schon zwei Farbtöne reichen, wenn man entsprechend mit anderen Gestaltungsmitteln arbeitet, was aber eine seltene Ausnahme darstellt. Ein Beispiel wäre nur mit den Tönen schwarz und weiß zu gestalten).

Sechs Farbtöne gibt einem aber vielfältige Gestaltungsoptionen. Denn schließlich wollen Elemente wie Header, einzelne Inhaltsbereich, der umgebende Block, Footer, dazu Interaktionselemente wie Buttons, Navigationen und Links, sowie Texte gestaltet werden.

Das kann auch bedeuten, dass die Palette entsprechend größer sein muss, gerade bei inhaltlich umfangreicheren Websites, die mehr Gestaltungsvariationen verlangen.

 

3. Farbeigenschaften beachten

Bei einer Farbe lassen sich drei Eigenschaften unterscheiden:

Der Farbton, die Helligkeit und die Sättigung.

Jede Farbe lässt sich anhand dieser drei Eigenschaften einordnen und jede Eigenschaft kann unabhängig von den anderen verändert werden.

Diese drei Farbeigenschaften sind interessant, weil sich damit die einzelnen Farbtöne anpassen lassen. Denn, wie oben beschrieben, ist nicht gleich die erste gestaltete Palette passend. Hier kommen dann die Eigenschaften ins Spiel, an denem man „drehen“ kann, um die einzelnen Farben passender aufeinander abzustimmen.

Die drei Eigenschaften im Überblick:

Der Farbton

Der Farbton ist die Farbeigenschaft, die mit Wörtern wie Blau, Gelb, Grün usw. bezeichnet wird.

Es ist der qualitative Unterschied zu anderen bunten Farben und zu unbunten Farben. Bei leichten Unterschieden haben Farben den selben Namen. Ändert sich der Farbton stärker, ändert sich auch die Farbbezeichnung.

Verschiedene Farbtöne

Verschiedene Farbtöne

Alle Farben sind auf einem Farbkreis angeordnet. Der Farbton wird als Position auf dem Standard-Farbkreis angegeben:

Der Farbkreis

Der Farbkreis mit exemplarischer Farbtonauswahl.

Für ein Screendesign reicht es oft schon ein, zwei, maximal drei Farbtöne auszuwählen und diese dann durch Abstufungen zu ergänzen. Dafür eignen sich dann die anderen Farbeigenschaften.

Die Sättigung

Die Sättigung einer Farbe wird auch Buntheit gennant und oft in Begriffen wie getrübt, matt, kräftig oder klar umschrieben. Man kann so etwas wie die Intensität oder Leuchtkraft einer Farbe darunter verstehen.

Je farbiger bzw. reiner eine Farbe ist, desto gesättigter ist sie. Je geringer die Sättigung einer Farbe ist, desto trüber und unauffälliger wird sie empfunden.

Die Sättigung ist so etwas wie das Verhältnis zwischen der Farbe und einem Grauanteil. Je mehr Grau vorhanden ist, umso matter erscheint die Farbe.

Verschiedene Farbtöne und mit unterschiedlichen Sättigungen.

Verschiedene Farbtöne und mit unterschiedlichen Sättigungen.
Von oben nach unten nimmt die Sättigung jeweils ab.

Die Helligkeit

Die Helligkeit einer Farbe meint etwas wie hell oder dunkel. Durch die Zugabe von Weiß oder Schwarz kann der Helligkeitswert verändert werden.

Farben können den gleichen Farbton haben, aber unterschiedlich hell wirken:

Verschiedene Farbtöne mit Helligkeitsabstufungen.

Verschiedene Farbtöne mit Helligkeitsabstufungen.

Das Verständnis der drei Farbeigenschaften ist wichtig, um die folgenden Punkte umsetzen zu können.

Digitalen Farbwerte – das HSB-Farbmodell

In Grafikprogrammen wie beispielsweise Adobe Photoshop lassen sich Farbwerte mit Hilfe verschiedener Farbsysteme definieren.

Neben den bekannten Farbmodellen wie RGB und CMYK, gibt es auch die Option die drei Farbeigenschaften Farbton, Helligkeit und Sättigung (das sog. HSB-Farbmodell) einzeln zu definieren:

H für Hue (Farbton):
Farbtöne werden entsprechend dem Farbkreis in einem Winkel zwischen 0° und 359° angegeben.
Die Einstellung des Farbtons.

S für Saturation (Sättigung):
Prozentwerte zwischen 0% und 100%.
100% entspricht einer leuchtenen Farbe. Bei 0% erscheint ein Grauton.
Die Einstellung der Sättigung.

B für Brightness (Helligkeit):
Prozentwerte zwischen 0% und 100%.
100% entspricht einem hellen Farbton. Bei 0% ist der Ton Schwarz.

Die Einstellung des Farbtons, der Sättigung und der Helligkeit.

Die Einstellung des Farbtons, der Sättigung und der Helligkeit.

Leuchtende, gesättigte Farben werden erreicht, wenn Sättigung (S) und Helligkeit (B) auf 100% stehen.
Ist die Sättigung auf 0% ist es ein unbunter, grauer Farbton (oder schwarz oder weiß, je nach Farbton und Helligkeit).
Ist die Helligkeit auf 0% ist die Farbe Schwarz.

farbton-helligkeit-saettigung-photoshop

Die drei Farbeigenschaften und deren Kenntnisse sind die Basis, um die folgenden Aspekte zu beachten:

 

4. Kontraste schaffen

Bei meinen Webdesign-Kursen, die ich leite und betreue, sehe ich regelmäßig schöne Farbpaletten, die für sich genommen ästhetisch ansprechend aussehen. Oft haben Sie aber ein „Problem“: Die Kontraste sind nicht groß genug. Farben auf Websites sollen ja nicht nur schön aussehen, sondern werden vor allem eingesetzt, um inhaltliche Elemente voneinander abzugrenzen. Also z.B. ein Button auf einer Hintergrundfläche oder Text auf einem einfarbigen Hintergrund.

Es geht darum ausreichend Kontraste zu schaffen – zwischen den Farbtönen selber und zwischen den Helligkeiten.

Als erstes sollten es nicht zu viele kräftige Farbtöne sein. Diese rauben sich später gegenseitig die Aufmerksamkeit.

Zu viele kräftige Farbtöne.

Zu viele kräftige Farbtöne für ein Screendesign.

Mit verschiedenen Helligkeiten und Sättigungstufen der Farbtöne können spannende Kontraste erreicht werden:

Varianten mit verschiedenen Helligkeiten und Sättigungen.

Varianten mit verschiedenen Helligkeiten und Sättigungen.

Zu beachten: Nicht jeder Farbton kommt ich gleichen Maße zum Einsatz! Die dezenten – und meistens hell(er)en Farbtönen kommen großflächiger zum Einsatz. Die markanten, leuchtenden, gesättigten Farbtöne dagegen eher seltener und in geringerem Umfang.

 

5. Textfarben gestalten

Wichtig ist auch ausreichend Hell-Dunkel-Kontrast zwischen den Textfarben und den Hintergrundfarben zu schaffen. Lesbarkeit ist das A und O der Gestaltung.

Daß heißt zu schauen, ob aus der vorhandenen Palette eine dunkle Farbe (bei hellem Hintergrund) als Textfarbe vorhanden ist. Oft reicht ja nicht nur eine, da für Headlines und/oder Linktexte weitere Textfarben mit hohem Kontrast benötigt werden.

Wenn nicht ausreichend passende Textfarben vorhanden sind, gilt es diese zu ergänzen oder die gewählten Farbtöne anzupassen. Für Fließtexte sind meistens dunkelgraue Töne passend. Reines Schwarz eher nicht, da Schwarz auf Weiß auf Bildschirmen zu kontrastreich ist. Es bietet sich zumindest für Fließtexte die Ergänzung eines dunklen Grautons an (oder, wenn der Hintergrund nicht rein weiß ist, ein tiefes schwarz als Textfarbe #000).

Dunkelgrau als Textfarbe ergänzt.

Dunkelgrau als Textfarbe ergänzt.

Mit dem Tool Accessible color palette builder lassen sich die Farbkombinationen auf Zugänglichkeit überprüfen.

Im Falle der oberen Farbtöne würden sich gerade einmal sechs geeignete Textfarbe-Hintergrundfarbe-Kombinationen ergeben. Der türkise und rot-pinke Farbton wären demnach nicht als Textfarbe geeignet – unabhängig ihre ästhetischen Wirkung. Mit dem sehr dunklen Grauton wären es immerhin zwölf mögliche Kombinationen.

 

6. Farbschema einsetzen

Ob eine Farbpalette gelungen ist, lässt sich eigentlich erst beurteilen, wenn Sie auf der Website zum Einsatz kommt. Sie kann vorher noch so ansprechend aussehen, erst im Praxis-Kontext kann die Tauglichkeit beurteilt werden.

So kann es auch passieren, dass hier Farbeigenschaften noch einmal angepasst werden müssen. Oder gar neue Farbtöne dazu kommen müssen, weil nicht alle Elemente mit den ausgewählten Farbtönen abgedeckt werden können.

Farbkombinationen Screendesign

Die Farbkombinationen im einem Screendesign.

Das sieht schon ganz gut aus, die Farbkombinationen ergeben einen angenehmen Kontrast. Zum einen zwischen hellen und dunklen Tönen und auch zwischen gesättigten und ungesättigten Farben, sowie die beiden markanten Farbtöne türkis und pink-rot.

Aber, wie oben gesehen, nach Accessibility-Regeln wären die Töne nur bedingt geeignet, da zu viele durch den Contrast Checker fallen würden. Hierzu müssten die helleren Farbtöne abgedunkelt werden, um für eine Textfarbe-Hintergrundfarbe-Kombination in Frage zu kommen:

Farbkombinationen Screendesign Accessibility

Die Farbkombinationen in einem Screendesign nach Accessibility-Richtlinien.

Durchaus auch noch schön anzusehen, halt nicht mehr ganz so strahlend leuchtend wie die Kombination zuvor.

 

7. Variationen gestalten

Je nach Projektanforderung und eigener Arbeitsweise kann es hilfreich sein, mehrere Farbvarianten zu erstellen/auszuprobieren. Bzw. mit den gewählten Farbtönen verschiedene Screendesign-Varainten umzusetzen.

Im Vergleich ergeben sich dann verschiedene (Farb-)designs, die man gut gegeinander vergleichen kann, evtl. auch mit Kunden besprechen und diskutieren kann.

Farbkombinationen Screendesign Variante

Eine weitere Screendesign-Variante mit denselben Farbtönen.

 

Methoden & Ablauf zur Findung  von Farbkombinationen

 

Praxisbeispiel Screendesign

Nachfolgende habe ich verschiedene Farbkombinationen in das Screendesign eingebaut, um zu zeigen wie gut sich unterschiedliche Entwürfe umsetzen lassen:

Analoges Farbschema

Wählt man Farben, die im Farbkreis nebeneinander liegen, wirken diese Kombinationen meistens harmonisch. Wie streng „nebeneinander“ definiert wird, ist dabei Auslegungssache.

Diese Farbkombinationen nennt man dann analoges Farbschema. Steht eine Ausgangsfarbe zur Verfügung, z.B. aufgrund der Corporate Design Vorgaben des Kunden, kann man gut weitere Farben ergänzen, die im Farbkreis in der Nähe liegen, um zu einer ansprechenden Kombination zu gelangen:

Screendesign analoges Farbschema

 

Farbschema Bunt-Unbunt

Eine der einfachsten und effektisten Wege zu einer Farbauswahl zu kommen ist, die Mischung aus bunten und unbunten Farben. Dazu sind diese Kombinationen meistens auch optisch ansprechend und kontrastreich.

Ein – meist käftiger – Farbton wird mit unbunten Tönen gemischt. Dies sind dann Graustufen und/oder Schwarz und weiß. Es sind nicht wenige Websites, die auf solch einer Kombinationen aufgebaut sind.

Screendesign Farbschema Bunt-Unbunt

Und der Wechsel der Hauptfarbe zeigt, wie schnell sich eine weitere Screendesign-Variante erstellen lässt:

Screendesign Farbschema Bunt-Unbunt

 

Farbschema mit dem Komplementärkontrast

Komplementärfarben liegen sich im Farbkreis gegenüber – wie beispielsweise Rot und Grün. Dadurch lässt sich eine sehr kontrastreiche Gestaltung umsetzen, die entsprechend markant/auffällig ist.

Aufpassen muss man nur, dass diese Farbkombinationen nur nebeneinander und nicht aufeinander eingesetzt werden. Also roter Text auf grünem Hintergrund geht gar nicht. Nebeinander verstärken sich die Farbtöne aber enorm.

Wenn eine der beiden Komplementärfarben nur dezent eingesetzt wird, z.B. für Highlights wie Buttons und Links, dann kann das Screendesign angenehm kontrastreich sein:

Screendesign Komplementärfarben

 

Farbschema Trend Pastell

Pastellfarben sind recht helle bunte Farben, die sich miteinander gut kombinieren lassen. Sie erzeugen eine helle und freundliche Stimmung, können aber auch fad und langweilig wirken, da der (Hell-Dunkel-)Kontrast gering ist.

Für dezente, harmonische Screendesigns können Pastellfarben eine gute Wahl sein:

Screendesign Pastellfarben

 

Farbschema Trendfarbe Blau

In meinem Artikel zu den Hex-Farben des Jahres habe ich einen Blauton als Trendfarbe bezeichnet, ausgerechnet Blau, die gefühlt auf jeder zweiten Seite zum Einsatz kommt. Dieser Blauton ist aber kräfitg, markant, fast leuchtend. Er nimmt sich weniger zurück, wie es die meisten Blautöne machen, sondern kommt auffällig, selbstbewusst daher.

Dieser Blauton wird gerne von Agenturen oder auf Portfolio-Seiten eingesetzt und auch gerne sehr großflächig. Dann braucht es auch keine weiteren bunten Farbtöne oder mehrfarbige Bilder als Ergänzung:

Screendesign Trendfarbe Blau

 

Fazit

Das Farbschema einer Website ist ein sehr wichtiges Gestaltungselement. Es beeinflusst die Wahrnehmung und Bedienbarkeit der Website entscheidend mit. Daher sind Kenntnisse, wie man zu einer guten Farbkombinationen gelangt, sehr wichtig.

Mit diesem Artikel habe ich einige Möglichkeiten und Wege aufgezeigt eine harmonische Farbkombination zu gestalten. Selten (eigentlich so gut wie nie) wird gleich der erste Versuch gelingen. Passe die Farbkombinationen so lange an, bis du das Gefühl hast, sie wirken harmonisch und die Konraste ausreichend für eine gute Lesbarkeit sind.

Wie gelangst du zu deinen Farbkombinationen? Gestaltest du diese völlig frei oder von welchen Quellen lässt du dich inspirieren?

Farbschema für die Website finden – Anforderungen & Wege mit vielen Praxisbeispielen
4.926 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

designletter abonnieren & als Dankeschön die WEBDESIGN-CHECKLISTE erhalten mit über 90 Checkpunkten für Dein nächstes Projekt:

Schließe dich über 2.200 Newsletter-Abonnenten an

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Webdesign Survival Kit

Autor:
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog.

Ein Kommentare

  1. Vielen Dank für den informativen und umfangreichen Artikel über die verschiedenen Herangehensweisen zur Farbfindung. Die zahlreichen Links sind ebenfalls hilfreich.

    Persönlich mag ich weniger die harten Farben, vielmehr bevorzuge ich eine kräftigere Farbe mit Pastell-Abstufungen. Gibt dem Gesamteindruck einen weicheren Farbtouch, den ich als angenehmer für die Augen empfinde.

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!