Eine Website besitzt dunkelblauen Text.

Weiße Flächen.

Orangefarbene Buttons.

Grüne Erfolgsmeldungen.

Rote Fehlermeldungen.

Vielleicht wirkt das vollkommen selbstverständlich.

Doch hinter diesen wenigen Farben stecken mehrere unterschiedliche Aufgaben.

Farbe kann:

Orientierung schaffen,

Markenidentität vermitteln,

Aufmerksamkeit lenken,

Status ausdrücken,

Elemente gruppieren,

Interaktion sichtbar machen.

Damit ist Farbe im Webdesign wesentlich mehr als Dekoration.

Ein hilfreiches Grundmodell lautet:

Farbe
↓
visuelle Wirkung
+
Bedeutung
+
Hierarchie
+
Markenidentität

Gutes Farbdesign beantwortet deshalb nicht nur:

Welche Farben sehen schön zusammen aus?

Sondern auch:

Welche Farbe besitzt welche Aufgabe?

Farbe braucht ein System

Eine Website lässt sich problemlos mit zwanzig schönen Farben gestalten.

Das bedeutet nicht, dass daraus ein gutes Design entsteht.

Wenn jede Komponente ihre eigene Farbe erhält, muss ein Nutzer ständig neu interpretieren:

Warum ist dieser Button blau?

Warum jener grün?

Warum ist dieses Icon orange?

Ist Rot eine Warnung oder einfach Dekoration?

Ein gutes Farbsystem versucht dagegen, wiederkehrende Bedeutungen zu schaffen.

gleiche Bedeutung
→ ähnliche Farblogik

Farbe wird dadurch Teil der Sprache des Interfaces.

Farbe ist immer relativ

Ein Farbwert wirkt nicht isoliert.

Dunkelblau auf Weiß wirkt anders als dasselbe Dunkelblau auf Schwarz.

Ein Orange kann auf grauem Hintergrund leuchten.

Neben kräftigem Rot kaum auffallen.

Deshalb gilt:

Farbe
+
Umgebung
↓
wahrgenommene Wirkung

Das ist für Webdesign besonders wichtig.

Was ist RGB?

Bildschirme erzeugen Farben üblicherweise aus Licht.

Ein grundlegendes Farbmodell dafür ist RGB.

Die Buchstaben stehen für:

Red

Green

Blue

also:

Rot,

Grün,

Blau.

Diese drei Lichtanteile werden kombiniert.

Vereinfacht:

Rot
+
Grün
+
Blau
↓
Bildschirmfarbe

Additive Farbmischung

RGB arbeitet additiv.

Das bedeutet:

Licht wird hinzugefügt.

Wenn alle drei Komponenten stark leuchten:

Rot + Grün + Blau
↓
Weiß

Wenn kein Licht ausgegeben wird:

0 + 0 + 0
↓
Schwarz

Das unterscheidet sich von klassischer Farbmischung mit Pigmenten.

RGB-Werte

Eine Farbe kann beispielsweise so beschrieben werden:

rgb(36, 94, 168)

Die drei Zahlen stehen für:

Rot,

Grün,

Blau.

Typischerweise liegen sie jeweils zwischen:

0

und:

255

Beispiel Schwarz

rgb(0, 0, 0)

Beispiel Weiß

rgb(255, 255, 255)

Beispiel reines Rot

rgb(255, 0, 0)

Was ist ein Hex-Farbwert?

Im Web sind Hex-Codes sehr verbreitet.

Zum Beispiel:

#245EA8

Auch dieser Wert beschreibt Rot, Grün und Blau.

Nur in hexadezimaler Schreibweise.

Ein Hex-Wert besteht aus drei Farbpaaren

#24 5E A8

vereinfacht:

24
→ Rot

5E
→ Grün

A8
→ Blau

Für normales Webdesign muss man diese Werte nicht im Kopf umrechnen können.

Designprogramme und Browser erledigen das.

Hex und RGB beschreiben grundsätzlich dieselbe Art von Farbe

Zum Beispiel kann eine Farbe sowohl als:

#245EA8

als auch entsprechend als RGB-Wert dargestellt werden.

Die Wahl der Schreibweise verändert nicht automatisch die sichtbare Farbe.

Alpha beziehungsweise Transparenz

Farben können zusätzlich Transparenz besitzen.

Zum Beispiel:

rgba(...)

oder moderne Farbnotationen mit Alpha-Kanal.

Konzeptionell:

Farbe
+
Deckkraft

Eine Deckkraft von:

100 %

bedeutet vollständig sichtbar.

Eine niedrigere Deckkraft lässt den Hintergrund stärker durchscheinen.

Transparenz verändert die tatsächliche wahrgenommene Farbe

Ein halbtransparentes Blau auf Weiß wirkt anders als dasselbe Blau auf Grau.

Deshalb sollte Transparenz nicht wie ein absoluter Farbwert behandelt werden.

halbtransparentes Blau
+
Hintergrund
↓
sichtbare Farbe

Farbton, Sättigung und Helligkeit

RGB ist technisch nützlich.

Für gestalterisches Denken sind andere Eigenschaften häufig anschaulicher.

Besonders:

Farbton

Sättigung

Helligkeit

Farbton

Der Farbton beschreibt vereinfacht:

Welche Farbe ist es?

Zum Beispiel:

Rot,

Orange,

Gelb,

Grün,

Blau,

Violett.

Sättigung

Sättigung beschreibt vereinfacht:

Wie intensiv beziehungsweise farbig wirkt die Farbe?

Hohe Sättigung:

kräftig

Niedrige Sättigung:

gedämpft

Sehr niedrige Sättigung führt in Richtung Grau.

Helligkeit

Helligkeit beschreibt:

Wie hell oder dunkel wirkt die Farbe?

Zum Beispiel:

dunkles Blau

gegen:

helles Blau

Diese drei Dimensionen helfen beim Aufbau zusammengehöriger Farbpaletten.

HSL als Denkmodell

Ein verbreitetes Farbmodell im Web ist HSL:

Hue
Saturation
Lightness

also:

Farbton
Sättigung
Helligkeit

Für Designer kann diese Denkweise intuitiver sein als reine RGB-Zahlen.

Eine Farbe ist selten nur ein einziger Wert

Angenommen, die Markenfarbe lautet Blau.

Man benötigt möglicherweise:

sehr helles Blau für Hintergründe,

helleres Blau für Hover,

normales Blau für Buttons,

dunkles Blau für Text.

Daraus entsteht eine Farbskala.

Blue 50
Blue 100
Blue 200
...
Blue 700
Blue 800
Blue 900

Die Zahlen sind Konventionen.

Sie können je nach Designsystem anders heißen.

Warum Farbskalen sinnvoll sind

Ohne System entstehen schnell Werte wie:

#245EA8
#2861AB
#225CA4
#2B65AF
#245DA6

Alle fast gleich.

Niemand weiß später:

Welche Farbe ist offiziell?

Mit Skala

Stattdessen:

blue-100
blue-300
blue-500
blue-700
blue-900

Nun besitzt jede Stufe eine definierte Rolle.

Farbskala ist noch keine semantische Bedeutung

blue-500 beschreibt:

wie die Farbe ungefähr aussieht.

Nicht:

wofür sie verwendet wird.

Deshalb kommt eine zweite Ebene hinzu.

Semantische Farbrollen

Zum Beispiel:

color-primary

color-text

color-background

color-danger

color-success

Diese Namen beschreiben die Funktion.

Semantische Tokens entkoppeln Bedeutung und Rohfarbe

Heute:

color-primary
→ blue-600

Später:

color-primary
→ teal-700

Die Komponenten verwenden weiterhin:

color-primary

Das Designsystem kann die sichtbare Farbe zentral verändern.

Das ist besonders für Markenwechsel wertvoll

Ein Unternehmen ändert seine Primärfarbe.

Ohne Design Tokens:

hundert CSS-Werte suchen.

Mit semantischen Tokens:

color-primary
↓
neuer Farbwert

Die Oberfläche verändert sich systematisch.

Was ist eine Farbpalette?

Eine Farbpalette ist eine Auswahl zusammengehöriger Farben für ein Design.

Im Web kann sie beispielsweise enthalten:

Markenfarbe

Akzentfarbe

Textfarben

Hintergründe

Rahmenfarben

Statusfarben

Eine gute Palette besteht nicht nur aus bunten Markenfarben.

Die neutralen Töne sind häufig mindestens genauso wichtig.

Neutrale Farben

Typische neutrale Farben:

Weiß

Schwarz

Grau

Beige

gebrochene Weißtöne

Sie bilden große Teile einer Benutzeroberfläche.

Zum Beispiel:

Seitenhintergrund,

Cards,

Text,

Trennlinien,

sekundäre Labels.

Neutrale Farben schaffen Raum für Akzente

Wenn eine Oberfläche hauptsächlich neutral ist:

Weiß
Grau
Dunkelgrau

kann ein einzelnes Blau sehr stark wirken.

[ Hauptaktion ]

Genau dadurch entsteht visuelle Hierarchie.

Eine Website braucht nicht fünf Primärfarben

Wenn gleichzeitig verwendet werden:

Blau,

Rot,

Grün,

Orange,

Violett

als gleichwertige Akzentfarben, verliert jede einzelne an Bedeutung.

Ein zurückhaltenderes System ist häufig klarer.

Primärfarbe

Die Primärfarbe repräsentiert häufig einen zentralen Teil der Marke oder der Benutzeroberfläche.

Sie kann beispielsweise verwendet werden für:

Hauptaktionen,

aktive Navigation,

wichtige Links,

ausgewählte Zustände.

Aber nicht zwangsläufig für alles gleichzeitig.

Sekundärfarbe

Eine zweite Markenfarbe kann ergänzen.

Zum Beispiel:

dekorative Bereiche,

sekundäre Komponenten,

Illustrationen.

Sie sollte nicht zwangsläufig mit der Primärfarbe um Aufmerksamkeit konkurrieren.

Akzentfarbe

Eine Akzentfarbe kann sehr gezielt eingesetzt werden.

überwiegend neutral
+
wenig Akzent
↓
starke Wirkung

Je seltener sie eingesetzt wird, desto stärker kann ihr Signal sein.

Die bekannte 60-30-10-Regel

In Gestaltungsratgebern begegnet häufig ein vereinfachtes Verhältnis wie:

60 % Grundfarbe
30 % Sekundärfarbe
10 % Akzent

Das kann als Inspiration dienen.

Für Webinterfaces sollte es aber nicht als mathematisches Gesetz verstanden werden.

Eine Website ist kein Wohnzimmer, dessen Flächen exakt prozentual aufgeteilt werden müssen.

Wichtiger ist:

Welche Rolle besitzt jede Farbe?

Markenpalette und UI-Palette sind nicht dasselbe

Eine Markenrichtlinie kann beispielsweise drei kräftige Farben enthalten.

Für eine Benutzeroberfläche benötigt man zusätzlich:

Textfarben,

neutrale Hintergründe,

Borderfarben,

Hoverzustände,

Statusfarben.

Brand Palette
↓
muss in
↓
UI Color System
übersetzt werden

Das ist ein wichtiger Schritt.

Eine Markenfarbe ist nicht automatisch eine gute Buttonfarbe

Vielleicht ist das Marken-Gelb sehr hell.

Im Logo sieht es hervorragend aus.

Als Buttonhintergrund mit weißer Schrift:

schlecht lesbar.

Dann muss das UI die Markenfarbe anders einsetzen.

Zum Beispiel:

Gelb als Akzentfläche

und:

dunkler Text darauf.

Markenidentität ist wichtiger als starre Farbnutzung

Die Frage lautet nicht:

Muss jedes Interfaceelement exakt die Logofarbe haben?

Sondern:

Wie übertragen wir den visuellen Charakter der Marke sinnvoll in ein funktionales Interface?

Kontrast

Kontrast beschreibt den Unterschied zwischen visuellen Elementen.

Bei Farben besonders wichtig:

Text

gegen:

Hintergrund.

Beispiel:

schwarzer Text
auf
weißem Hintergrund

besitzt hohen Hell-Dunkel-Kontrast.

Zu niedriger Kontrast erschwert Lesen

Beispiel:

hellgrauer Text
auf
weißem Hintergrund

kann elegant wirken.

Aber praktisch schwer lesbar sein.

Besonders:

auf kleinen Displays,

bei Sonnenlicht,

für Menschen mit eingeschränktem Sehvermögen.

Sekundärtext darf schwächer sein

Zum Beispiel:

Datum,

Kategorie,

Hilfetext.

Aber:

sekundär
≠
unlesbar

Visuelle Hierarchie und Lesbarkeit müssen zusammenpassen.

Kontrast betrifft nicht nur Text

Auch:

Button gegen Hintergrund,

Formularrahmen,

Focus-Indikator,

Diagramme,

Statusanzeigen

benötigen erkennbare Unterschiede.

Ein Button kann formal existieren und visuell verschwinden

Beispiel:

hellgrauer Button

auf:

fast gleich hellem Hintergrund.

Der Nutzer erkennt vielleicht nicht:

Dass hier überhaupt eine Aktion möglich ist.

Kontrast erzeugt Interaktionshinweise

Ein aktiver Tab kann sich deutlich vom inaktiven unterscheiden.

[ Übersicht ]   Details

Die Hervorhebung kommuniziert:

Dieser Bereich ist gerade ausgewählt.

Farbe allein sollte Status nicht tragen

Beispiel:

grün
→ aktiv

rot
→ inaktiv

Ohne weitere Kennzeichnung.

Menschen mit bestimmten Farbsehschwächen können Probleme haben, diese Zustände zuverlässig zu unterscheiden.

Besser:

✓ Aktiv

und:

✕ Inaktiv

Farbe ergänzt die Information.

Sie ist nicht der einzige Träger.

Dasselbe gilt für Diagramme

Drei Linien:

Rot,

Grün,

Braun.

Wenn sie sich nur durch Farbe unterscheiden, kann ein Teil der Nutzer Schwierigkeiten haben.

Zusätzlich können helfen:

unterschiedliche Linienmuster,

Beschriftungen,

Marker.

Barrierefreiheit verändert Farbdesign positiv

Barrierefreiheit wirkt manchmal wie zusätzliche Einschränkung.

Tatsächlich zwingt sie häufig zu klareren Systemen.

Zum Beispiel:

besserer Kontrast,

klarere Statusanzeigen,

weniger subtile Interaktionen.

Das verbessert oft die Bedienbarkeit für alle.

Farbsehschwächen

Nicht jeder Mensch nimmt Farben identisch wahr.

Bestimmte Rot-Grün-Unterscheidungen können beispielsweise schwieriger sein.

Deshalb sollte eine wichtige Information nicht ausschließlich lauten:

grün = gut
rot = schlecht

ohne Text oder Symbol.

Form plus Farbe

Ein robustes System:

✓ Erfolgreich

⚠ Warnung

✕ Fehler

Farbe verstärkt.

Symbol und Text erklären.

Semantische Farben

In Benutzeroberflächen erhalten Farben häufig feste Bedeutungen.

Typische Rollen:

Success
Warning
Danger
Info

Success

Zum Beispiel:

✓ Änderungen gespeichert

häufig mit Grün verbunden.

Warning

⚠ Speicherplatz fast voll

oft Orange oder Gelb.

Danger beziehungsweise Error

✕ Datei konnte nicht gelöscht werden

häufig Rot.

Info

ⓘ Neue Version verfügbar

beispielsweise Blau.

Diese Zuordnungen sind Konventionen, keine Naturgesetze

Ein Unternehmen könnte theoretisch andere Farben verwenden.

Doch etablierte Erwartungen helfen bei der Verständlichkeit.

Besonders Rot als kritische Warnfarbe ist sehr stark gelernt.

Man sollte solche Konventionen nur mit gutem Grund brechen.

Markenfarbe und Statusfarbe sollten unterscheidbar bleiben

Wenn die Markenfarbe Rot ist:

kann Rot gleichzeitig:

normale Hauptaktion

und:

Fehler

darstellen.

Dann muss das Design stärker über:

Text,

Icons,

Flächen,

Kontext

unterscheiden.

Eine Markenfarbe darf das semantische System nicht unbrauchbar machen.

Unterschiedliche Sättigung kann helfen

Zum Beispiel:

Markenrot kräftig.

Fehlerhintergrund sehr helles Rot.

Fehlertext dunkles Rot.

Aber die Rollen müssen klar dokumentiert sein.

Fehlerzustände brauchen mehrere Farbstufen

Ein gutes Error-System benötigt vielleicht:

error-background

error-border

error-text

error-icon

Diese müssen zusammenpassen.

Nicht einfach:

alles knallrot.

Ein Warnbereich könnte so funktionieren

heller Warnhintergrund
+
dunkler Warntext
+
Warnicon

Der Bereich ist erkennbar, ohne aggressiv zu wirken.

Statusfarben sollten konsistent sein

Wenn Grün auf Seite A:

Erfolg

bedeutet und auf Seite B:

normaler Primärbutton,

kann das verwirren.

Konsistenz aus UI Design gilt auch für Farbe.

Farbwirkung und Psychologie

Farben werden häufig mit bestimmten Bedeutungen verbunden.

Zum Beispiel:

Blau:

Vertrauen,

Technik,

Ruhe.

Rot:

Energie,

Gefahr,

Aufmerksamkeit.

Grün:

Natur,

Erfolg,

Gesundheit.

Gelb:

Optimismus,

Warnung.

Solche Zuordnungen können hilfreich sein.

Sie sollten aber nicht zu simplen Naturgesetzen erklärt werden.

Farbe besitzt kulturellen Kontext

Bedeutungen können sich unterscheiden nach:

Kultur,

Branche,

Situation,

Marke.

Rot kann bedeuten:

Gefahr,

Liebe,

Luxus,

Rabatt,

Sportverein.

Der Kontext entscheidet.

Markenprägung kann allgemeine Farbbedeutungen überlagern

Eine bestimmte Farbkombination kann durch jahrelange Verwendung stark mit einer Marke verbunden sein.

Dann wirkt sie anders als dieselbe Farbe ohne diesen Kontext.

Deshalb funktioniert „Blau schafft Vertrauen“ nicht als Designrezept

Wenn alle Banken Blau verwenden, kann Blau zwar vertraut wirken.

Aber auch austauschbar.

Markenidentität benötigt mehr als psychologische Kurzformeln.

Farbsystem statt Farbpsychologie

Für praktische Websites ist oft wichtiger:

Kann man Text lesen?

Sind Aktionen erkennbar?

Sind Status eindeutig?

Passt die Palette zur Marke?

Bleibt sie über hunderte Seiten konsistent?

Das sind belastbarere Fragen.

Farbtemperatur

Farben werden häufig als:

warm

oder:

kühl

beschrieben.

Warm:

Rot,

Orange,

Gelb.

Kühl:

Blau,

Türkis,

bestimmte Grüntöne.

Diese Einteilung beeinflusst die wahrgenommene Atmosphäre.

Warme Farben können näher wirken

Kräftiges Orange auf neutralem Hintergrund kann Aufmerksamkeit stark anziehen.

Kühle dunkle Töne können ruhiger wirken.

Das ist gestalterisch nützlich, aber keine universelle Wahrnehmungsgarantie.

Sättigung beeinflusst die Lautstärke

Sehr stark gesättigte Farben wirken häufig intensiver.

Gedämpfte Farben ruhiger.

Eine Wissensplattform kann beispielsweise bewusst mit:

gedämpften Farbtönen

arbeiten, um lange Inhalte weniger anstrengend wirken zu lassen.

Hohe Sättigung sparsam verwenden

Ein einzelner kräftiger Akzent:

stark.

Eine komplette Website aus maximal gesättigten Farben:

visuell sehr laut.

Die visuelle Hierarchie leidet möglicherweise.

Helligkeit beeinflusst Ebenen

Sehr helle Grauwerte können:

Seitenhintergrund,

Cardfläche,

Trennbereich

voneinander unterscheiden.

Page Background
↓
Surface
↓
Elevated Surface

Diese Ebenen brauchen nicht immer Schatten.

Farbunterschiede können genügen.

Weiß ist nicht nur eine Farbe

Eine Website kann reines Weiß verwenden.

Oder:

warm gebrochenes Weiß.

Kühles Hellgrau.

Beige.

Diese Unterschiede beeinflussen die gesamte Atmosphäre.

Reines Schwarz ist ebenfalls nicht zwingend nötig

Fließtext kann beispielsweise sehr dunkles Grau sein.

Das kann subjektiv etwas weicher wirken als:

#000000

Entscheidend bleibt ausreichender Kontrast.

Ein neutrales System braucht mehrere Stufen

Zum Beispiel:

neutral-50
neutral-100
neutral-200
...
neutral-900

Daraus können abgeleitet werden:

Hintergrund,

Rahmen,

sekundärer Text,

Primärtext.

Aber nicht jede Stufe muss verwendet werden

Eine 12-stufige Palette ist nur dann sinnvoll, wenn das Design sie tatsächlich benötigt.

Zu viele fast gleiche Grautöne können das System unnötig komplizieren.

Farbe und Typografie

Im vorherigen Artikel über Typografie im Web haben wir verschiedene Textrollen definiert.

Farbe kann sie ergänzen.

Zum Beispiel:

text-primary
→ Fließtext

text-secondary
→ Metadaten

text-link
→ Links

text-danger
→ Fehlermeldungen

Das ist ein semantisches System.

Textfarben sollten nicht einfach freie Graustufen sein

Schlecht:

Designer entscheidet bei jedem Element spontan:

diesmal #555

nächstes:

#666

nächstes:

#5A5A5A

Besser:

text-primary

text-secondary

text-muted

mit definierten Werten.

text-muted sollte sparsam verwendet werden

Wenn zu viele Informationen muted sind:

wird die Seite insgesamt kontrastarm.

Muting ist ein Hierarchiewerkzeug.

Kein Standardzustand für alles.

Links brauchen eigene Farblogik

Textlinks sollten als interaktiv erkennbar sein.

Mögliche Signale:

Linkfarbe
+
Unterstreichung

oder eine andere klare Kombination.

Wichtig:

Linkfarbe muss sowohl auf dem Hintergrund gut lesbar als auch gegenüber normalem Text erkennbar sein.

Hoverzustände

Ein Link kann beim Hover beispielsweise:

dunkler

oder:

unterstrichen

werden.

Das erzeugt Feedback.

Aber:

Hover ist auf Touchgeräten nicht zuverlässig verfügbar.

Der Link muss bereits ohne Hover als Link funktionieren.

Visited State

Bereits besuchte Links können eine andere Farbe besitzen.

Das kann insbesondere auf Wissensplattformen hilfreich sein.

Der Nutzer erkennt:

Diese Seite habe ich bereits geöffnet.

Buttons und Farbe

Ein Primary Button nutzt häufig die Primärfarbe.

Zum Beispiel:

[ Speichern ]

Sekundär:

[ Abbrechen ]

mit schwächerer Darstellung.

Farbe hilft, die Aktionshierarchie aus UI Design sichtbar zu machen.

Primary muss nicht zwangsläufig bunt sein

Eine minimalistische Website könnte besitzen:

schwarzen Primary Button

auf Weiß.

Sekundär:

reiner Textlink.

Das funktioniert ebenfalls.

Primär bedeutet:

visuell wichtigste Aktion.

Nicht:

zwingend Markenfarbe.

Mehrere Primary-Farben sind problematisch

Wenn:

Speichern blau,

Kaufen grün,

Registrieren orange,

Kontakt violett

sind, muss der Nutzer jedes Mal neu lernen.

Ein Interface profitiert meist von einer stabilen Aktionslogik.

Danger Action

[ Konto löschen ]

darf bewusst anders aussehen als Primary.

Die Farbe kommuniziert:

höhere Konsequenz.

Aber kritische Aktionen sollten zusätzlich klar beschriftet werden.

Disabled State

Ein deaktivierter Button wird häufig:

blasser,

weniger kontrastreich.

Problem:

Er darf nicht so schwach werden, dass man ihn überhaupt nicht erkennt.

Zudem sollte verständlich sein, warum er deaktiviert ist.

Farbe allein beantwortet diese Frage nicht.

Focus State

Ein fokussiertes Element braucht einen sichtbaren Indikator.

Zum Beispiel einen klaren Ring.

┌───────────────────┐
│    Speichern      │
└───────────────────┘

Die Focus-Farbe sollte sich ausreichend von:

Element

und:

Hintergrund

abheben.

Focus darf nicht nur für Ästhetik entfernt werden

Manchmal wird die Browser-Fokusmarkierung deaktiviert, weil sie „unschön“ wirkt.

Wenn kein gleichwertiger sichtbarer Ersatz vorhanden ist, verschlechtert das die Tastaturbedienung erheblich.

Farbflächen und Cards

Cards können über leicht unterschiedliche Hintergründe vom Seitenhintergrund getrennt werden.

Zum Beispiel:

Page
→ sehr helles Grau

Card
→ Weiß

Dann ist möglicherweise überhaupt kein Schatten notwendig.

Elevated Surfaces

Modals oder Dropdowns können stärker vom Hintergrund getrennt werden.

Mögliche Mittel:

Farbwert,

Rahmen,

Schatten.

Farbe allein muss nicht alle Ebenen tragen.

Farbige Hintergründe für Abschnitte

Ein Wissensartikel kann beispielsweise einen Hinweisbereich besitzen.

Tipp

auf leicht farbigem Hintergrund.

Das hilft beim Scannen.

Aber wenn jeder zweite Absatz eine andere Fläche besitzt:

zerfällt der Leserythmus.

Farbboxen brauchen semantische Funktion

Zum Beispiel:

Info

Tipp

Warnung

Nicht:

blau gefällt mir heute

Das macht Contentproduktion konsistenter.

WordPress und semantische Farbvarianten

Statt Redakteuren eine freie Farbauswahl mit Millionen Farbtönen zu geben, kann das Theme definieren:

Info

Hinweis

Warnung

Erfolg

Die Redaktion entscheidet über die Bedeutung.

Das Designsystem über die Farbe.

Das verhindert Farbwildwuchs

Sonst entsteht nach einigen Monaten:

Artikel A:

hellblau.

Artikel B:

Türkis.

Artikel C:

kräftigblau.

Artikel D:

lila.

Obwohl alle eigentlich denselben Hinweis darstellen.

Farbe als Design Token

Wie in UI Design beschrieben, können Farben als Tokens hinterlegt werden.

Beispiel Rohpalette:

blue-50
blue-100
blue-500
blue-700

Darüber semantische Ebene:

action-primary
→ blue-600

action-primary-hover
→ blue-700

link
→ blue-700

Warum zwei Ebenen?

Die Rohpalette beantwortet:

Welche Farben existieren?

Die semantische Ebene:

Wofür werden sie verwendet?

Diese Trennung erleichtert Änderungen.

Eine mögliche Token-Struktur

Primitive Colors
↓
Semantic Colors
↓
Components

Zum Beispiel:

blue-600
↓
action-primary
↓
Primary Button

Komponenten sollten möglichst semantische Tokens verwenden

Nicht:

Button = blue-600

sondern:

Button = action-primary

Dann kann ein Themewechsel leichter erfolgen.

Mehrere Websites können dieselbe Komponentenlogik verwenden

Website A:

action-primary
→ Blau

Website B:

action-primary
→ Grün

Die Komponente bleibt dieselbe.

Das ist besonders bei mehreren Marken attraktiv.

White-Label-System

Konzeptionell:

gemeinsames UI
↓
Theme A
Theme B
Theme C

Jedes Theme definiert:

Farben,

eventuell Typografie,

Bildsprache.

Die zugrunde liegenden Komponenten bleiben gleich.

Das erleichtert zentrale Wartung

Ein Buttonbug wird einmal repariert.

Nicht für jede Marke separat.

Farbdesign wird damit Infrastruktur.

Light Mode

Die klassische helle Oberfläche:

heller Hintergrund
+
dunkler Text

Dazu:

farbige Akzente.

Dark Mode

Dunkle Oberfläche:

dunkler Hintergrund
+
heller Text

Das klingt einfach.

Ist es aber nicht.

Dark Mode ist keine Farbinvertierung

Schlecht:

Weiß → Schwarz
Schwarz → Weiß
Blau → gleich

Dadurch können:

Kontraste zu hart,

Farben zu leuchtend,

Schatten wirkungslos

werden.

Ein gutes Dark Theme benötigt eigene abgestimmte Werte.

Sehr helle Farben wirken auf dunklem Hintergrund stärker

Eine kräftige Akzentfarbe, die auf Weiß angenehm wirkt, kann auf fast schwarzem Hintergrund extrem leuchten.

Deshalb kann im Dark Mode:

Sättigung,

Helligkeit

angepasst werden.

Reines Weiß auf reinem Schwarz kann sehr hart wirken

Manche Dark-Mode-Systeme verwenden deshalb:

sehr dunkles Grau

als Hintergrund und:

gebrochenes Weiß

für Text.

Das kann angenehmer wirken.

Dark Mode braucht eigene Surface-Ebenen

Im hellen Theme:

Schatten kann eine Card hervorheben.

Im dunklen Theme ist Schatten weniger sichtbar.

Dort können unterschiedliche Helligkeitsstufen von Flächen stärker helfen.

Background
↓
Surface
↓
Elevated Surface

Semantische Tokens machen Dark Mode einfacher

Komponente verwendet:

surface-default

Im Light Theme:

surface-default
→ Weiß

Im Dark Theme:

surface-default
→ Dunkelgrau

Die Komponente muss nicht wissen, welches Theme aktiv ist.

Dasselbe gilt für Text

text-primary

Light:

dunkel.

Dark:

hell.

Theme Tokens statt hart codierter Farben

Das ist eine der größten praktischen Stärken semantischer Farbvariablen.

Komponente
↓
Token
↓
aktuelles Theme

Dark Mode sollte vollständig getestet werden

Nicht nur Startseite.

Auch:

Formulare,

Fehlermeldungen,

Tabellen,

Codeblöcke,

Bilder,

Dropdowns,

Fokuszustände.

Ein einzelner hart codierter weißer Hintergrund kann das gesamte Theme brechen.

Bilder im Dark Mode

Ein Bild mit rein weißem Hintergrund kann auf dunkler Website wie ein leuchtendes Rechteck wirken.

Manchmal ist das okay.

Manchmal braucht es:

angepasste Assets,

Rahmen,

andere Illustrationshintergründe.

Logos brauchen möglicherweise Varianten

Ein dunkles Logo funktioniert auf Weiß.

Auf dunklem Hintergrund verschwindet es.

Dann kann eine helle Logo-Version benötigt werden.

SVGs lassen sich teilweise leichter thematisieren

Bei einfachen Icons und Logos können Farben technisch flexibel gesetzt werden.

Bei komplexen Markenassets sollte aber die offizielle Gestaltung gewahrt bleiben.

Farbe und Responsive Design

Farben ändern sich nicht zwangsläufig auf Mobilgeräten.

Ihre Wirkung kann sich aber verändern.

Ein vollflächiger kräftiger Bereich, der auf Desktop nur 300 Pixel hoch ist, kann mobil einen kompletten Bildschirm füllen.

Dadurch wird die Farbe deutlich dominanter.

Mobile Flächenwirkung ist größer

Desktop:

farbiger Bereich
→ ein Teil des Bildschirms

Mobile:

derselbe Bereich
→ möglicherweise kompletter Viewport

Responsive Design und Farbgewicht müssen deshalb zusammen betrachtet werden.

Zu viele farbige Sections erzeugen mobile Unruhe

Desktop können mehrere Farbflächen nebeneinander beziehungsweise in breiter Komposition funktionieren.

Mobil erscheinen sie als lange Folge:

Blau,

Weiß,

Orange,

Grau,

Grün.

Das kann sehr unruhig wirken.

Farbe und visuelle Reihenfolge

Auf Mobile wird alles vertikal.

Eine starke farbige Fläche kann dadurch einen harten Abschnittswechsel erzeugen.

Das kann gut sein.

Aber es sollte bewusst eingesetzt werden.

Farbverläufe

Gradients beziehungsweise Farbverläufe können Tiefe oder Markencharakter erzeugen.

Zum Beispiel:

Blau
→ Violett

Sie sind als Akzent oder Hero-Hintergrund verbreitet.

Verlauf ist keine automatische Modernitätsgarantie

Ein Gradient kann hervorragend aussehen.

Oder wie ein beliebiges Tech-Template.

Er braucht dieselbe Frage wie jede andere Gestaltung:

Welche Funktion erfüllt er?

Verläufe können Kontrast erschweren

Text liegt auf einem Verlauf.

Links ist Hintergrund dunkel.

Rechts hell.

Nun funktioniert weißer Text vielleicht nur auf einer Hälfte.

Lösungen können sein:

Overlay,

andere Textposition,

kontrollierter Verlauf.

Text über Bildern ist dasselbe Problem

Der Hintergrund besitzt unterschiedliche Helligkeiten.

Ein einzelner Textfarbwert muss überall funktionieren.

Das ist schwierig.

Overlays

Eine dunkle halbtransparente Fläche über einem Bild kann dessen Kontrast reduzieren.

Darauf:

weißer Text.

Bild
+
dunkles Overlay
+
weißer Text

Das kann Lesbarkeit verbessern.

Overlay darf Bild nicht zerstören

Zu stark:

Bild verliert Wirkung.

Zu schwach:

Text bleibt schlecht lesbar.

Auch hier braucht es reale Tests.

Farbfelder und Transparenz

Halbtransparente Hintergründe können elegant sein.

Aber die tatsächliche Farbe hängt vom Untergrund ab.

Design Tokens mit Alpha sollten deshalb vorsichtig verwendet werden.

Transparente Borders

Eine halbtransparente weiße Border kann auf dunklem Hintergrund funktionieren.

Auf hellem nicht.

Ein komponentenübergreifendes System braucht kontextabhängige Werte.

Farbe und Schatten

Schatten besitzen ebenfalls Farbe.

Viele Standardshadows verwenden:

schwarz mit geringer Transparenz.

Auf farbigen beziehungsweise dunklen Oberflächen können andere Lösungen nötig sein.

Schatten sollte Ebenen erklären

Nicht nur dekorative Tiefe erzeugen.

Ein Dropdown über einer Card darf stärker abgehoben sein als die Card selbst.

Farbhierarchie in Dashboards

Dashboard enthält:

grüne Erfolge,

rote Fehler,

orange Warnungen,

blaue Links.

Wenn alle gleichzeitig stark leuchten:

visuelles Chaos.

Statusfarben müssen mit Informationspriorität abgestimmt werden.

Kritischer Fehler darf stärker sein als Erfolg

Beispiel:

142 Jobs erfolgreich

und:

1 kritischer Fehler

Die Zahl 142 ist größer.

Trotzdem kann der Fehler für den Administrator wichtiger sein.

Farbe kann diese Priorität unterstützen.

Aber rote Flächen überall führen zu Alarmmüdigkeit

Wenn jede Kleinigkeit als rotes Warnbanner dargestellt wird:

lernt der Nutzer:

Rot ignorieren.

Warnfarben sollten echten Warnungen vorbehalten bleiben.

Statusintensität staffeln

Zum Beispiel:

Info
→ zurückhaltend

Warnung
→ klar

kritischer Fehler
→ stark

So entsteht semantische Hierarchie.

Farbe in Diagrammen

Diagramme benötigen häufig mehrere Datenfarben.

Das ist eine andere Aufgabe als UI-Farben.

Man braucht:

unterscheidbare Reihen,

ausreichenden Kontrast,

gute Lesbarkeit.

Markenfarbe kann die wichtigste Datenreihe markieren

Beispiel:

Umsatz aktuelles Jahr:

Primärfarbe.

Vergleich Vorjahr:

neutraleres Grau.

Damit lenkt Farbe Aufmerksamkeit.

Nicht 15 kräftige Farben verwenden, wenn drei reichen

Bei vielen Kategorien können zusätzliche Strategien nötig sein:

Gruppierung,

interaktive Auswahl,

Beschriftung,

Muster.

Farbe allein skaliert nur begrenzt.

Sequential Color Scale

Für Werte von:

niedrig

bis:

hoch

kann eine Helligkeits- oder Sättigungsskala funktionieren.

hell
→ mittel
→ dunkel

Diverging Scale

Für Werte um einen Mittelpunkt:

negativ ↔ neutral ↔ positiv

können zwei Richtungen verwendet werden.

Zum Beispiel:

Rot
↓
Neutral
↓
Grün

Aber Farbsehschwächen und Semantik müssen berücksichtigt werden.

Kategorische Farben

Für verschiedene unabhängige Kategorien braucht man unterscheidbare Farben.

Zu viele Kategorien machen Legenden schwer verständlich.

Dann kann das Datenmodell selbst vereinfacht werden.

Farbe und Fotografie

Fotos besitzen eigene Farbwelten.

Wenn die Website:

gedämpft,

warm

gestaltet ist und jedes Foto:

hochgesättigte Neonfarben

enthält, kann die Marke inkonsistent wirken.

Bildbearbeitung kann Farbwelt vereinheitlichen

Zum Beispiel:

ähnliche:

Weißbalance,

Sättigung,

Kontrastcharakteristik.

Das muss nicht bedeuten, alle Bilder identisch zu filtern.

Aber eine gemeinsame Bildsprache hilft.

Bild-KI und Farbpaletten

Bei KI-Bildstilen kann eine Farbwelt Teil des Styleguides sein.

Zum Beispiel:

warme Beige-Töne

gedämpftes Blau

sparsame Orange-Akzente

Das erzeugt visuelle Nähe zwischen Illustrationen und Website.

KI liefert Farben aber nicht zwingend exakt

Ein Prompt wie:

Akzentfarbe #245EA8

garantiert nicht, dass jedes Pixel exakt diesem Wert entspricht.

Generative Bildmodelle arbeiten kreativ beziehungsweise probabilistisch.

Exakte Markenfarbe gehört in deterministische Gestaltung

Wenn ein Logo exakt:

#245EA8

sein muss:

SVG,

CSS,

klassische Grafikbearbeitung

verwenden.

Nicht hoffen, dass ein Bildmodell die Farbe exakt reproduziert.

Gute Arbeitsteilung

KI
→ ungefähre Bildfarbwelt

Designsystem
→ exakte UI-Farben

SVG / Logoasset
→ exakte Markenfarbe

Damit wird jede Technik dort eingesetzt, wo sie stark ist.

Farbprofile und Displays

Nicht jedes Display zeigt Farben vollkommen identisch.

Unterschiede können entstehen durch:

Panel,

Kalibrierung,

Helligkeit,

Betriebssystem,

Farbprofil.

Deshalb sollte man nicht davon ausgehen:

Jeder Besucher sieht exakt denselben visuellen Eindruck.

Webdesign braucht robuste Farbunterschiede

Wenn zwei Zustände nur durch einen extrem subtilen Farbtonunterschied getrennt sind:

kann dieser auf einem anderen Display verschwinden.

Stärkere strukturelle Signale sind robuster.

Farbe in Print und Web sind unterschiedlich

Ein Farbwert auf einem Display ist Licht.

Gedruckte Farbe basiert auf Tinte beziehungsweise Pigment.

Ein leuchtendes Bildschirmblau kann im Druck anders wirken.

Für reine Webgestaltung ist RGB relevant.

Für Printmaterial müssen Farben separat beurteilt werden.

Logo-Farbwerte können deshalb mehrere Systeme besitzen

Eine Brand Guideline kann beispielsweise definieren:

RGB,

Hex,

CMYK

für unterschiedliche Medien.

Nicht ein Wert ist automatisch für alles identisch übertragbar.

Webdesigner sollten nicht blind Printwerte übernehmen

Ein gedrucktes Markenhandbuch kann Ausgangspunkt sein.

Für Displays müssen:

Kontrast,

Lesbarkeit,

UI-Einsatz

getestet werden.

Farbe und Branding

Eine starke Marke wird selten nur durch eine einzelne Farbe erkannt.

Markenidentität entsteht aus:

Farbe
+
Typografie
+
Logo
+
Bildsprache
+
Layout
+
Ton

Deshalb sollte die Farbauswahl in das gesamte Designsystem eingebettet sein.

Eine Farbe allein macht keine Marke

Viele Firmen verwenden Blau.

Das bedeutet nicht, dass alle gleich aussehen.

Entscheidend ist:

Welches Blau?

Mit welchen neutralen Farben?

Mit welcher Typografie?

Mit welchem Bildstil?

Mit welchem Layout?

Farbpalette sollte die gewünschte Markenwirkung unterstützen

Zum Beispiel eine Wissensplattform:

ruhig,

klar,

kompetent,

zugänglich.

Mögliche Umsetzung:

gedämpfte Primärfarbe,

stabile neutrale Töne,

wenige starke Akzente.

Das ist eine Designentscheidung.

Kein universelles Rezept.

Kinderwebsite

Kann stärker:

farbig,

spielerisch,

kontrastreich

sein.

Doch auch dort braucht Farbe ein System.

„Für Kinder“ bedeutet nicht:

jede verfügbare Farbe gleichzeitig verwenden.

Luxusmarke

Kann etwa mit:

sehr reduzierter Palette,

Schwarz,

Creme,

einem Akzent

arbeiten.

Die geringe Farbdichte selbst wird Teil der Wirkung.

Technische Oberfläche

Kann mit:

neutralen Flächen,

klaren Statusfarben,

wenigen Akzenten

arbeiten.

Funktionalität steht stärker im Vordergrund.

E-Commerce

Braucht möglicherweise:

klare Kaufaktion,

Preis,

Rabatt,

Verfügbarkeit,

Fehlerzustände.

Farbe muss diese Bedeutungen unterscheiden können.

Rabattfarbe

Viele Shops verwenden Rot für Rabatt.

Wenn Rot gleichzeitig:

Fehler

und:

Löschen

bedeutet, kann die Oberfläche sehr rot werden.

Man muss abwägen:

Marketingsemantik

gegen:

UI-Semantik.

Ein Farbsystem braucht Prioritäten

Zum Beispiel:

Brand Primary
→ Hauptaktion

Danger
→ Fehler und destruktive Aktionen

Sale
→ eigener Marketingtoken

Die Farben dürfen ähnlich sein, sollten aber konzeptionell getrennt bleiben.

Marketingfarben und Produktfarben

Eine Marke kann für Werbekampagnen sehr expressive Farben einsetzen.

Das eigentliche Softwareinterface ruhiger halten.

Beides kann zur selben Marke gehören.

Farbwelt muss nicht überall identisch intensiv sein

Startseite:

stärker visuell.

Dashboard:

funktionaler.

Wissensartikel:

ruhiger.

Die Grundpalette bleibt verwandt.

Die Farbdichte kann variieren.

Designsystem sollte solche Kontexte berücksichtigen

Zum Beispiel:

Brand Accent

darf im Marketing stärker eingesetzt werden.

Im produktiven UI:

sparsam.

Farbpaletten entwickeln

Ein sinnvoller Ablauf beginnt nicht unbedingt mit zwanzig Farbfeldern.

Sondern mit Funktionen.

Welche Farben brauchen wir?
↓
Welche Rollen besitzen sie?

Schritt 1: neutrale Basis

Definiere:

Background

Surface

Text Primary

Text Secondary

Border

Damit kann bereits ein komplettes monochromes Interface funktionieren.

Schritt 2: Primäraktion

Definiere:

Action Primary

Action Primary Hover

Action Primary Text

Nun funktionieren wichtige Buttons und Links.

Schritt 3: Statusfarben

Success

Warning

Danger

Info

jeweils mit sinnvollen Varianten.

Schritt 4: Marken- beziehungsweise Akzentfarben

Erst jetzt zusätzliche dekorative beziehungsweise emotionale Rollen.

Das verhindert, dass die Palette von der Markenfarbe statt von der Nutzbarkeit dominiert wird.

Schritt 5: Zustände prüfen

Für Komponenten benötigt man:

Default

Hover

Focus

Active

Disabled

Nicht nur einen einzigen schönen Farbwert.

Buttonbeispiel

Primary Default
↓
Primary Hover
↓
Primary Active
↓
Primary Disabled

Jeder Zustand muss erkennbar bleiben.

Hover sollte nicht zu subtil sein

Wenn sich ein Button beim Hover von:

#245EA8

zu:

#245FA9

ändert, erkennt möglicherweise niemand den Unterschied.

Zustände brauchen ausreichende visuelle Differenz.

Hover darf aber nicht wie anderer Status wirken

Ein Primary Button sollte beim Hover nicht plötzlich:

rot

werden, wenn Rot sonst Gefahr bedeutet.

Semantik bleibt wichtig.

Active State

Beim Drücken kann der Button:

dunkler,

leicht verschoben,

anderweitig verändert

werden.

Farbe ist nur ein mögliches Signal.

Disabled

Kann:

weniger Kontrast,

andere Fläche,

reduzierte Sättigung

verwenden.

Der Text muss trotzdem je nach Kontext erkennbar bleiben.

Focus

Soll klar sichtbar sein.

Eine separate Focus-Farbe beziehungsweise ein kontrastreicher Ring ist häufig sinnvoll.

Interaktionszustände testen

Nicht nur im Styleguide.

Auf echten Seiten.

Ein Focus-Ring kann auf weißem Hintergrund hervorragend funktionieren.

Auf blauem Hero verschwinden.

Komponenten brauchen Kontexttests.

Ein Farbsystem muss mehrere Hintergründe verkraften

Ein Button kann auf:

Weiß,

hellgrau,

dunkelblau

erscheinen.

Vielleicht braucht man dafür unterschiedliche Varianten.

Inverse Colors

Manche Systeme definieren:

text-primary

und:

text-inverse

Zum Beispiel:

dunkler Text auf hell

versus:

heller Text auf dunkel.

Das ist semantischer als:

text-white.

Denn im Dark Theme könnte text-inverse später nicht mehr reines Weiß sein.

Semantic Naming schlägt konkrete Farbnamen

Vergleiche:

button-blue

mit:

action-primary

Der zweite Name bleibt sinnvoll, selbst wenn die Markenfarbe später Grün wird.

Design Tokens sollten nicht zu abstrakt werden

Zu wenig Semantik:

blue-500

für alles.

Zu viel:

button-primary-background-default-enabled

für jede Kleinigkeit.

Ein praktikables System braucht Balance.

Mehrere Ebenen können helfen

Primitive
↓
Semantic
↓
Component

Beispiel:

blue-600
↓
action-primary
↓
button-primary-background

Große Designsysteme können diese Trennung gebrauchen.

Für kleine Websites reicht oft die semantische Ebene.

WordPress-Farbpalette

Ein WordPress-Theme kann eine begrenzte Palette bereitstellen.

Zum Beispiel:

Primary
Secondary
Accent
Background
Surface
Text
Muted
Success
Warning
Danger

Das verhindert zufällige Farben im Editor.

Freie Farbwahl deaktivieren oder begrenzen

Wenn Redakteure jeden beliebigen Hex-Wert verwenden können:

wird das Farbsystem langfristig wahrscheinlich verwässert.

Eine begrenzte Auswahl kann deshalb sinnvoll sein.

Redaktion entscheidet Bedeutung, nicht Pixelwert

Beispiel:

Warnbox

statt:

Hintergrund #FFF3CD
Rand #F2C94C
Text #735C0F

Das Theme kümmert sich um technische Farben.

Das erleichtert spätere Relaunches

Heute:

Warnungen gelb.

Später:

anderes Farbsystem.

Alle Warnboxen verändern sich zentral.

Die Inhalte müssen nicht bearbeitet werden.

Farbwerte nicht direkt im Content speichern

Wenn möglich, sollte ein Artikel eher semantische Klassen verwenden.

notice-warning

statt:

style="background:#fff3cd"

Das erhöht Wartbarkeit.

Farben und CSS Custom Properties

Technisch können Farbtokens beispielsweise über CSS-Variablen umgesetzt werden.

Konzeptionell:

--color-primary
--color-text
--color-surface

Komponenten verwenden diese Variablen.

Das erleichtert:

Themewechsel,

Dark Mode,

Markenvarianten.

Designsystem und WordPress können dieselbe Tokenlogik teilen

Design Token
↓
Theme-Konfiguration
↓
CSS Variable
↓
Block / Komponente

Damit entsteht eine durchgehende Kette.

Farbänderungen sollten nicht einzeln im CSS verstreut sein

Wenn ein Relaunch bedeutet:

500 Dateien nach #245EA8 durchsuchen,

fehlt eine zentrale Abstraktion.

Mehrere Marken

Ein gemeinsames System könnte beispielsweise haben:

Theme Casiopeya
Theme Site B
Theme Site C

Jedes Theme definiert dieselben Rollen anders.

action-primary
surface
text-primary
accent

Die Komponenten bleiben identisch.

Das ist für viele Websites besonders interessant

Statt jede Website technisch komplett anders zu gestalten:

gemeinsames Designsystem

plus:

eigene Marken-Tokens.

So können Sites eigenständig wirken und trotzdem zentral gewartet werden.

Farben automatisch generieren?

Aus einer Primärfarbe lassen sich technisch:

hellere,

dunklere,

gedämpftere

Varianten berechnen.

Das kann beim Aufbau einer Palette helfen.

Aber automatische Skalen sollten visuell geprüft werden.

Mathematisch gleichmäßig heißt nicht optisch gleichmäßig

Eine Reihe von Farbtönen kann numerisch in gleichen Schritten verändert werden.

Das menschliche Auge nimmt diese Schritte trotzdem möglicherweise unterschiedlich stark wahr.

Design braucht weiterhin visuelle Kontrolle.

Automatisch erzeugte Hoverfarbe prüfen

Ein Algorithmus verdunkelt Primary um 10 %.

Bei Blau:

gut.

Bei sehr dunklem Rot:

vielleicht kaum noch unterscheidbar.

Tokens sollten nicht nur rechnerisch, sondern im Kontext getestet werden.

Kontrastprüfung automatisieren

Im Gegensatz zu rein ästhetischer Wirkung lassen sich bestimmte Kontrastbeziehungen technisch messen.

Ein Designworkflow kann beispielsweise prüfen:

Textfarbe
+
Hintergrundfarbe
↓
ausreichender Kontrast?

Das ist ein guter Kandidat für automatisierte Qualitätsprüfung.

Trotzdem bleibt Kontext wichtig

Große Schrift.

Kleine Schrift.

Icons.

Controls.

Für unterschiedliche Elemente gelten unterschiedliche Anforderungen.

Ein pauschaler „alles ist okay“-Wert genügt nicht.

Designreview sollte mehrere Zustände umfassen

Nicht nur:

Startseite bei Desktop.

Sondern:

normal

Hover

Focus

Error

Disabled

Dark Mode

Mobile

Farbprobleme tauchen oft erst in Zuständen auf.

Browser und Displays testen

Mindestens einige reale unterschiedliche Displays können hilfreich sein.

Ein extrem schlecht kalibrierter Bildschirm lässt sich nicht vollständig abfangen.

Aber das Farbsystem sollte nicht auf winzigen Nuancen beruhen.

Graustufentest

Eine nützliche Methode:

Design in Graustufen betrachten.

Bleibt die visuelle Hierarchie erhalten?

Wenn nicht:

Farbe trägt möglicherweise zu viel allein.

Farbblindheitssimulationen

Designwerkzeuge können verschiedene Farbsehschwächen simulieren.

Damit lässt sich erkennen:

Verschmelzen zwei Statusfarben?

Sind Diagrammreihen noch unterscheidbar?

Das ist nützlich für robuste Systeme.

Squint Test funktioniert auch für Farbe

Augen leicht zusammenkneifen.

Welche Farbflächen dominieren?

Ist das die gewünschte Priorität?

Wenn ein sekundäres Banner den gesamten Bildschirm visuell übernimmt:

Farbhierarchie prüfen.

Farbdichte prüfen

Eine einfache Frage:

Wie viele unterschiedliche kräftige Farben sehe ich gleichzeitig?

Wenn die Antwort sehr hoch ist:

Vielleicht ist die Palette zu laut.

Nicht jede Website muss minimalistisch sein

Eine expressive kreative Website darf sehr farbig sein.

Auch dort braucht es jedoch:

Struktur,

Wiederholung,

Kontrollpunkte.

Farben können vielfältig sein und trotzdem systematisch eingesetzt werden.

Farbkonsistenz bedeutet nicht Eintönigkeit

Eine Palette kann besitzen:

mehrere Akzentfarben,

unterschiedliche Illustrationsfarben,

verschiedene Statusfarben.

Wichtig:

Es existiert eine nachvollziehbare Logik.

Farbe und Content

Ein langer Wissensartikel sollte vielleicht nicht jeden Absatz farblich gestalten.

Text und Typografie tragen bereits viel Struktur.

Farbe kann gezielt unterstützen:

Links,

Hinweise,

Code,

Diagramme,

Navigation.

Weniger kann bei Wissensinhalten mehr sein

Eine ruhige Hauptfläche erleichtert langes Lesen.

Farbe markiert:

Orientierungspunkte.

Nicht jeden Satz.

Codeblöcke

Codeblöcke können einen leicht anderen Hintergrund besitzen.

Zum Beispiel:

normaler Artikel
↓
Codeblock mit eigener Surface

Damit erkennt der Leser sofort den Inhaltswechsel.

Syntax Highlighting

Programmiersprachen können verschiedene Codeelemente farblich unterscheiden.

Das kann Lesbarkeit erhöhen.

Zu viele grelle Farben auf dunklem Hintergrund können aber ebenfalls anstrengend sein.

Diagramme und Erklärgrafiken

Farben sollten dort Bedeutung unterstützen.

Zum Beispiel:

Input
→ Blau

Verarbeitung
→ Grau

Output
→ Grün

Wenn dieses Schema wiederholt wird, lernt der Leser die visuelle Logik.

Konsistente Diagrammfarben

Eine Wissensplattform kann beispielsweise definieren:

Eingabe
→ Primary

Prozess
→ Neutral

Ergebnis
→ Success

Dann wirken Erklärgrafiken über verschiedene Artikel hinweg zusammengehörig.

Bild-KI kann diese Logik nicht immer exakt einhalten

Für schematische Diagramme sind klassische Vektor- beziehungsweise Webgrafiken oft besser.

Bild-KI eignet sich stärker für illustrative oder atmosphärische Inhalte.

Farben und Fotografie auf Websites

Ein Foto besitzt möglicherweise dominantes Rot.

Der CTA ebenfalls.

Dann konkurrieren beide.

Deshalb sollten Bildauswahl und UI-Farben gemeinsam beurteilt werden.

Ein Bild kann die gesamte Farbwirkung einer Seite verändern

Dieselbe Oberfläche:

mit warmem Sonnenuntergangsfoto

wirkt anders als:

mit kühlem Serverraum.

Die Farbpalette des Contents ist Teil des Gesamtbildes.

Hero-Bilder sollten mit Textfarbe getestet werden

Nicht nur Bild alleine ansehen.

Sondern:

Bild
+
Headline
+
CTA

im realen Layout.

Farbüberlagerungen können Markenwirkung vereinheitlichen

Ein leichter Farbton über unterschiedlichen Fotografien kann visuelle Nähe erzeugen.

Zu starke Überlagerungen machen Bilder künstlich.

Das ist eine gestalterische Abwägung.

Farben und Emotion sind kontextuell

Ein helles Gelb kann:

freundlich

oder:

warnend

wirken.

Ein dunkles Grün:

natürlich

oder:

finanziell.

Design sollte deshalb nicht versuchen, Wirkung nur aus einer Farbtabelle abzulesen.

Der gesamte Kontext entscheidet

Farbe
+
Typografie
+
Bild
+
Sprache
+
Branche
↓
Wirkung

Darum sind echte Mockups so wichtig.

Farbpalette nicht isoliert auswählen

Sechs Farbfelder nebeneinander können harmonisch aussehen.

Im Interface:

vielleicht nicht.

Eine Palette sollte auf:

Buttons,

Text,

Cards,

Formularen,

Fehlern

getestet werden.

Color Palette ≠ fertiges Color System

Palette:

Blau
Orange
Grau
Weiß
Rot

System:

Primary
Secondary
Background
Surface
Text
Danger
Focus
Hover
Disabled

Erst die zweite Ebene macht Farben produktionsfähig.

Ein gutes Farbsystem beantwortet Fragen

Welche Farbe hat:

normaler Text?

sekundärer Text?

Link?

Primary Button?

Hover?

Focus?

Danger Button?

Fehlerhintergrund?

Border?

Disabled Control?

Dark Mode?

Wenn diese Antworten klar sind, wird Design konsistenter.

Farbmatrix

Man kann ein System konzeptionell so prüfen:

Element
↓
Normal
Hover
Focus
Active
Disabled

und jeweils:

Light

sowie:

Dark.

Damit werden fehlende Zustände sichtbar.

Beispiel Button

Primary Button

Default
Hover
Active
Focus
Disabled

Alle fünf Zustände sollten zusammenpassen.

Beispiel Input

Input

Default
Hover
Focus
Error
Disabled

Hier kommt Error statt Active stärker ins Spiel.

Farbsystem wird dadurch komponentenübergreifend

Ein roter Error-Border beim Input sollte zum:

Error-Alert

und:

Error-Icon

passen.

Nicht identisch sein müssen.

Aber zur gleichen semantischen Familie gehören.

Formulare und Farbe

Normal:

neutraler Rahmen.

Focus:

deutlich hervorgehoben.

Error:

Fehlerstatus.

Success:

nur wenn sinnvoll.

Das schafft verständliche Zustände.

Focus und Error können gleichzeitig auftreten

Ein fehlerhaftes Feld wird fokussiert.

Nun braucht das Interface:

Focus

und:

Error

gleichzeitig.

Das ist ein typischer Edge Case.

Zustände kombinieren

Designsysteme sollten deshalb nicht nur isolierte Screenshots besitzen.

Sondern echte Kombinationen testen.

Error + Focus

Disabled + Dark Mode

Hover + selected

Dort entstehen häufig Inkonsistenzen.

Farbe und Auswahlzustände

Checkbox aktiv:

Häkchen plus Farbe.

Radio ausgewählt:

Punkt plus Farbe.

Tab aktiv:

Unterstreichung plus Farbe.

Wieder gilt:

Farbe unterstützt.

Form beziehungsweise Symbol zeigt ebenfalls den Status.

Farbliche Auswahl ohne Formsignal

Zwei Cards:

eine ausgewählt, eine nicht.

Nur der Hintergrundton unterscheidet sich minimal.

Das kann schwer erkennbar sein.

Zusätzlich könnte:

Rahmen,

Checkmark,

Beschriftung

helfen.

Farbdesign sollte robust sein

Nicht abhängig von:

perfektem Display,

perfektem Sehvermögen,

perfekter Aufmerksamkeit.

Mehrere Signale erhöhen Robustheit.

Farbpalette dokumentieren

Ein Designsystem sollte nicht nur Farbcodes speichern.

Sondern Regeln.

Zum Beispiel:

Primary

für wichtigste normale Aktionen.

Danger

für destruktive Aktionen und kritische Fehler.

Success

für bestätigte positive Zustände.

Das verhindert semantischen Wildwuchs.

Beispiele dokumentieren

Gut:

[ Speichern ]
→ Primary

[ Konto löschen ]
→ Danger

Schlecht:

[ Mehr erfahren ]
→ Danger

nur weil Rot optisch auffällt.

Do und Don’t helfen Designteams

Nicht zwangsläufig große Dokumentation.

Einige reale Beispiele können bereits ausreichen.

Farbdesign und KI-gestützte Websiteerstellung

Wenn KI Seiten oder Komponenten generiert, sollte sie nicht beliebige Farben erfinden.

Besser:

Komponente
↓
semantische Design Tokens

Die KI darf beispielsweise entscheiden:

primary action

nicht:

mach den Button #37A2FF

Strukturierte Ausgabe kann semantische Rollen enthalten

Zum Beispiel:

{
  "component": "button",
  "variant": "primary",
  "label": "Artikel speichern"
}

Das Designsystem stellt die Farbe bereit.

Dadurch bleibt KI-Ausgabe markenkonsistent

Das Sprachmodell kennt nicht zwingend jede aktuelle Markenfarbe.

Muss es auch nicht.

Es verwendet:

variant = primary

Das Theme übernimmt die Gestaltung.

Dasselbe Prinzip gilt für Hinweise

KI erzeugt:

{
  "type": "warning",
  "text": "Das Backup ist älter als sieben Tage."
}

Nicht:

gelbe Box mit #FFF1AA

Semantik und Darstellung bleiben getrennt.

Das ist besonders bei automatisierten Contentprojekten wichtig

Hunderte Beiträge können entstehen.

Die Farblogik sollte trotzdem zentral bleiben.

Content
↓
semantischer Block
↓
Theme
↓
Farbe

Nicht:

jeder Artikel
→ eigene Farben

Farbsysteme versionieren

Ein Relaunch verändert:

Primärfarbe,

Neutralpalette,

Statusfarben.

Dann kann es sinnvoll sein, das Designsystem als Version zu betrachten.

Color System v1
↓
Color System v2

Das hilft bei großen Projekten.

Änderungen als Gesamtsystem prüfen

Wenn Primary dunkler wird:

passen Hover und Active noch?

Ist Focus sichtbar?

Funktioniert Dark Mode?

Funktionieren Links?

Ein einzelner Farbwechsel kann viele Komponenten beeinflussen.

Automatisierte Visual Regression

Größere Systeme können Komponenten nach Änderungen automatisch als Screenshots vergleichen.

Das zeigt:

Hat sich etwas unerwartet verändert?

Farbänderungen sind dafür gut geeignet.

Aber visueller Vergleich ersetzt keine Kontrastprüfung

Beides ergänzt sich:

automatischer Screenshotvergleich
+
Kontrastprüfung
+
menschlicher Review

A/B-Tests für Farbe mit Vorsicht

„Blauer Button konvertiert besser als grüner“ ist meist keine universelle Erkenntnis.

Der Effekt hängt ab von:

Umgebung,

Kontrast,

Beschriftung,

Position,

Zielgruppe.

Eine isolierte Farbe besitzt keinen magischen Conversionwert.

Häufig gewinnt einfach der stärkere Kontrast

Wenn Variante A fast im Hintergrund verschwindet und Variante B deutlich sichtbar ist:

testet man nicht wirklich:

Blau gegen Grün.

Sondern:

schwach sichtbar gegen stark sichtbar.

Designhypothesen sauber formulieren

Besser:

Ein stärkerer Kontrast der Hauptaktion macht sie leichter auffindbar.

Dann passende Varianten testen.

Das ist aussagekräftiger als:

Rot verkauft besser.

Farbe und Vertrauen

Eine seriöse Wirkung entsteht nicht durch einen bestimmten Hex-Code.

Sie entsteht aus:

Konsistenz,

Lesbarkeit,

Transparenz,

guter Typografie,

stimmigem Gesamtdesign.

Farbe unterstützt.

Sie erzeugt Vertrauen nicht alleine.

Häufige Fehler bei Farben im Webdesign

Einige Probleme tauchen immer wieder auf.

zu viele Akzentfarben

zu wenig Kontrast

Farbe als einziges Statussignal

zufällige Hex-Werte

Markenfarben ohne UI-Anpassung

fehlende Hover- und Focuszustände

Dark Mode nur invertiert

freie Redaktionsfarben ohne System

zu subtile Graustufen

übermäßig gesättigte Oberflächen

Fehler: Jede Sektion erhält eine andere Farbe

Das kann auf einer kurzen Marketingseite funktionieren.

Bei einer großen Website entsteht schnell ein visueller Flickenteppich.

Farbe sollte Gruppierung unterstützen.

Nicht künstlich jede Sektion voneinander trennen.

Fehler: Alles in Markenfarbe

Logo.

Überschriften.

Links.

Buttons.

Icons.

Borders.

Cards.

Hintergründe.

Wenn alles blau ist:

hat Blau keine Hierarchiefunktion mehr.

Fehler: Sekundärtext zu hell

Die Absicht:

elegant.

Das Ergebnis:

schlecht lesbar.

Sekundärtext muss weiterhin funktionieren.

Fehler: Success = Grün ohne Text

Ein grüner Punkt allein ist möglicherweise nicht eindeutig.

●

besser:

● Online

oder:

✓ Aktiv

Fehler: Rot als normale Dekorationsfarbe und Fehlerfarbe

Kann funktionieren, wenn die Marke Rot verwendet.

Dann braucht das UI zusätzliche deutliche Signale.

Ohne Konzept entsteht Verwirrung.

Fehler: Hover als einzige Interaktionsanzeige

Mobil gibt es Hover nicht zuverlässig.

Links und Buttons müssen bereits im Grundzustand erkennbar sein.

Fehler: Dark Mode automatisch generieren und nie prüfen

Resultat:

unsichtbare Borders,

grell leuchtende Akzente,

schlechte Logos,

unlesbare Statusfarben.

Dark Mode ist ein eigenständiges Farbsystem.

Fehler: Palette nur auf weißem Hintergrund testen

Komponenten erscheinen später auch auf:

grauen,

farbigen,

dunklen

Flächen.

Kontrast muss in allen relevanten Kontexten funktionieren.

Fehler: zehn fast identische Grautöne

Niemand kann später erklären:

Warum ist Border A #E7E7E7 und Border B #E9E9E9?

Weniger klare Stufen sind häufig besser.

Fehler: Farbcodes direkt in Content einbauen

Dadurch wird ein späterer Relaunch unnötig schwer.

Semantische Komponenten sind wartbarer.

Ein praktischer Workflow für ein Web-Farbsystem

Ein sinnvoller Ablauf kann so aussehen:

Markencharakter definieren
↓
neutrale Basis bauen
↓
Primärfarbe festlegen
↓
Statusfarben ergänzen
↓
semantische Tokens definieren
↓
Komponenten gestalten
↓
Zustände ergänzen
↓
Kontrast prüfen
↓
Dark Mode prüfen
↓
reale Seiten testen

Schritt 1: Markencharakter

Fragen:

Soll die Website wirken:

ruhig?

technisch?

freundlich?

energetisch?

hochwertig?

Farbe muss zu Typografie und Bildsprache passen.

Schritt 2: neutrale Basis

Zuerst:

Background.

Surface.

Text.

Borders.

Damit sollte die Website bereits strukturell funktionieren.

Schritt 3: Primärfarbe

Dann:

Hauptaktionen,

Links,

aktive Zustände.

Nicht automatisch jeden Akzent damit färben.

Schritt 4: Statusfarben

Success.

Warning.

Danger.

Info.

Sie brauchen klare semantische Aufgaben.

Schritt 5: semantische Tokens

Zum Beispiel:

text-primary
text-secondary
surface-default
surface-raised
action-primary
action-danger
status-success
status-warning
focus-ring

Jetzt ist die Palette produktionsfähig.

Schritt 6: Komponenten

Button.

Input.

Card.

Alert.

Navigation.

Link.

Badge.

Alle mit echten Tokens gestalten.

Schritt 7: Zustände

Default.

Hover.

Focus.

Active.

Disabled.

Error.

Selected.

Nicht vergessen.

Schritt 8: Kontrast

Text gegen Fläche.

Link gegen Text.

Button gegen Hintergrund.

Focus gegen Oberfläche.

Statusfarben.

Schritt 9: Dark Mode

Nicht einfach invertieren.

Eigene Tokenwerte definieren.

Schritt 10: reale Seiten

Startseite.

Artikel.

Dashboard.

Formular.

Mobile.

Nicht nur eine Farbtafel beurteilen.

Die Farbpalette sollte sich im echten Content bewähren

Eine Palette kann isoliert wunderschön aussehen.

Auf einem langen Artikel:

zu bunt.

Auf einem Dashboard:

zu schwach.

Auf Mobilgeräten:

zu dominant.

Reale Nutzung entscheidet.

Was du dir über Farben im Webdesign merken solltest

Farbe im Webdesign ist nicht nur Dekoration, sondern ein System zur Vermittlung von Bedeutung, Hierarchie und Markenidentität.

Technisch werden Bildschirmfarben häufig über RGB beschrieben.

Rot
+
Grün
+
Blau
↓
sichtbare Farbe

Hex-Codes sind eine verbreitete alternative Schreibweise.

Zum Beispiel:

#245EA8

Für gestalterisches Denken helfen zusätzlich die Eigenschaften:

Farbton
+
Sättigung
+
Helligkeit

Der Farbton bestimmt grob:

welche Farbe.

Die Sättigung:

wie intensiv.

Die Helligkeit:

wie hell oder dunkel.

Eine produktive Website benötigt jedoch nicht nur einzelne Farben.

Sie benötigt Farbrollen.

Zum Beispiel:

Background

Surface

Text Primary

Text Secondary

Action Primary

Success

Warning

Danger

Diese Rollen sollten möglichst semantisch benannt werden.

Besser:

action-primary

als:

blue-button

Denn vielleicht verändert sich die Primärfarbe später.

Die Funktion bleibt bestehen.

Ein robustes Designsystem kann deshalb mehrere Ebenen besitzen:

Rohfarbe
↓
semantischer Token
↓
Komponente

Zum Beispiel:

blue-600
↓
action-primary
↓
Primary Button

Das erleichtert:

Relaunches,

Dark Mode,

mehrere Marken,

zentrale Wartung.

Auch neutrale Farben sind ein wichtiger Bestandteil der Palette.

Background
Surface
Border
Text

machen häufig einen größeren Flächenanteil aus als die eigentliche Markenfarbe.

Gerade deshalb sollte eine Website nicht einfach mit möglichst vielen kräftigen Tönen gefüllt werden.

Ein zentraler Grundsatz lautet:

Akzent selten
→ Akzent stark

Wenn jede Überschrift, jedes Icon und jede Box die Primärfarbe trägt, verliert sie ihre hierarchische Funktion.

Farbe und visuelle Hierarchie sind deshalb eng verbunden.

Kontrast ist ebenso entscheidend.

Text
↔
Hintergrund

muss ausreichend unterscheidbar bleiben.

Sekundäre Informationen dürfen optisch zurücktreten.

Aber:

sekundär
≠
unlesbar

Dasselbe gilt für:

Buttons,

Links,

Focuszustände,

Formulare.

Farbe sollte außerdem nicht alleinige Informationsträgerin sein.

Nicht nur:

grün
→ Erfolg

sondern besser:

✓ Erfolgreich gespeichert

Farbe unterstützt die Bedeutung.

Text und Symbol machen sie robuster.

Das ist besonders bei:

Statusmeldungen,

Diagrammen,

Formularfehlern

wichtig.

Semantische Statusfarben können beispielsweise sein:

Success
Warning
Danger
Info

Sie sollten konsistent verwendet werden.

Ein Fehler sollte nicht auf einer Seite rot und auf der nächsten zufällig violett dargestellt werden.

Auch die Markenfarbe muss sich in dieses System einfügen.

Eine Markenfarbe aus einem Logo ist nicht automatisch eine gute UI-Farbe.

Ein sehr helles Marken-Gelb kann beispielsweise hervorragend im Logo funktionieren, aber mit weißer Buttonschrift kaum lesbar sein.

Dann wird die Markenfarbe funktional übersetzt, statt blind kopiert.

Markenpalette
↓
UI-Farbsystem

Das ist ein wichtiger Unterschied.

Beim Dark Mode gilt dasselbe.

Light Theme
≠
Dark Theme einfach invertiert

Dunkle Oberflächen benötigen eigene:

Backgroundfarben,

Surfacefarben,

Textfarben,

Akzentwerte.

Semantische Tokens erleichtern diesen Wechsel enorm.

text-primary

kann im Light Theme dunkel

und im Dark Theme hell sein.

Die Komponente bleibt gleich.

Farben sollten außerdem zusammen mit Typografie, Bildern und Layout betrachtet werden.

Farbe
+
Schrift
+
Bild
+
Whitespace
↓
Gesamtwirkung

Ein Bild kann durch seine eigene Farbwelt eine Seite vollständig verändern.

Deshalb sollte die Farbpalette nicht nur als Reihe von Farbfeldern beurteilt werden.

Sie muss in echten:

Artikeln,

Cards,

Formularen,

Dashboards,

mobilen Layouts

getestet werden.

Für Bild-KI kann die Markenfarbwelt als Stilvorgabe dienen.

Aber generative Modelle sind keine zuverlässige Methode für exakte Markenfarben.

KI
→ ungefähre Farbwelt

CSS / SVG / Designsystem
→ exakte Markenwerte

Diese Arbeitsteilung ist deutlich robuster.

Für WordPress ist ein zentral verwaltetes Farbsystem besonders wertvoll.

Statt jedem Redakteur unbeschränkte Farbauswahl zu geben:

Info
Tipp
Warnung
Fehler

als semantische Blockvarianten.

Das Theme entscheidet, welche konkreten Farben dazugehören.

Content
↓
Bedeutung
↓
Theme
↓
Farbe

Damit kann ein späterer Relaunch die gesamte Website verändern, ohne jeden Artikel einzeln zu bearbeiten.

Ein gutes Farbsystem entsteht daher nicht mit der Frage:

Welche sechs Farben gefallen uns?

Sondern mit:

Welche visuellen Rollen braucht unsere Website?

Dann folgt:

neutrale Basis
↓
Primärfarbe
↓
Statusfarben
↓
semantische Tokens
↓
Komponenten
↓
Zustände
↓
Kontrastprüfung
↓
reale Tests

Der wichtigste Grundsatz lautet:

Eine gute Farbpalette ist nicht die Palette mit den meisten schönen Farben, sondern diejenige, bei der jede verwendete Farbe eine nachvollziehbare Aufgabe besitzt.