Farbschema für Websites: Farben für eine Seite wählen

Ein gutes Farbschema für Websites ist kein Moodboard aus fünf Lieblingsfarben. Es ist eine kurze Liste von Rollen, jede mit einer Farbe besetzt: Seitengrund, erhöhte Flächen, Fließtext, leiserer Text, Rahmen, ein Akzent für Aktionen und Rot, Bernstein und Grün für Status. Wähle zuerst deinen Markenakzent, bau ruhige Neutraltöne darum, prüfe jede Textkombination auf Kontrast und speichere das Ergebnis als CSS Variablen, damit die ganze Seite dieselben Werte nutzt.

Die Rollen, die jede Website braucht

So wählst du Farben für deine Website

1. 1

   Starte mit einem Akzent

   Deine Markenfarbe oder die, mit der Leute dich verbinden sollen. Hast du keine, hilft Markenfarben wählen.

2. 2

   Tönt die Neutraltöne in seine Richtung

   Grautöne mit einem Hauch vom Farbton des Akzents wirken verwandt. Eine Petrol-Marke bekommt kühle, leicht bläuliche Grautöne, eine Terrakotta-Marke warme, cremige.

3. 3

   Entscheide hell, dunkel oder beides

   Wähle das Theme, das die meisten Besucher zuerst sehen, und gestalte es vollständig, bevor du das andere beginnst.

4. 4

   Prüfe jede Textkombination

   Text auf Grund, Text auf Fläche, gedämpfter Text auf beidem, Weiß auf dem Akzent-Button. Korrigiere alles unter 4,5:1.

5. 5

   Wende 60, 30, 10 an

   Ungefähr 60% Grund, 30% Flächen und Text, 10% Akzent. Die 60 30 10 Regel erklärt die Balance.

Drei Farbpaletten für Websites als Ausgangspunkt

Kontrastregeln, die eine Seite lesbar halten

Die WCAG Kontrastrichtlinien setzen die Untergrenze: 4,5:1 für normalen Text, 3:1 für großen Text (etwa 24 px oder 19 px fett) und 3:1 für Bedienelemente wie Rahmen von Eingabefeldern und Icons mit Bedeutung. WebAIMs Kontrastprüfer testet jedes Paar. Unser Leitfaden zu Farbkontrast erklärt die Gründe und die Grenzfälle.

Dein Farbschema als Tokens coden

Speichere jede Rolle einmal als CSS Custom Property und nutze in deinen Styles nur diese Variablen. Dann sind ein dunkles Theme, eine saisonale Kampagne oder ein Rebranding eine Änderung an einem Block Werte, keine Suche durch jede Datei. Das ist die Kernidee von Design Tokens.

:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }

Dark Mode ist ein eigenes Schema

Eine helle Palette umzukehren funktioniert selten. Satte Akzente leuchten auf Schwarz zu hart, Schatten verschwinden, und reinweißer Text blendet. Bau den Dark Mode als zweiten Satz Werte: ein fast schwarzer Grund mit einem Hauch Farbton, Flächen, die heller werden, je höher sie liegen, weicherer Text und ein Akzent, der aufgehellt wird, bis er den Kontrast erreicht. Dark Mode Design geht tiefer.

Wo Markenfarbe über Buttons hinausgeht

Steckt der Akzent nur in Buttons, kann die Seite beliebig wirken. Die Antwort ist nicht mehr Akzent überall, sondern ein Ort, an dem die Marke ausdrucksstark sein darf: der Hero, ein Feature-Band oder der Footer. Ein satter Farbverlauf aus der Farbfamilie der Marke funktioniert dort gut, während der Rest der Seite ruhig und lesbar bleibt.

Ein Gradiently Mark kann diese ausdrucksstarke Ebene sein: ein Hintergrund, den sonst niemand hat und der für jede Zeile eine Schriftfarbe aus seiner eigenen Palette wählt, damit Überschriften lesbar bleiben. Mehr zu Kombinationen findest du unter Farbharmonie und Hero Section Design.