Farben wirken, bevor jemand ein Wort gelesen hat. Sie wecken Emotionen, schaffen Wiedererkennung und lenken den Blick.
Dieser Beitrag zeigt die Grundlagen der Farbtheorie, die Wirkung einzelner Farben und worauf es bei Kontrast und Barrierefreiheit ankommt. Zum Schluss gibt es eine Checkliste für Ihre eigene Farbpalette.
Webdesign und Farbgestaltung: Was gehört dazu?
Webdesign verbindet Technik und Gestaltung. Dazu gehören Layout, Typografie, Grafiken und Farben.
Farbgestaltung ist die bewusste Auswahl und Anwendung von Farben. Sie wirkt bewusst und unbewusst: Farben erzeugen Stimmungen, lenken die Aufmerksamkeit und transportieren Botschaften. Ein kühles Blau steht für Vertrauen und Ruhe, ein kräftiges Rot für Energie.
Entscheidend ist nicht die einzelne Farbe, sondern das Zusammenspiel der Palette. Es bestimmt mit, ob ein Besucher bleibt oder geht.
Farbkreis, Harmonie und Kontrast
Der Farbkreis geht auf Isaac Newton zurück. Er zeigt, wie Farben zueinander stehen, und hilft, harmonische Kombinationen zu finden. Für den Bildschirm gilt die additive Farbmischung: Jede Farbe entsteht aus Rot, Grün und Blau (RGB).
Farbharmonien suchen Kombinationen, die angenehm wirken und zugleich Inhalte hervorheben. Kontrast lenkt den Blick auf das Wichtige. Hoher Kontrast zwischen Text und Hintergrund verbessert die Lesbarkeit, geringer Kontrast eignet sich nur für Flächen, nicht für Text.
Komplementär
Farben, die sich im Farbkreis gegenüberliegen. Sie erzeugen starken Kontrast und Spannung.
Analog
Farben, die im Farbkreis nebeneinanderliegen. Sie wirken harmonisch und ruhig.
Farbpsychologie: Wie Farben wirken
Farben beeinflussen Gefühle und Handlungen. Diese Wirkung nutzt die Farbpsychologie. Ein Grundlagenwerk dazu ist „Color Psychology and Color Therapy“ von Faber Birren.
Die Wirkung hängt auch von Kultur und Zusammenhang ab. Warme Orangetöne können einladend wirken, aber je nach Assoziation auch abschrecken.
| Farbe | Typische Wirkung | Häufiger Einsatz |
|---|---|---|
| Rot | Energie, Leidenschaft, Aufmerksamkeit | Handlungsaufrufe, wichtige Hinweise |
| Blau | Vertrauen, Ruhe, Sicherheit | Unternehmen, Banken, Gesundheit |
| Grün | Ruhe, Natur, Wachstum | Nachhaltigkeit, Gesundheit, Bestätigungen |
| Orange | Wärme, Aktivität | Handlungsaufrufe, freundliche Akzente |
| Erdtöne | Bodenständigkeit, Heimat | Regionale Produkte und Handwerk |
Beispiele bekannter Marken
Große Marken zeigen, wie konsequente Farbwahl eine Marke trägt.
Netflix
Kräftiges Rot auf dunklem Grund. Das Rot zieht sofort den Blick, der dunkle Hintergrund wirkt mutig und passt zu einer Marke für Unterhaltung.
Spotify
Das markante Grün kennzeichnet konsequent die wichtigen Bedienelemente. Wer es einmal gelernt hat, findet sich überall zurecht.
Airbnb
Ein warmer Rotton steht für Gastfreundschaft und schafft einen einladenden ersten Eindruck.
BBC
Hohe Kontraste und eigene Richtlinien zur Barrierefreiheit sorgen dafür, dass die Inhalte für ein breites Publikum zugänglich sind.
Farben und Region: der Bezug zu Rostock
Wer regional verankert ist, kann das in der Farbwahl zeigen. In Rostock liegen maritime Blautöne nahe: Ostsee, Hafen, Himmel. Sie wirken seriös und vertrauenswürdig.
Erdtöne und das Rot von Backstein erinnern an Geschichte und Handwerk. Sie passen zu regionalen Produkten und Dienstleistungen. Lebendige Akzentfarben sprechen eher ein junges Publikum an.
Ein Farbkonzept mit regionalem Bezug stärkt die Bindung zu den Kunden vor Ort. Es sollte aber immer zur Marke passen, nicht nur zur Stadt.
Farbe in Navigation und Benutzeroberfläche
Farben führen Besucher durch die Seite. Drei Regeln haben sich bewährt.
Handlungsaufrufe hervorheben
Buttons für Anfrage, Termin oder Kauf bekommen eine Farbe, die sich deutlich vom Rest abhebt. Warme Töne wie Orange ziehen die Aufmerksamkeit an. So erkennen Besucher sofort, wo es weitergeht.
Farben konsequent einsetzen
Eine Farbe, eine Bedeutung: Wenn Links blau sind, sind alle Links blau. Unterschiedliche Bereiche dürfen sich farblich unterscheiden, aber nach einem festen System.
Vertrauen schaffen
Kühle Töne wie Blau wirken beruhigend. Das hilft Seiten, auf denen Vertrauen zählt, etwa bei Banken, Praxen oder Gesundheitsdiensten.
Barrierefreiheit: Kontraste prüfen
Kontraste entscheiden, ob alle Menschen Ihre Seite lesen können, auch mit Sehschwäche oder Farbsehschwäche. Die WCAG fordern für normalen Text ein Kontrastverhältnis von mindestens 4,5:1, für großen Text 3:1.
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Für viele Online-Angebote an Verbraucher ist ausreichender Kontrast damit Pflicht.
Verlassen Sie sich nie allein auf Farbe. Ein Fehler im Formular braucht neben dem roten Rahmen auch einen Text.
Typische Herausforderungen und Lösungen
Gute Farbgestaltung braucht Gespür und Technik. Mit den richtigen Werkzeugen lassen sich die typischen Hürden meistern.
| Herausforderung | Lösung | Werkzeug |
|---|---|---|
| Das passende Farbschema finden | Farbpsychologie und Zielgruppe berücksichtigen, Paletten ausprobieren | Adobe Color, Coolors |
| Farben einheitlich anwenden | Styleguide mit genauen Farbcodes und Einsatzregeln für das ganze Team | Eigener Styleguide |
| Barrierefreiheit einhalten | Kontraste messen, Farbsehschwächen simulieren | WebAIM Contrast Checker, Color Oracle |
| Unterschiedliche Bildschirme | Farben auf mehreren Geräten und bei unterschiedlichem Licht testen | Eigene Geräte |
| Ladezeit | Flächen und Verläufe per CSS statt als Bild, Bilder komprimieren | TinyPNG |
Ausblick: Wohin sich Farbgestaltung entwickelt
Mutige, kräftige Farbtöne gewinnen an Bedeutung. Sie fallen auf und transportieren eine klare Markenbotschaft.
Barrierefreiheit wird wichtiger, ebenso Designs, die auf vielen Geräten und bei jedem Licht funktionieren. CSS-Farben ersetzen zunehmend Bilder und halten die Seiten schnell. Künstliche Intelligenz dürfte künftig helfen, Farbschemata für unterschiedliche Nutzer anzupassen.
Zum Autor: Hinter diesem Beitrag steht unser Team, das seit über 15 Jahren Websites und Erscheinungsbilder entwickelt, unter anderem für Universitätskliniken, Arzt- und Zahnarztpraxen, Hotels sowie kleine und mittelständische Unternehmen. Mehr über die Gestaltung von Logos und Erscheinungsbildern zeigt unsere Seite Design, Fotografie und Druck.
