Farbe/Farbkonzept

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im Netz finden Sie zahllose Tools, mit denen Sie passende Farbkombinationen für Ihre Webseite finden können. In diesem Kurs zeigen wir Ihnen, wie Sie aufbauend auf einer Grundfarbe ein Farbkonzept entwickeln und Ihre Webseite mit Farbeffekten gestalten können. Dabei versuchen wir, besonderes Gewicht auf Barrierefreiheit zu legen, damit alle Nutzer Ihre Webseiten bestmöglich anschauen können.

Unter einem Farbkonzept versteht man die Auswahl mehrerer Farben in einer Farbpalette, die

  • harmonisch zueinanderpassen
  • einen ausreichenden Kontrast oder Tiefe bieten

und

  • der Webseite eine bestimmte Atmosphäre (vibrancy) geben.

Auswahl einer Grundfarbe

Als ersten Schritt müssen Sie aus Millionen von Farben eine Grundfarbe wählen, die den Grundton der Webseite bestimmt und Basis für alle weiteren Schritte ist. Hierbei können einige Vorüberlegungen helfen:

  • Bauen Sie auf Vorhandenem wie schon existierenden Webseiten oder bereits etablierten Logos auf, da Webprojekte meist nicht völlig neu entwickelt werden.
  • Vergleichen Sie Seiten der Mitbewerber und schließen Sie deren Farben aus, damit die Seiten nicht austauschbar scheinen.
  • Überlegen Sie, welche Atmosphäre die Webseite vermitteln soll und für welches Zielpublikum sie bestimmt ist.

Anregungen finden Sie auf vielen Seiten:

Siehe auch:

Ausgehend von diesem Grundton können Sie nun eine Farbpalette aus mehreren harmonisch zueinander passenden Farben zusammenstellen. Es gibt dafür viele Generatoren und Tools im Netz, die ihnen passende Farben vorschlagen.

Screenshot einer komplementären Palette von coolors.co
Screenshot einer komplementären Palette von Coolors.co

In einer monochromatischen Palette stellen Sie verschiedene Abstufungen von Sättigung und Helligkeit eines Farbtons zusammen.

Screenshot einer monochromatischen Farbpalette von adobe.kuler
Screenshot einer monochromatischen Palette von adobe.Kuler

So spektakulär die Ergebnisse dieser Generatoren aussehen, bieten sie oft jedoch zu viele Farben für eine Verwendung in Ihrer Webseite.

Farbenlehre

Deshalb wollen wir erst einmal einige Grundlagen der Farbenlehre studieren. Farbe ist ein durch das Auge und Gehirn vermittelter Sinneseindruck, der durch Licht hervorgerufen wird. Um diesen subjektiven Eindruck verständlich wiederzugeben, haben sich Begriffe und Denkmodelle entwickelt.

Eigentlich gibt es zwischen den Grundfarben Millionen von verschiedenen Farben:

von Rot über Gelb nach Grün

von Grün über Cyan nach Blau

von Blau über Magenta nach Rot

Interessant ist, dass die für uns so klare Einteilung in die Farben des Tuschkastens nicht selbstverständlich ist:

  • Die Farbe Orange findet sich in Europa erst seit dem 15. Jahrhundert; [1] vorher wurde es entweder Gelb oder Rot zugeordnet
  • Grün und Blau erscheinen in vielen Kulturkreisen als eine Farbe, für die es nur ein Wort gibt.[2]
  • Purpur und purple waren ursprünglich Begriffe für das Rot der Gwänder hoher Würdentrager, während
    Purpur aus dem Farbstoff der Purpurschnecke gewonnen wurde und ein beständiges Lila ergab,
    behalf man sich im Mittelalter mit dem Farbstoff der Cochenilleschildläuse, der ein Purpurrot (auch Karminrot) erzeugte.[3]

Farbkreis

Farbkreis

Ausgangspunkt ist der Farbkreis, der auf ersten Entwürfen von Newton und Goethe basiert und in dem die Farben kreisförmig geordnet werden.[4][5]

Der Farbkreis besteht aus

  • drei primären Farben (Rot, Gelb und Blau),
  • drei sekundären Farben (Grün, Orange, Lila), die erzeugt werden, wenn die Grundfarben miteinander vermischt werden, und
  • sechs tertiären Farben:

Farbkreis Primärfarben

Farbkreis Sekundärfarben

Farbkreis Tertiärfarben

Harmonielehre

Häufig ist von Farbharmonie die Rede. Damit ist nicht unbedingt nur die Harmonie im Sinne von Ausgewogenheit, Ebenmaß, Gleichklang, Ruhe oder Übereinstimmung gemeint. Es können ebenso gut laute, schrille, unruhige Farbzusammenstellungen gemeint sein, die dann besondere Aufmerksamkeit erregen.

Farbkreis Komplementärfarben

Farbkreis Triade

Tetradische Farben

In einem komplementären Farbschema werden zwei, drei (Triade) oder vier (Tetrade) gegenüberliegende Farben miteinander kombiniert.

Beachten Sie: Eine Verwendung von Komplementärfarben für Text- und Hintergrundfarbe ergibt oft einen zu geringen Kontrast. Die Komplementärfarben Dotter und Violett ergeben mit einem Verhältnis von 1:4.74 einen relativ hohen Kontrast -
Rot und Grün dagegen nur 1:1.05!

Hauptartikel: Farbe/Farben und Kontraste

KAlt-Warm-Kontrast

Farbkreis Analogefarben

Monochrome Töne

Gelb (wie die Sonne) und rot (wie Feuer) gelten als warme Farben; blau und grün als eher kalt. Dies ist in Einzelfällen reizvoll, spielt allgemein aber nur eine untergeordnete Rolle.

Wichtiger ist die Auffächerung eines Komplementärkontrasts mit einer oder zwei benachbarten Farben. So kann man bei der Zweier-Harmonie Gelb/Violett das Gelb um die Sekundärfarben der Farbfamilie Gelb erweitern. So wird bei einem Klick ein Button von Gelb auf Dotter gefärbt, um die Interaktion sichtbar zu machen.

Besonders interessant ist dies, wenn nicht der Farbton, sondern nur die Helligkeit der Farbe angepasst wird. Solche monochromatische Paletten eigenen sich besonders für einen Hell-Dunkel-Kontrast wie im rechten Beispiel.

Farbreihen

Farbreihen sind neben Winkelharmonien die zweite Möglichkeit, einen harmonischen Farbeindruck zu erzielen. Farbreihen wirken auch dann noch harmonisch, wenn keine Winkelharmonie vorliegt. Eine Farbreihe sind aneinandergereihte Flächen, deren Farbe sich systematisch stufenweise ändert. Eine Farbreihe wäre z.B. Gelb, Lind, Grün, Türkis, Cyan, Blau:

Farbreihe mit gleicher Helligkeit und Sättigung:

Farbreihe mit abnehmender Helligkeit und Sättigung:

Von links nach rechts wird es stufenweise dunkler und unbunter. Solche Kontraste werden Bunt-Unbunt-Kontrast sowie Hell-Dunkel-Kontrast genannt.

Farbreihe mit abnehmender Helligkeit und zunehmender Sättigung:

Die letzte Grafik hat ebenfalls einen Hell-Dunkel- und einen Bunt-Unbunt-Kontrast, nur fängt es diesmal hell und unbunt an und hört bunt auf.

Einen solchen Hell-Dunkel-Kontrast kann man erreichen, wenn Farben weder einen bestimmten Farbton noch eine Sättigung aufweisen und dadurch unbunt werden.[6]

Im L*a*b*-System ist es die L*-Achse; bei hsl()-Räumen befinden sich die unbunten Farben entlang der Hellwertachse.[7]

Empfehlung:
Verändern Sie die Helligkeit der Farbtöne, um den Kontrast zwischen Text und Hintergrund zu erhöhen.


Farbton, Schattierung, Tönung und Ton

Jeder Farbton kann durch Mischung mit Schwarz- und Weißanteilen entweder schattiert oder getönt werden:


Schattierungen mit dem HWB()-Modell

Von der Grundfarbe zum Farbkonzept

Auswahl passender Grautöne

Aus den oben genannten Gründen ist die Umsetzung eines rein komplementären Farbschemas im Webdesign oft nicht praktikabel.

Deshalb sollten Sie neben den Farben der Farbpalette auch zwei oder drei neutrale Farben verwenden:

  • weiß
  • dunkelgrau oder schwarz
  • evtl. noch einen hellgrauen Zwischenton

Diese ergänzen zwei Farben:

  • unsere Grundfarbe
  • eine oder mehrere Akzentfarbe(n) für Buttons, mit denen Sie Interaktion signalisieren.

Ein direkter Gegensatz von schwarzer Schrift auf weißem Hintergrund wirkt oft zu schroff, sodass für Text oft ein dunkles Grau verwendet wird. Um wichtige Inhalte vom Hintergrund abzusetzen, können Sie dort ein helleres Grau verwenden.

Farbpalette mit neutralen Farben und eine Akzentfarbe
Farbpalette mit neutralen Farben und einer Akzentfarbe

Graustufen wirken noch besser, wenn Sie sie harmonisch mit der Grundfarbe abstimmen.

Auswahl einer Akzentfarbe

Für UI-Elemente wie Call-To-Action-Buttons benötigen Sie noch eine (oder mehrere) Akzentfarbe(n). Sie sollten sich deutlich von der Grundfarbe und den Grautönen abheben, damit Buttons schnell erkennbar sind.

Im nächsten Abschnitt zeigen wir Ihnen Beispiele, wie so eine Farbpalette aussehen kann.

Beispiele für Paletten

Gerade wenn Sie ein zusätzliches Farbschema im Dark Mode anlegen wollen, reicht eine Palette mit einzelnen Farbtönen nicht mehr aus. Hier ist es empfehlenswert, von vorneherein mehrere Farbtöne in mehreren Helligkeitsabstufungen anzulegen:

SELF-Farbpalette

SELF-Logo.svg

2012 wurde das klassische Braun durch ein frisches Design ergänzt: Der SELF-Blog erschien in frischem Blau-gelb mit dazugehörendem neuen Logo. Die Farben wurden ebenfalls vom Wiki und dem Forum übernommen und bieten heute ein durchdachtes Gesamtkonzept für den gesamten SELF-Raum:

Farbe Grundton Heller Verwendung
gelb #dfac20
hsl(44 75% 50%)
hsl(44 75% 50% /.1) Beispiele
grün #8db243
hsl(80 45% 48%)
hsl(80 45% 48% /.2) Hinweise, Empfehlungen
rot #c82f04
hsl(13 96% 39%)
hsl(13 96% 39% /.1) (System)-Warnungen, Achtung
blau #337599
hsl(201 50% 38%)
hsl(201 50% 38% /.1) links, Info-Boxen

Und passende Grautöne in passender Helligkeit zur Primärfarbe

Grautöne #333
hsl(0 0% 20%)
#5d7380

hsl(202 16% 45%)

hsl(202 16% 45% /.75) hsl(202 16% 45% / .5) hsl(202 16% 45% / .1)
  • Self-Farbtabelle (mit weiteren Reservefarben, dadurch aber nicht so übersichtlich)

Das klassische braun-beige

Netz-Logo(1995-2012)

Von manchen immer noch vermisst: Ausgehend von den Farben des Netz-Logos (für das mit Hypertext verwobene Internet; nicht für einen Ammoniten) wurde 1998 mit der Version 7.0 ein braun-beiges Design eingeführt.

Farbe Heller Grundton Dunkler
Grundfarbe #ffeedd
(Hintergrund für Navigation)
#AA5522
a
#772200
a:visited
Akzentfarbe #FFFFE0
(Hintergrund für Beispiele)
#0000C0
code
Grau #eeeeee
(Hintergrund)

Die braunen Töne wurden aber nur für Links verwendet und waren so trotz allem dezent. Ein wirklich „braunes Design“ wurde erst mit der nicht verwirklichten SELFHTML 9 und testweise im Wiki versucht:

TV-Farbpalette

Farbe Heller-2 Heller Grundton Dunkler Dunkler-2
Grundfarbe hsl(55 97% 92%)
#fefbd9
hsl(55 97% 82%)
#fdf381
hsl(55 97% 62%)
#fcec40
hsl(55 97% 42%) hsl(55 97% 22%)
Akzentfarbe 1 hsl(0 66% 80%) hsl(0 66% 60%) hsl(0 66% 40%)
#cb2a32
hsl(0 66% 30%) hsl(0 66% 15%)
Akzentfarbe 2 hsl(120 100% 90%) hsl(120 100% 70%) hsl(120 100% 25%)
#00 80 00
hsl(120 100% 20%) hsl(120 100% 10%)
Linkfarben hsl(256 90% 80%)
hsl(256 90% 60%)
#3b0ac2
hsl(256 90% 40%)
hsl(256 90% 30%)
hsl(256 90% 15%)

Und passende Grautöne in passender Helligkeit zur Primärfarbe

Grautöne #F1F1F1 #ECECEC #DBDBDB #C8C8C8 #a0a0a0

ZUM-Palette

Farbe Heller-2 Heller Grundton Dunkler Dunkler-2
primär #FFF0A2 #FFEA77 #F1D850 #DDC128 #AE9612
sekundär-1 #E993BF #D965A0 #C64285 #B6216D #8F0F50
sekundär-2 #84C5CE #52A1AC #338894 #1B7A88 #0D5F6B
komplementär #A591D7 #7B62BC #5E43A5 #482998 #321878
Linkfarben #0077dd #005599

Und passende Grautöne in passender Helligkeit zur Primärfarbe

Grautöne #F1F1F1 #ECECEC #DBDBDB #C8C8C8 #a0a0a0

Quelle: Farbenvielfalt (zum-unterrichten)


Im nächsten Kapitel zeigen wir, dass es beim Einsatz solcher Paletten aber durchaus einiges zu beachten gibt.


Weblinks

  1. Orange (colour) - History and Art (wikipedia.en.org)
    Im England der Mitte des 16. Jahrhunderts war die Farbe, die als "Orange" bezeichnet wurde, rötlich-braun und entsprach dem schlechten Aussehen der Frucht nach einer langen Reise von ihrem Anbauort in Portugal oder Spanien. Durch Verbesserungen im Transportwesen und die Einführung eines Orangenhains in Surrey wurde die frische Frucht in England bekannter, und die Farbe, die als "Orange" bezeichnet wurde, wandelte sich um 1600 zu ihrem heutigen Verständnis.
  2. Grün und Blau in verschiedenen Sprachen (wikipedia.de.org)
  3. Karmin (wikipedia.de.org)
  4. Entwicklung der Farbkreise (wikipedia.de.org)
  5. Die Grundlagen der Farbenlehre von Kris Decker (99designs.de)
  6. Unbunt (wikipedia.de.org)
  7. https://kulturbanause.de/faq/bunt-unbunt-kontrast/