Farbtheorie ist die Lehre von Farben, ihren Beziehungen untereinander und ihrer Wirkung auf den Menschen. Im Webdesign ist sie die Grundlage jeder visuellen Entscheidung: von der Wahl der Brand-Farbe über die Farbgebung von Buttons bis zur Zugänglichkeit von Text für Menschen mit Sehschwäche.
Farbe ist das erste, was ein Besucher einer Website unbewusst wahrnimmt – noch vor Texten oder Bildern. In einem Experiment von Colorcom (2010) entschieden Nutzer innerhalb von 90 Sekunden über ihr Gefühl gegenüber einem Produkt, wobei bis zu 90 % dieser Entscheidung allein auf Farbwahrnehmung basierte.
Der Farbkreis und Farbklassifikation
Isaac Newton legte 1704 mit seinem Spektrum den Grundstein für den modernen Farbkreis. Das heute gängige RYB-Modell (Rot, Gelb, Blau) für Pigmentfarben und das additive RGB-Modell für Licht bilden die Basis für alle Farbsysteme.
Primär-, Sekundär- und Tertiärfarben
| Kategorie | Farben | Entstehung |
|---|---|---|
| Primärfarben | Rot, Gelb, Blau (Pigment) / Rot, Grün, Blau (Licht) | Nicht mischbar |
| Sekundärfarben | Orange, Grün, Violett | Mischung zweier Primärfarben |
| Tertiärfarben | Rot-Orange, Gelb-Orange, Gelb-Grün, usw. | Primär + benachbarte Sekundärfarbe |
Farb-Eigenschaften
- Farbton (Hue): Die eigentliche Farbe (Rot, Blau, Grün) – Position im Farbkreis
- Sättigung (Saturation/Chroma): Intensität der Farbe; 0 % = Grau, 100 % = reine Farbe
- Helligkeit (Brightness/Lightness): Hellwert; 0 % = Schwarz, 100 % = Weiß
- Tint: Farbe + Weiß (aufgehellt)
- Shade: Farbe + Schwarz (abgedunkelt)
- Tone: Farbe + Grau (gedämpft)
Farbharmonien: Wie Farben harmonisch zusammenwirken
Farbharmonien sind bewährte Regeln für Farbkombinationen, die angenehm wirken. Sie werden im Farbkreis geometrisch definiert.
Komplementärfarben
Farben, die sich im Farbkreis gegenüberstehen. Der Kontrast ist maximal, was CTAs und Akzente besonders wirkungsvoll macht.
Beispiel: Blau (#075CE1) + Orange (#E17207) Einsatz: Wenn maximale Aufmerksamkeit auf ein Element gelenkt werden soll
Analoge Farben
Benachbarte Farben im Farbkreis (3–5 Farben nebeneinander). Wirken harmonisch, ruhig und natürlich.
Beispiel: Blau → Blauviolett → Violett Einsatz: Hintergründe, Gradients, natürliche Themen
Triadische Farben
Drei gleichmäßig im Farbkreis verteilte Farben (je 120° Abstand). Lebendig und ausgewogen.
Beispiel: Rot + Blau + Gelb Einsatz: Bunte, energiegeladene Designs (Bildung, Kinder, Sport)
Split-Komplementärfarben
Eine Farbe plus die beiden Nachbarfarben der Komplementärfarbe. Weniger Kontrast als Komplementär, aber mehr Dynamik als Analog.
Tetradic / Quadratisch
Vier Farben in einem Rechteck oder Quadrat im Farbkreis. Reich, aber schwer zu balancieren.
Faustregel: Eine Farbe dominiert (60 %), eine unterstützt (30 %), eine hebt hervor (10 %).
Farbpsychologie: Farben und ihre Wirkung
| Farbe | Assoziationen | Typische Branchen |
|---|---|---|
| Blau | Vertrauen, Sicherheit, Kompetenz, Seriosität | Technologie, Finanzen, Medizin, Versicherungen |
| Grün | Natur, Gesundheit, Nachhaltigkeit, Wachstum | Bio-Lebensmittel, Umwelt, Gesundheit, Finanzen |
| Rot | Energie, Dringlichkeit, Leidenschaft, Gefahr | Lebensmittel, Sale/Rabatt, Sport, Automotive |
| Orange | Freundlichkeit, Kreativität, Enthusiasmus, Wärme | Startups, kreative Agenturen, Lebensmittel |
| Gelb | Optimismus, Freude, Aufmerksamkeit, Wärme | Tourismus, Bildung, Lebensmittel, Rabatte |
| Lila/Violett | Luxus, Kreativität, Spiritualität, Weisheit | Luxury-Brands, Beauty, Spiritualität |
| Schwarz | Luxus, Eleganz, Stärke, Autorität | Luxury, Mode, Automotive, Tech |
| Weiß | Reinheit, Klarheit, Minimalismus, Sauberkeit | Healthcare, Technologie, Mode, Luxus |
Wichtiger Hinweis: Farbpsychologie ist kulturell geprägt. Weiß symbolisiert in Japan und China Trauer; Grün hat im Islam religiöse Bedeutung. Für internationale Websites ist kulturelle Farbsensitivität essentiell.
Farbmodi im Digitalen und Druckbereich
RGB: Der Standard für Bildschirme
RGB (Rot, Grün, Blau) ist das additive Farbmodell – Licht wird addiert. Jeder Kanal hat einen Wert von 0–255.
Beispiel: rgb(7, 92, 225) = leuchtendes Blau
HEX: Hexadezimale Kurzschreibweise von RGB
HEX kodiert RGB-Werte hexadezimal (0–9, A–F). Jedes Farbpaar entspricht einem RGB-Kanal.
#075CE1 = R: 07 = 7 | G: 5C = 92 | B: E1 = 225
HSL: Intuitives Modell für Entwickler
HSL (Hue, Saturation, Lightness) ist für programmatische Farbvariationen ideal. Hue ist der Farbton (0–360°), Saturation die Sättigung (0–100 %), Lightness die Helligkeit (0–100 %).
/* Primärfarbe mit HSL-Variationen */
:root {
--color-primary: hsl(221, 94%, 45%); /* #075CE1 */
--color-primary-light: hsl(221, 94%, 65%); /* Aufgehellt */
--color-primary-dark: hsl(221, 94%, 25%); /* Abgedunkelt */
}
Der Vorteil: Um eine Primärfarbe heller oder dunkler zu machen, ändert man nur den Lightness-Wert – keine Umrechnung nötig.
CMYK: Für den Druck
CMYK (Cyan, Magenta, Yellow, Key/Black) ist das subtraktive Modell für den Druckbereich. Web-Farben in RGB/HEX müssen für Druckprodukte nach CMYK konvertiert werden – dabei entstehen oft Farbabweichungen, da CMYK einen kleineren Farbraum hat.
Kontrastverhältnisse und Barrierefreiheit
Kontrast ist nicht nur eine ästhetische Entscheidung – er ist eine Zugänglichkeitsanforderung. Schlechter Farbkontrast schließt Menschen mit Sehschwäche oder Farbenblindheit aus.
| WCAG-Stufe | Normaler Text | Großer Text (≥18px / ≥14px fett) |
|---|---|---|
| AA (Mindest) | 4,5:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4,5:1 |
Farbenblindheit beachten: Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbenblindheit. Die häufigste Form (Rot-Grün-Schwäche) macht es unmöglich, Rot von Grün zu unterscheiden. Erfolgs- und Fehlermeldungen sollten daher nie ausschließlich durch Farbe kommuniziert werden – immer ein Icon oder Text ergänzen. Mehr dazu unter Barrierefreiheit im Web.
Farben im Branding: Strategische Farbwahl
Die Wahl einer Markenfarbe ist eine strategische Entscheidung mit langfristigen Konsequenzen. Erfolgreiche Markenfarben sind:
- Distinktiv: Erkennbar in einer Kategorie voller Wettbewerber
- Bedeutungstragend: Unterstützen die Markenpersönlichkeit und Positionierung
- Konsistent: Werden über alle Touchpoints einheitlich eingesetzt
- Zugänglich: Erfüllen WCAG-Kontrastverhältnisse in allen Anwendungen
Farbpaletten-Struktur für Webprojekte
Eine professionelle Webseiten-Farbpalette umfasst:
- Primärfarbe: Hauptmarkenfarbe (CTAs, Links, Highlights)
- Sekundärfarbe: Akzent (Hover-Zustände, sekundäre CTAs, Gradients)
- Neutral-Palette: 5–9 Grautöne (Text, Hintergründe, Borders, Schatten)
- Semantische Farben: Erfolg (Grün), Fehler (Rot), Warnung (Orange/Gelb), Info (Blau)
- Surface-Farben: Hintergrund-Varianten für Light/Dark Mode
Farbtools für Webdesigner
- Adobe Color (color.adobe.com): Farbpaletten aus Bildern extrahieren, Harmonien generieren
- Coolors (coolors.co): Schnelle Palettenentwicklung, Export in alle Formate
- Paletton (paletton.com): Klassisches Farbkreis-Tool für Harmonien
- Realtime Colors: Live-Preview von Farben auf einer Website
- Colour Contrast Analyser (TPGi): Kontrastverhältnis-Prüfung
- Accessible Color Generator (learnui.design): Barrierefreie Farbvarianten generieren
Für professionelles Webdesign und UI Design ist die systematische Entwicklung einer Farbpalette vor dem Design-Start unerlässlich. Farbe ist kein nachträgliches Styling – sie ist Kommunikation.