Farben im Webdesign: ein Farbschema entwickeln

Wie kommt man zu Farben, die zusammenpassen und zum Thema einer Website passen? Diese Frage stellte die ursprüngliche Fassung dieses Beitrags aus dem Jahr 2006 – und beantwortete sie mit dem Farbkreis nach Johannes Itten und einem Trick im Grafikprogramm. Beides funktioniert bis heute. Was dazugekommen ist, sind messbare Anforderungen.

Der Weg von damals

Der ursprüngliche Ansatz war handwerklich und in drei Schritten beschrieben.

Schritt 1: eine Grundfarbe wählen

Die Empfehlung lautete, eine Farbe zu nehmen, die zum Inhalt passt – bei einer Seite über Wassersport also Blautöne. Dazu zwei Einschränkungen: keine Pastellfarbe, aber auch keine grelle Farbe. Beides gilt unverändert, weil eine zu blasse Grundfarbe keine Struktur trägt und eine zu grelle bei größeren Flächen ermüdet.

Schritt 2: Abstufungen erzeugen

Hier wird es zeitgeschichtlich interessant. Die Anleitung von damals: Im Grafikprogramm die Hintergrundfarbe auf die Grundfarbe stellen, ein weißes Rechteck darüberziehen, diesem etwa 15 % Deckkraft geben und die entstandene Mischfarbe mit der Pipette ablesen. Für Modulationen – Abdunkeln oder Aufhellen – dasselbe mit Schwarz, Grau oder Weiß als Hintergrund.

Das war kein Umweg aus Umständlichkeit, sondern schlicht die einzige verfügbare Methode: Ein Browser konnte Farben nicht selbst berechnen, jeder Farbwert musste als fester Hexcode im Stylesheet stehen.

Heute rechnet CSS das selbst, und die Beziehung zwischen den Farben bleibt im Code sichtbar:

:root {
  --grund: #0090c8;

  /* Aufhellungen -- entspricht dem weissen Rechteck von damals */
  --grund-hell:   color-mix(in oklab, var(--grund), white 15%);
  --grund-heller: color-mix(in oklab, var(--grund), white 40%);

  /* Abdunklung -- entspricht der Modulation nach Schwarz */
  --grund-dunkel: color-mix(in oklab, var(--grund), black 20%);
}

Der Unterschied ist nicht nur Bequemlichkeit: Ändert sich die Grundfarbe, ziehen alle Abstufungen automatisch mit. Früher musste jeder einzelne Hexcode neu abgelesen und ersetzt werden.

Ein Detail lohnt die Erwähnung: in oklab mischt in einem Farbraum, der der menschlichen Wahrnehmung entspricht. Mischt man stattdessen in sRGB – wie es das Grafikprogramm damals tat – werden Zwischentöne oft matschig oder rutschen im Farbton weg. Wer die alten Ergebnisse nachbauen will, bekommt mit oklab die besseren.

Schritt 3: eine Kontrastfarbe über den Farbkreis finden

Der Beitrag verwies auf den Farbkreis nach Johannes Itten von 1961: Aus den Primärfarben Blau, Rot und Gelb entstehen die Sekundärfarben Grün, Orange und Violett, aus deren Mischung die Tertiärfarben. Gegenüberliegende Farben sind Komplementärfarben und harmonieren miteinander. Wer mehr als zwei Farben braucht, legt geometrische Formen in den Kreis – Dreieck, Rechteck, Sechseck – und liest die Eckpunkte ab.

Diese Methode ist nicht veraltet. Sie ist heute nur in Werkzeugen eingebaut, statt von Hand angewendet zu werden. Wer eine Palette aus einer Grundfarbe ableiten will, findet in jedem Farbwerkzeug genau diese Schemata unter den Namen komplementär, triadisch oder tetradisch.

Rechnerisch entspricht das einer Drehung im Farbkreis:

/* Komplementaerfarbe: 180 Grad gegenueber */
--kontrast: oklch(from var(--grund) l c calc(h + 180));

/* Triade: zwei Farben im Abstand von je 120 Grad */
--triade-a: oklch(from var(--grund) l c calc(h + 120));
--triade-b: oklch(from var(--grund) l c calc(h - 120));

Was der alte Beitrag schon richtig sah

Drei Punkte der ursprünglichen Fassung sind bemerkenswert stabil geblieben:

• Weiß als Hintergrund für den Inhaltsbereich. Die Begründung damals – „bekanntlich lässt sich am besten schwarz auf weiß lesen“ – ist etwas zu absolut, aber der Kern stimmt: Fließtext braucht einen ruhigen, kontrastreichen Grund. Heute käme hinzu, dass viele Nutzer eine dunkle Darstellung bevorzugen, was ein zweites Farbset nötig macht.
• Sparsam einsetzen. Der Beitrag beschrieb Rot-Orange und Hellblau als Akzente, „die auch bewusst sparsam auf der Seite gesetzt werden“. Das ist im Kern die 60-30-10-Regel, die heute in jedem Designsystem steckt: viel neutrale Fläche, deutlich weniger Grundfarbe, sehr wenig Akzent.
• Vorhandenes Material einbeziehen. Der Hinweis, Farben von Visitenkarte oder Flyer zu übernehmen, weil sie zur Corporate Identity gehören und einen Wiedererkennungswert erzeugen, ist unverändert richtig – heute nur mit mehr Nachdruck, weil eine Marke über mehr Kanäle gleichzeitig auftritt.

Was heute dazugekommen ist

Kontrast ist keine Geschmacksfrage mehr

Der größte Unterschied: Ob eine Farbkombination lesbar ist, wird heute nicht geschätzt, sondern gemessen. Die Web Content Accessibility Guidelines legen Mindestwerte für das Kontrastverhältnis fest:

• 4,5:1 für normalen Fließtext
• 3:1 für große Schrift ab etwa 24 Pixel oder ab 19 Pixel in Fettung
• 3:1 für Bedienelemente und deren Zustände – Rahmen von Eingabefeldern, Fokusanzeige, Symbole mit Bedeutung

Das trifft ausgerechnet die Kombination, die der alte Beitrag empfahl: helle Akzentfarben auf weißem Grund. Ein freundliches Hellblau kommt auf Weiß oft nur auf 2:1 und fällt damit durch. Die übliche Lösung ist ein Farbpaar – der helle Ton für Flächen, ein deutlich dunklerer für Text und Ränder.

Für Betreiber in der EU ist das seit dem Barrierefreiheitsstärkungsgesetz (Juni 2025) für viele Angebote nicht mehr optional.

Farbe darf nie die einzige Information sein

Etwa acht Prozent der Männer haben eine Rot-Grün-Sehschwäche. Ein rot markiertes Pflichtfeld, das sich sonst nicht von einem grünen unterscheidet, ist für sie unsichtbar. Farbe braucht deshalb immer eine zweite Ebene: ein Symbol, eine Beschriftung, eine andere Form.

Zwei Paletten statt einer

Wer heute ein Farbschema anlegt, plant die dunkle Darstellung von Anfang an mit. Farben lassen sich dabei nicht einfach umkehren – ein Blau, das auf Weiß gut sitzt, wirkt auf dunklem Grund oft grell und muss entsättigt werden:

:root {
  --grund:       #0090c8;
  --text:        #1a1a1a;
  --hintergrund: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:       #4db8e0;  /* aufgehellt und leicht entsaettigt */
    --text:        #e8e8e8;
    --hintergrund: #16181c;  /* nicht reines Schwarz -- das flimmert */
  }
}

Eine Reihenfolge, die funktioniert

1. Grundfarbe wählen – passend zum Thema, weder pastellig noch grell. Unverändert der erste Schritt.
2. Abstufungen ableiten – zwei bis vier Helligkeitsstufen. Damals per Pipette, heute per Funktion.
3. Kontrastfarbe bestimmen – über den Farbkreis, gegenüberliegend oder benachbart.
4. Neutrale Töne ergänzen – Grauabstufungen für Text, Rahmen und Flächen. Diese machen den größten Teil der Seite aus.
5. Kontraste prüfen – jede Text-Hintergrund-Kombination gegen die Mindestwerte messen. Dieser Schritt fehlte 2006 komplett und ist heute der wichtigste.
6. Mengen festlegen – wo viel Fläche, wo wenig. Der alte Beitrag nannte das die quantitative Verteilung.

Fazit

Die Farbenlehre hinter dem Beitrag von 2006 ist nicht überholt – Itten hilft heute genauso beim Finden harmonischer Kombinationen wie damals. Verändert hat sich die Umsetzung: Was per Pipette aus einem transparenten Rechteck abgelesen wurde, rechnet der Browser inzwischen selbst, und die Beziehungen zwischen den Farben bleiben dabei im Code erhalten.

Dazugekommen ist eine Prüfschicht, die es damals nicht gab. Ein Farbschema ist heute erst fertig, wenn es nicht nur gefällt, sondern auch messbar lesbar ist.

Bei Farbkonzept, Designsystem und barrierefreier Gestaltung unterstützen wir Sie als Webdesign-Agentur gerne.