Farbschema für die Website finden: 7 Methoden

Ein Farbschema für die Website entsteht nicht durch Ausprobieren im Farbwähler, sondern durch einen festen Ausgangspunkt und ein paar einfache Regeln. Wählen Sie eine Hauptfarbe, eine Akzentfarbe und Neutraltöne, bilden Sie davon Abstufungen und prüfen Sie die Kontraste. Welche der folgenden sieben Methoden am besten passt, hängt davon ab, was Sie schon haben: ein Logo, ein Foto, eine Stimmung oder nur ein leeres Blatt.

Die theoretischen Grundlagen wie Farbkreis, Farbschemata und Farbwirkung stehen im Ratgeber Farbgestaltung. Hier geht es um die Praxis.

Bevor Sie anfangen: die Rollen einer Palette

Eine Website-Palette besteht nicht aus fünf gleichberechtigten Lieblingsfarben, sondern aus Farben mit festen Aufgaben:

Wer diese Rollen kennt, kann jede der folgenden Methoden gezielt einsetzen.

Methode 1: Vom Logo oder einer Markenfarbe ausgehen

Gibt es bereits ein Logo, ist die Hauptfarbe meist gesetzt. Nehmen Sie den Farbwert aus der Logodatei, nicht aus einem Screenshot, denn Bildschirmfotos verfälschen Farben leicht. Prüfen Sie dann, ob die Farbe für ihre Rolle taugt: Ein helles Gelb aus dem Logo eignet sich nicht für Text auf Weiß, ein sehr gesättigtes Rot ist für große Flächen anstrengend. In solchen Fällen leiten Sie eine dunklere oder ruhigere Variante ab, die im Farbton gleich bleibt und deshalb zur Marke passt.

Methode 2: Farben aus einem prägenden Foto ziehen

Wenn ein bestimmtes Foto die Website prägen soll, etwa eine Landschaft, ein Produkt oder ein Raum, steckt die Palette oft schon darin. Mit der Pipette eines Grafikprogramms oder einem Paletten-Werkzeug, das Farben aus Bildern extrahiert, gewinnen Sie fünf bis sieben Kandidaten. Wählen Sie daraus:

• einen dunklen Ton als Kandidaten für Textfarbe oder Hauptfarbe,
• einen hellen, wenig gesättigten Ton als Flächenfarbe,
• einen kräftigen Ton als Akzent.

Der Vorteil: Fotos und Gestaltung wirken automatisch wie aus einem Guss.

Methode 3: Mit dem Farbkreis arbeiten

Haben Sie nur eine Hauptfarbe, liefert der Farbkreis die passenden Partner. Die Komplementärfarbe auf der gegenüberliegenden Seite eignet sich als kontrastreicher Akzent, die Nachbarfarben ergeben ein harmonisches, analoges Schema. Viele Paletten-Generatoren zeigen diese Beziehungen auf Knopfdruck. Wichtig ist, die Vorschläge nicht ungeprüft zu übernehmen: Rechnerisch passende Farben können in der Praxis grell wirken. Passen Sie Helligkeit und Sättigung an, bis die Kombination ruhig genug ist.

Methode 4: Die 60-30-10-Regel anwenden

Die Regel stammt aus der Innenraumgestaltung und lässt sich gut auf Websites übertragen. Etwa 60 Prozent der Fläche entfallen auf eine dominante Farbe, meist ein heller Neutralton, 30 Prozent auf eine Sekundärfarbe, etwa für Kopfbereich, Karten oder Abschnitte, und 10 Prozent auf die Akzentfarbe.

Die Prozentwerte sind Richtgrößen. Entscheidend ist der Gedanke dahinter: Eine Farbe dominiert, eine unterstützt, eine fällt auf. Wird die Akzentfarbe zur Dekoration verwendet, verliert sie ihre Signalwirkung für Buttons und Links.

Methode 5: Von einer Stimmung oder einem Moodboard ausgehen

Ohne Logo und Foto hilft ein Moodboard: eine Sammlung von Bildern, Materialien, Schriften und Farben, die die gewünschte Wirkung zeigen. Beschreiben Sie zuerst die Stimmung in drei Adjektiven, etwa “ruhig, natürlich, hochwertig” oder “lebendig, jung, direkt”. Sammeln Sie dann Bilder, die dazu passen, und suchen Sie die Farben, die sich durch die Sammlung ziehen. So entsteht eine Palette, die eine Haltung ausdrückt, statt nur gut auszusehen.

Methode 6: Den Wettbewerb ansehen und sich abheben

Schauen Sie sich fünf bis zehn Websites aus demselben Themenfeld an und notieren Sie die Hauptfarben. Häufig zeigen sich klare Muster, etwa viel Blau bei Finanzthemen oder viel Grün bei Natur und Gesundheit. Sie haben dann zwei Möglichkeiten: sich bewusst einreihen, damit Besucher das Thema sofort erkennen, oder sich bewusst abheben, um im Gedächtnis zu bleiben. Beides ist legitim. Wichtig ist, die Entscheidung bewusst zu treffen.

Methode 7: Eine Palette aus Tonstufen aufbauen

Diese Methode ergänzt alle anderen. Eine Palette mit nur einem Wert pro Farbe reicht in der Praxis nicht: Sie brauchen hellere Töne für Hintergründe von Hinweisboxen, dunklere für Hover-Zustände und Text. Bilden Sie deshalb für Haupt-, Akzent- und Neutralfarbe jeweils eine Reihe von Stufen, zum Beispiel von 50 (sehr hell) bis 900 (sehr dunkel).

Zwei Hinweise dazu:

• HSL ist für den Einstieg praktisch, weil Sie nur die Helligkeit verschieben. Die wahrgenommene Helligkeit ist aber je nach Farbton unterschiedlich, ein Gelb wirkt bei gleichem Wert viel heller als ein Blau.
• OKLCH orientiert sich stärker an der menschlichen Wahrnehmung. Stufen mit gleichem Helligkeitswert wirken über verschiedene Farbtöne hinweg gleichmäßiger. Moderne Browser unterstützen dieses Farbmodell in CSS.

Ein Beispiel: von der Hauptfarbe zur fertigen Palette

Angenommen, ein Ratgeber über Gartenpflanzen soll ruhig und natürlich wirken. Ausgangspunkt ist ein gedecktes Grün aus einem Foto der Startseite. So könnte die Palette entstehen:

Mit diesen sechs Werten und ihren Stufen lässt sich die ganze Website gestalten. Neue Farben kommen nur hinzu, wenn eine neue Rolle entsteht, etwa eine Fehlermeldung im Formular.

Kontraste prüfen: der Schritt, der oft fehlt

Jede Palette muss sich im Alltag bewähren: Text auf Hintergrund, Link im Fließtext, Button-Beschriftung auf Button-Farbe. Für normalen Text verlangen die WCAG ein Kontrastverhältnis von mindestens 4,5 zu 1, für große Schrift und grafische Bedienelemente 3 zu 1. Prüfen Sie jedes Paar mit einem Kontrastrechner und notieren Sie, welche Kombinationen erlaubt sind. Wie das Kontrastverhältnis berechnet wird und welche Werte gelten, erklärt der Artikel Kontrast und Lesbarkeit.

Denken Sie außerdem an Menschen mit Farbsehschwäche: Rot und Grün als einzige Unterscheidung für Fehler und Erfolg funktionieren nicht für alle. Ergänzen Sie Symbole oder Text.

Die Palette für den Dunkelmodus

Soll die Website auch einen Dunkelmodus haben, planen Sie ihn gleich mit. Die helle Palette einfach umzukehren, ergibt selten ein gutes Ergebnis. Dunkle Hintergründe brauchen eigene Töne, und kräftige Akzentfarben wirken auf Dunkel oft zu grell und werden etwas entsättigt. Wie Sie dabei vorgehen, beschreibt der Artikel Dark Mode gestalten.

Dokumentieren und benennen

Halten Sie die fertige Palette schriftlich fest, mit Farbcodes und Rolle. Benennen Sie Farben nach ihrer Aufgabe, nicht nach ihrem Aussehen: “Akzent” statt “Pink”, “Text” statt “Dunkelgrau”. So lässt sich die Akzentfarbe später austauschen, ohne dass Namen in die Irre führen. In CSS bieten sich dafür Custom Properties an, zum Beispiel --farbe-akzent und --farbe-text.

Checkliste: Ist Ihr Farbschema fertig?

• Hauptfarbe, Akzentfarbe und Neutraltöne sind festgelegt.
• Jede Farbe hat Hell- und Dunkelstufen.
• Die Akzentfarbe ist für Aktionen reserviert.
• Alle Text-Hintergrund-Paare erreichen die nötigen Kontrastwerte.
• Informationen hängen nie nur an der Farbe.
• Statusfarben für Erfolg, Warnung und Fehler sind definiert.
• Die Palette ist mit Codes und Rollen dokumentiert.
• Der Dunkelmodus ist mitgedacht oder bewusst ausgelassen.

Mit dieser Grundlage bleibt die Farbgestaltung auch dann stimmig, wenn die Website wächst und neue Seiten, Hinweisboxen oder Formulare dazukommen.