Wie du ein Farbschema für deine Website auswählst

Die meisten Ratschläge zum „Website-Farbschema“ fallen in dem Moment in sich zusammen, in dem du eine echte Designdatei öffnest. Du suchst drei hübsche Farbmuster aus einem Generator, legst sie in ein Layout, und binnen einer Stunde improvisierst du eine vierte Farbe für die Fehlermeldung, eine fünfte für den gedämpften Beschriftungstext und eine sechste, weil das ursprüngliche Markenblau auf Weiß unleserlich ist. Das Problem ist nicht dein Geschmack. Es ist, dass eine Website keine Palette hübscher Farben braucht – sie braucht ein kleines, geschichtetes System, in dem jede Farbe eine Aufgabe hat.

Ich habe genug Oberflächen ausgeliefert, um die Kluft zwischen „Ich liebe diese Farben“ und „diese Seite ist benutzbar“ zu kennen. Dieser Leitfaden ist die Methode, die ich tatsächlich nutze, um vom einen zum anderen zu kommen – und wie man es aus einer Palette zusammensetzt, die du generierst, statt im Dunkeln zu raten.

Wie viele Farben eine Website wirklich braucht

Weit weniger, als die Leute denken, und weit mehr als drei.

Die Verwirrung entsteht, weil Farbtöne mit in der UI verwendeten Farben in einen Topf geworfen werden. Eine aufgeräumte Seite mag aus nur zwei oder drei Farbtönen gebaut sein – etwa einem Markenblau und einem warmen Grau –, aber diese wachsen auf über fünfzehn tatsächliche Werte an, sobald du Hintergründe, Rahmen, Text in verschiedenen Betonungsstufen, Hover-Zustände und so weiter einrechnest. Die ehrliche Antwort lautet also: Ziel sind ein oder zwei echte Farbtöne plus ein diszipliniertes Set Neutraler, und alles andere leitest du davon ab.

Wenn du nach einem wirklich neuen, unverwandten Farbton greifst, halt inne. In neun von zehn Fällen brauchst du keine weitere Farbe – du brauchst eine hellere oder dunklere Version einer, die du schon hast. Diese eine Angewohnheit verhindert den matschigen Zirkuszelt-Look, der nach Amateur schreit.

Das geschichtete Set: Weise jeder Farbe eine Aufgabe zu

Denk in Schichten, nicht in einer flachen Reihe von Farbmustern. Hier ist die Struktur, die ich jedes Mal aufbaue, von oben nach unten.

1. Die Primär-/Markenfarbe

Das ist die Farbe, die ein Besucher nennen würde, wenn du fragtest, was deine Seite „ist“. Sie trägt die Persönlichkeit und sollte auf den Dingen erscheinen, die du am meisten beachtet sehen willst – dem Logo, primären Buttons, der aktiven Navigation. Wähle sie zuerst, denn alles andere reagiert auf sie.

Eine Warnung aus Erfahrung: Eine gesättigte Markenfarbe ist als Fließtext fast nie lesbar und als großflächiger Hintergrund kaum brauchbar. Das Lila von Stripe, das Grün von Spotify, das fast schwarze GitHub – in der Praxis setzen diese Marken ihren Signaturton sparsam ein und stützen sich für die übrigen 90 % der Fläche auf Neutrale. Deine Markenfarbe ist ein Gewürz, nicht die Mahlzeit. Wenn du den Farbton von Grund auf wählst, zählen die emotionalen Assoziationen, und Die Psychologie der Farbe im Branding ist ein besserer Ort, um zu durchdenken, welcher Farbton es sein soll, als jede Generator-Vorschau.

2. Eine Neutral-/Hintergrundrampe

Das ist der unbesungene Held jeder professionell wirkenden Seite und die Schicht, die Anfänger überspringen. Du willst eine Rampe aus Neutralen – nicht ein Grau, sondern einen Verlauf aus fünf bis acht Stufen von Beinahe-Weiß bis Beinahe-Schwarz. Etwa #FFFFFF, #F7F8FA, #EBEDF0, #D2D6DC, #9AA0A8, #4B5159, #23272E.

Reines Grau (gleiche R-, G-, B-Werte) ist in Ordnung, aber ein getöntes Neutral wirkt durchdachter – verschiebe den Farbton ein paar Grad in Richtung deiner Markenfarbe und senke die Sättigung auf etwa 5–10 %. Ein leicht ins Blau gehendes Grau unter einer blauen Marke liest sich als „gestaltet“; ein totes Neutralgrau liest sich als „Bootstrap-Standard“. Nutze diese Stufen für Seitenhintergründe, Kartenflächen, Trennlinien und deaktivierte Zustände. Die Mechanik zum Erzeugen einer konsistenten Rampe lohnt sich richtig zu verstehen – siehe Tönungen, Schattierungen und Tonwerte erklärt.

3. Lesbare Textfarben (und die Kontrastregel, die sie bestimmt)

Fließtext ist selten reines Schwarz auf reinem Weiß – #000000 auf #FFFFFF kann hart wirken und bei manchen Lesenden einen flimmernden, ermüdenden Effekt verursachen. Ich setze den Primärtext meist um #1A1D21 an und definiere zwei weitere Stufen: Sekundärtext nahe #5A6068 für Bildunterschriften und Metadaten und ein deaktiviertes/Platzhalter-Grau nahe #9AA0A8.

Die eigentliche Vorgabe ist hier aber nicht ästhetisch, sondern messbar. Gemäß den WCAG-Richtlinien des W3C braucht normal großer Fließtext ein Kontrastverhältnis von mindestens 4,5:1 gegen seinen Hintergrund, um Stufe AA zu erfüllen; großer Text (grob 24px oder 18,66px fett) braucht nur 3:1. Dieses Sekundärgrau, das dir gefiel? Prüf es. Der häufigste Barrierefreiheitsfehler, den ich sehe, ist hellgrauer „dezenter“ Text auf Weiß, der bei rund 2,8:1 landet – hübsch im Mockup, unleserlich im Sonnenlicht. Lass jedes Text-auf-Hintergrund-Paar durch den WCAG-Kontrast-Checker in dem Color Palette Generator laufen, bevor du dich festlegst. Wenn du verstehen willst, was das Verhältnis tatsächlich misst und warum 4,5:1 die Grenze ist, geht WCAG-Kontrastverhältnisse erklärt tiefer.

4. Eine Akzent-/CTA-Farbe

Hier ein widersinniger Schritt: Deine Call-to-Action-Farbe ist oft nicht deine Markenfarbe. Wenn deine Marke blau ist und deine primären Buttons ebenfalls blau sind, konkurriert der „Jetzt kaufen“-Button mit jedem Link und jedem Header um Aufmerksamkeit. Ein eigenständiger Akzent – häufig ein komplementärer oder splitkomplementärer Farbton – lässt die eine Aktion, die dir wichtig ist, von der Seite hervorspringen.

Erzeuge ihn bewusst. Setze deinen Markenton auf den Farbkreis, wechsle zu einer komplementären oder splitkomplementären Harmonie, und du bekommst einen Kandidaten, der spannungsvoll genug ist, um den Blick zu ziehen, ohne zu kollidieren. Eine blaue Marke (#2563EB) passt sauber zu einem warmen Bernstein- oder Korallenakzent (#F59E0B / #F97316) für den primären CTA. Reserviere diese Farbe nahezu vollständig für Conversion-Momente – in dem Moment, in dem du sie zur Dekoration verwendest, hört sie auf, „hier klicken“ zu bedeuten.

5. Semantische Zustandsfarben

Jede echte Oberfläche muss irgendwann Erfolg, Warnung, Fehler und Info ausdrücken. Die meisten leihen sich die naheliegenden Standards – Grün, Gelb, Rot, Blau – und hören da auf, was zwei Probleme verursacht.

Erstens kollidieren das Lehrbuch-Rot und -Grün mit sorgfältig gewählten Markenfarben und sehen aus wie eine separate, lautere Designsprache, die obendrauf geschraubt wurde. Die Lösung ist, diese Farbtöne in Richtung der Gesamtsättigung und -wärme deiner Palette zu ziehen, sodass sie sich wie Familie anfühlen. Ziel ist etwa Erfolg #16A34A, Warnung #D97706, Fehler #DC2626, Info #2563EB, und dann die Sättigung passend zu deinen übrigen Farben einstellen.

Zweitens – und das wiegt schwerer – verlass dich niemals allein auf Farbe, um einen Zustand zu kommunizieren. Etwa 1 von 12 Männern und 1 von 200 Frauen hat eine Form von Farbsehschwäche, und Rot/Grün ist die klassische Verwechslung. Kombiniere die Zustandsfarbe stets mit einem Symbol, einer Beschriftung oder einer Form. Ein roter Rahmen und eine Meldung „✕ Pflichtfeld“. Ein grünes Häkchen und das Wort „Gespeichert“. Das ist eine WCAG-Anforderung, keine Nettigkeit, und es ist die wirkungsvollste einzelne Barrierefreiheits-Angewohnheit, die du aufbauen kannst. Wenn dein Publikum oder Produkt farbsensibel ist, behandelt Farbenblind-freundliche Paletten, wie man das direkt testet.

6. Link-, Hover- und Fokusfarben

Die kleinste Schicht und die, die polierte Seiten von schludrigen trennt.

• Links nehmen meist die Markenfarbe, aber prüfe den Kontrast gegen die Fläche, auf der sie sitzen – eine für Buttons abgestimmte Markenfarbe ist für Inline-Textlinks oft zu hell.
• Hover sollte eine abgeleitete Schattierung sein, keine neue Farbe: Nimm die Basis und verschiebe die Helligkeit in HSL um 8–12 % nach unten. Konsistent, vorhersehbar, kostenlos.
• Fokusringe sind für Tastaturnutzer nicht verhandelbar. WCAG 2.1 verlangt außerdem, dass UI-Komponenten und ihre Zustände ein 3:1-Nicht-Text-Kontrastverhältnis erreichen, sodass ein blasser Fokusrahmen, der „clean aussieht“, aber kaum sichtbar ist, ein Fehlschlag ist. Mach ihn deutlich.

Aus einer generierten Palette zusammensetzen

Hier ist der Workflow, der die Ausgabe eines Generators in das obige System verwandelt – statt in fünf Farbmuster, die du später retten musst.

Fang damit an, deinen Markenton auf dem Farbkreis festzulegen. Nutze eine Harmonieregel zum Vorschlagen, nicht zum Diktieren – analog, wenn du ein ruhiges, stimmiges Gefühl willst; komplementär oder splitkomplementär, wenn du einen knackigen Akzent brauchst. (Wenn du zwischen Schemata hin- und hergerissen bist, schlüsselt Splitkomplementär vs. Triadisch die Abwägungen auf.) Kopiere den Marken-Hex und den Akzent-Hex; das sind Schicht 1 und 4.

Bau dann die Neutralen bewusst auf. Nimm deinen Markenton, senke die Sättigung auf etwa 8 % und nutze die HSL-Anzeige, um die Helligkeit von ~98 % auf ~14 % in fünf oder sechs Stufen abzustufen. Das ist deine komplette Neutral-Rampe – Schicht 2 –, und weil sie den Markenton teilt, fühlt sie sich stimmig an statt aufgepfropft. Leite die Textfarben vom dunklen Ende dieser Rampe ab (Schicht 3) und prüfe jede gegen ihren Hintergrund mit dem Kontrastwerkzeug, bis jede Paarung 4,5:1 erreicht.

Für semantische Zustände erzeuge Grün/Bernstein/Rot/Blau separat und verschiebe dann ihre Sättigung in den HSL-Feldern, sodass sie neben deiner Palette sitzen, statt sie zu überschreien. Leite zuletzt Hover- und Fokuswerte ab, indem du die Helligkeit von Farben verschiebst, die du bereits hast – keine neuen Farbtöne nötig.

Der Grund, durchgehend in HSL zu arbeiten, ist, dass „ein bisschen heller“ oder „eine Spur weniger gesättigt“ damit eine Änderung über einen einzigen Wert wird, statt eines Ratespiels über drei RGB-Kanäle. Falls diese Darstellung neu für dich ist, sind HEX, RGB & HSL: Farbcodes verständlich erklärt zehn Minuten wert.

Ein Schritt, der dir ein Redesign erspart

Bevor du dich in irgendein Schema verliebst, füge deine endgültigen Werte in ein graues, textlastiges Wireframe ein – echte Überschriften, echte Absätze, echte Buttons – und sieh es dir eine volle Minute lang an. Farbe verführt im Farbmuster-Raster immer und enttäuscht im Layout, weil Kontext, umgebende Neutrale und Proportion alles verändern. Die 60-30-10-Regel gibt dir hier Proportionen, die Respekt verdienen: überwiegend neutral, ein nennenswerter Anteil Marke, ein kleiner Stoß Akzent.

Ein Website-Farbschema ist kein Satz Farben, die dir gefallen. Es ist ein Satz Entscheidungen – was ist Marke, was ist Fläche, was ist lesbar, was ist hier klicken, was ist „etwas ist schiefgelaufen“ – jede einzelne zugewiesen, getestet und mit Disziplin wiederverwendet. Bring die Aufgaben richtig hin, und nahezu jede geschmackvolle Palette funktioniert. Lass die Aufgaben weg, und selbst eine schöne Palette kämpft auf jedem Bildschirm gegen dich.