Eines der schwierigsten Aspekte bei der Gestaltung eines Screendesigns ist die Auswahl einer Farbkombination.

Einer Farbkombination, die zum Thema passt und deren Farben vor allem auch untereinander passen und harmonieren.

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

  • Wie viele Farben sollen gewählt werden?
  • Welches ist die Hauptfarbe?
  • Mit welchem Farbton werden Highlights gesetzt?
  • Werden noch weitere Farbtöne oder Farbabstufungen gebraucht?

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

Die Farbwahrnehmung –
Drei Eigenschaften einer Farbe

Wir können bei einer Farbe 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.

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 mit exemplarischer Farbauswahl

Der Farbkreis mit exemplarischer Farbauswahl

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

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.

Verschiedene Sättigungen

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

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.

Die digitalen Farbwerte

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

Neben den bekannten Farbmodellen wie RGB und CMYK, gibt es auch die Option die drei Farbeigenschaften Farbton, Helligkeit und Sättigung einzeln zu definieren:

Die HSB-Werte in Adobe Photoshop.

Die Farbton, Sättigungs und Helligkeits-Werte in Adobe Photoshop.

Dies ist das HSB-Farbmodell. Hier werden die Farben definiert durch:

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

Die Einstellung des Farbtons.

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.

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 der Helligkeit.

Die Einstellung der Helligkeit.

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

So viel zu (grauen) Theorie.

Schauen wir uns in der praktischen Umsetzung an, was das bedeutet:

Die Basis-Farbpalette

Um ein Farbschema für ein Screendesign zu finden, sind immer mehrere Farben notwendig. Als Basis-Farbpaket bietet es sich an zuerst eine kleine Auswahl an Farben zu definieren, die zusammen passen und sich gut ergänzen. Diese Auswahl kann später im Gestaltungsprozess immer noch bei Bedarf durch weitere Farbtöne oder Sättigungs- und Helligkeitsabstufungen ergänzt werden.

Das Basis-Farbpaket geht von drei Farbönen aus:

  • Einer Hintergrundfarbe,
  • einer Basisfarbe,
  • einer Textfarbe,
  • und einer Akzentfarbe.

Diese Farben sind niemals unabhänig voneinander auswählbar. Die gewählten Farben müssen zusammen harmonieren, also nebeneinander gut aussehen. Und vor allem sollten die Farben auch „aufeinander“ passen:

Die Textfarbe muss auf der Hintergrundfarbe gut lesbar sein. Die beiden Farben müssen sich also ausreichend unterscheiden. Haben beispielsweise beide Farbtöne eine sehr ähnliche Helligkeit oder einen sehr ähnlichen Farbton wird die Lesbarkeit entscheidend eingeschränkt.

Farbtöne

Auf der linken Seite sind die Farbtöne zu ähnlich, rechts sind sie angepasst.

Helligkeiten

Auf der linken Seite sind die Helligkeiten zu ähnlich, rechts sind sie angepasst.

Hintergrundfarbe

Die Hintergrundfarbe nimmt quantitativ den größten Raum ein. Sie prägt die Wirkung der Webseite entscheidend. Häufig wird daher ein dezenter Ton gewählt, der sich eben auch optisch im Hintergrund aufhält.

Wird ein kräftiger Ton als Hintergrundfarbe gewählt, nehmen sich meistens die anderen Farben zurück.

Basisfarbe

Die Basisfarbe bricht den Hintergrund auf und muss einen ausreichenden Kontrast zur Hintergrundfarbe besitzen.

Während sich die Hintergrundfarbe eher zurücknimmt (oder manchmal auch stark dominiert), ist die Basisfarbe eher neutral, weder langweilig noch zu schrill. Als Textfarbe muss sie vor allem für eine gute Lesbarkeit sorgen. Sie ist das Bindeglied zwischen dem Hintergrund und der Highlightfarbe.

Textfarbe

Manchmal wird die Basisfarbe als Textfarbe (Fließtext, Überschriften usw.) eingesetzt. Je nach Kontrast und Wirkung wird als Textfarbe aber auch Schwarz, Weiß oder eine Grauabstufung genommen.

Akzentfarbe

Die Akzentfarbe wird für Hightlights eingesetzt und wird quantativ am wenigsten eingesetzt. Dafür wirkt sie qualitativ am stärksten.

Sie hat meistens einen sehr großen Kontrast zur Hintergrundfarbe, oft auch zur Basisfarbe, um entsprechend auffallen zu können und Schwerpunkte setzen zu können.

Die Akzentfarbe prägt nicht selten das Design entscheidend mit. Während die Hintergrundfarbe die allgemeine Stimmung, so etwas wie den Grundton definiert, ist die Akzentfarbe für die markanten Töne zuständig. Diese, die dann auch am prägendsten im Gedächtnis bleiben.

Farben finden

Um nun passende Farbkombinationen zu finden, kann man sich die allgemeinen Farbkontraste zu Nutze machen.

Nochfolgend einige Beispiele von Farbkontrasten und das Finden von passenden Farbkombinationen.

Farbe-an-sich-Kontrast

Dieser Kontrast entsteht aus dem Zusammenspiel meist kräftiger Farbtöne.

Beispiele für den Farbe-an-sich-Kontrast

Beispiele für den Farbe-an-sich-Kontrast

Kalt-Warm-Kontrast

Ein sehr intensiver Kontrast, der auf dem Temperaturempfinden von Farben beruht.

Beispiel für eine Farbpalette mit einem Kalt-Warm-Kontrast

Beispiel für eine Farbpalette mit einem Kalt-Warm-Kontrast

Komplementär-Kontrast

Diese Farben liegen im Farbkreis gegenüber und bilden einen sehr starken Kontrast.

Beispiel für eine Farbpalette mit einem Komplementärkontrast-Kontrast

Beispiel für eine Farbpalette mit einem Komplementärkontrast-Kontrast

Bunt-Unbunt-Kontrast

Kontrast entsteht zwischen einer bunten und einer neutralen Farbe (z.B. Schwarz oder Grau).

Beispiel für eine Farbpalette mit einem Bunt-Unbunt-Kontrast

Beispiel für eine Farbpalette mit einem Bunt-Unbunt-Kontrast

Monochromes Farbschema

Kontrast zwischen verschiedenen Helligkeits- und Sättigungsabstufungen eines Farbtons.

Hier muss der Kontrast vor allem auf einem eindeutigen Helligkeitsunterschied liegen.

Beispiel für eine Farbpalette mit einem monochromen Farbschema

Beispiel für eine Farbpalette mit einem monochromen Farbschema

Analoges Farbschema

Kontrast zwischen Farben, die im Farbkreis nebeneinander liegen.

Beispiel für eine Farbpalette mit einem analogen Farbschema

Beispiel für eine Farbpalette mit einem analogen Farbschema

Praxis-Beispiele:
Screendesigns und ihre Basis-Farbpalette

Die folgenden Bilder zeigen Webseiten und ihre Basis-Farbpalette. Diese lassen sich in fast allen Beispielen erweitern und durch weitere Farbabstufungen ergänzen. Dazu die Hellgikeiten und/oder Sättigungen der einzelnen Farbtöne verändern.

farbpalette-beispiel-1

farbpalette-beispiel-2

farbpalette-beispiel-3

farbpalette-beispiel-4

Auffallend und wichtig ist dabei folgender Aspekt:
Die Basisfarbe, die Textfarbe und die Akzentfarbe müssen sich ausreichend von der Hintergundfarbe unterscheiden. Gerade bei der Textfarbe muss der Hell-Dunkel-Kontrast groß genug sein für eine ausreichende Lesbarkeit.

Eigene Praxis

Probiere es selber aus. Suche in Webdesign-Galerien nach interessanten Webseiten und versuche das Basis-Farbschema zu extrahieren.

Versuche eigene Basis-Farbpaletten zu gestalten. Nimm dir die Farbkontraste zu Hilfe und finde geeigente Kombinationen.

Tip: 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.

So entwirfst du ganz einfach eine Farbpalette für deine Webseite
4.6221 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Webdesign-Newsletter +
WEBDESIGN-CHECKLISTE
mit 90 Checkpunkten für
Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht und Adressen gebe ich natürlich auch nicht weiter!
(Beispiele, Datenschutz, Analyse und Widerruf)

Über den 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.
Tägliche Webdesign-Links von Martin gibt es auch auf twitter.

6 Kommentare

  1. Hi Martin,

    toller Artikel wie immer!

    Gruß Mika

    • Danke Mika 🙂

Trackbacks/Pingbacks

  1. Ganz einfach eine Farbpalette für eine Web...
  2. Farbgestaltung im UI-DesignFrau Barth bloggt | Frau Barth bloggt
  3. Content vs. Design – Was nun „first“? - Webdesign Journal
  4. Die Social Web News aus der 28. KalenderwocheSocial Web News

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!