Blog

Website Farben: wie du eine Palette findest, die überall hält

Website Farben legst du nicht nach Geschmack fest, sondern nach Aufgabe: eine Grundfarbe, eine Textfarbe, ein Akzent, und jedes Paar davon mit geprüftem Kontrast. Das ist weniger Arbeit, als es klingt, und wo die Farben im Ablauf einer neuen Seite stehen, zeigt die [Anleitung vom ersten Inhalt bis zum Livegang](/blog/website-erstellen-anleitung).

17. September 2026 · Von Melta

Website Farben: warum die Palette vor dem Design kommt

Der Haken zuerst: Die meisten Farbprobleme entstehen nicht bei der Wahl, sondern beim Einsatz. Ein Blau, das im Logo gut aussieht, wird als Fläche hinter weisser Schrift zu blass. Ein sattes Orange als Akzent passt auf den Knopf und ist als Linktext im Fliesstext kaum lesbar. Und die dritte, vierte, fünfte Farbe, die unterwegs dazukommt, weil irgendein Bereich sich abheben soll, macht aus einer Seite ein Sammelsurium.

Deshalb beginnt die Arbeit nicht im Farbkreis, sondern mit einer Liste von Aufgaben. Welche Farbe trägt den Text. Welche steht hinter dem Text. Welche markiert das, was jemand anklicken soll. Welche zeigt einen Fehler, welche eine Bestätigung. Erst wenn jede Aufgabe eine Farbe hat, ist die Palette fertig, und sie ist meist kleiner, als der erste Entwurf vermuten lässt.

Der zweite Punkt: Farben auf einer Website leben in Paaren. Eine Farbe allein ist nie zu hell oder zu dunkel, sie ist es nur gegen ihren Hintergrund. Was zählt, ist also nicht das Rot, sondern das Rot auf Weiss, das Rot auf Dunkelgrau, das Weiss auf Rot. Diese Paare sind das, was du am Ende festlegst und prüfst.

Wie viele Farben braucht eine Website?

Weniger, als die meisten Entwürfe haben. Eine Palette, die trägt, besteht aus einer Grundfarbe für Flächen und Kopfzeile, einer Textfarbe, meist ein sehr dunkles Grau statt reinem Schwarz, einer hellen Hintergrundfarbe und einer Akzentfarbe für alles, was angeklickt werden soll. Dazu kommen die Zustandsfarben, die niemand aussucht und jede Seite braucht: ein Rot für Fehlermeldungen, ein Grün für Erfolg, ein Gelb für Hinweise.

Wer Website Farben mischen will, mischt keine neuen Töne, sondern Abstufungen. Aus der Grundfarbe entstehen eine hellere Fassung für Hintergründe und eine dunklere für den Moment, in dem die Maus über dem Knopf liegt. Aus der Textfarbe entsteht ein mittleres Grau für Nebentexte und Rahmen. So bleibt die Palette bei einer Handvoll Ausgangsfarben und sieht trotzdem nicht flach aus.

Rolle	Wofür	Was die Farbe können muss
Grundfarbe	Kopfzeile, grosse Flächen, Marke	Auch als Fläche hinter Text funktionieren
Textfarbe	Fliesstext, Überschriften	Sehr dunkel, sicherer Kontrast auf jedem Hintergrund
Hintergrund	Seite, Karten, Formulare	Hell, ruhig, mit einer zweiten Stufe zur Abgrenzung
Akzent	Knöpfe, Links, aktive Elemente	Auffallen und als Text lesbar bleiben
Zustände	Fehler, Erfolg, Hinweis	Rot, Grün, Gelb, jeweils mit einem Wort daneben

Die rechte Spalte entscheidet. Eine Akzentfarbe, die nur auf dem Knopf funktioniert und als Link im Text unlesbar ist, kostet dich später eine zweite Akzentfarbe, und damit beginnt das Sammelsurium.

Wie findest du die Farben für deine Website?

Der einfachste Weg führt über etwas, das schon da ist. Hast du ein Logo, ist seine Hauptfarbe die Grundfarbe, und der Rest wird darauf abgestimmt. Wie ein Logo entsteht und warum es als Vektordatei vorliegen sollte, steht im Artikel zum Logo erstellen. Hast du keins, hilft ein Blick auf das, was Kundinnen und Kunden von dir kennen: die Farbe des Ladens, der Fahrzeuge, der Verpackung. Eine Website, die zur Eingangstür passt, wirkt vertrauter als eine, die einem Trend folgt.

Zur Bedeutung von Website Farben gibt es viele Listen, und die meisten gelten nur innerhalb einer Branche. Blau wirkt bei Banken, Versicherungen und Praxen vertraut, weil dort fast alle Blau verwenden. Grün steht bei einer Gärtnerei für Pflanzen und bei einer Apotheke für das Kreuz. Rot signalisiert in einem Formular einen Fehler und beim Metzger Frische. Die Bedeutung kommt also aus dem Umfeld, nicht aus der Farbe. Sieh dir an, was in deiner Branche üblich ist, und entscheide dann, ob du dazugehören oder dich absetzen willst. Beides ist eine Wahl. Nur der Zufall ist keine.

Beim Abstimmen der Website Farben hilft ein einfacher Test: Leg Grundfarbe, Akzent und Hintergrund nebeneinander auf eine Fläche und schreib jeweils einen Satz in Textfarbe darauf. Wirkt ein Feld unruhig oder schwimmt die Schrift darauf, ist selten die Kombination schuld, sondern meist eine zu grelle oder zu blasse Einzelfarbe.

Website Farben ermitteln: was ein Generator kann und was nicht

Ein Generator für Website Farben nimmt eine Ausgangsfarbe und rechnet daraus Nachbarn, Gegenfarben und Abstufungen. Das ist nützlich, um Varianten zu sehen, die du selbst nicht gemischt hättest, und um Abstufungen sauber zu erzeugen. Was ein Generator nicht kann: entscheiden, welche Farbe welche Aufgabe bekommt, und prüfen, ob die Kombination auf deiner Seite mit deinen Schriftgrössen lesbar bleibt. Er liefert Kandidaten, kein Ergebnis.

Website Farben erkennen, also die Farbwerte einer bestehenden Seite oder eines Fotos herausfinden, geht ohne Spezialwerkzeug. Die Entwicklerwerkzeuge im Browser zeigen für jedes Element den Farbwert an, den die Seite verwendet, und die Pipette in jedem Bildprogramm liest den Wert aus einem Foto. So ermittelst du das Blau deiner alten Seite oder das Grün deiner Ladenfront als Hex-Wert und arbeitest ab dann mit genau diesem Wert statt mit einer Annäherung.

Ein Hinweis zu Fotos: Die Farbe im Bild ist die Farbe unter dem Licht dieses Moments. Ein Ladenschild bei Abendsonne liefert ein anderes Grün als dasselbe Schild bei Regen. Miss deshalb an mehreren Stellen und nimm den Wert, der dem am nächsten kommt, was Leute vor Ort sehen.

Website Farben auf Barrierefreiheit prüfen

Das ist der Teil, den fast alle überspringen und der am meisten kostet, wenn er fehlt. Lesbarkeit ist kein Geschmack, sondern ein messbares Verhältnis zwischen Textfarbe und Hintergrund. Die Web Content Accessibility Guidelines (WCAG) des W3C legen dafür Mindestwerte fest, und die helfen jedem, der die Seite auf dem Handy in der Sonne liest.

Was	Mindestkontrast nach WCAG 2.1, Stufe AA	Betrifft
Normaler Text	4,5:1	Fliesstext, Formularbeschriftungen, Links
Grosser Text	3:1	Text ab 18 Punkt oder ab 14 Punkt fett
Bedienelemente und Grafiken	3:1	Rahmen von Eingabefeldern, Symbole, Teile von Diagrammen

Website Farben testen heisst also: jedes Paar aus Text- und Hintergrundfarbe, das auf der Seite vorkommt, durch einen Kontrastrechner schicken. Die Grundfarbe mit weisser Schrift. Die Akzentfarbe als Link auf weissem Grund. Das mittlere Grau der Nebentexte auf der hellen Karte. Fällt ein Paar durch, dunkelst du die Textfarbe ab oder hellst den Hintergrund auf, bis der Wert stimmt. Das ist meist eine Änderung an einer Stufe, nicht an der ganzen Palette.

Die zweite Regel wird noch öfter verletzt: Farbe darf nie die einzige Information sein. Ein Pflichtfeld, das nur rot umrandet ist. Ein Link, der sich nur durch die Farbe vom Text unterscheidet. Ein Diagramm, dessen Linien nur die Farbe trennt. Wer Rot und Grün schlecht auseinanderhält, sieht davon nichts. Ein Symbol, eine Unterstreichung oder ein Wort daneben löst das, und die Palette bleibt gleich gross.

Was passiert mit den Farben nach dem Livegang?

Sie ändern sich. Der Betrieb bekommt ein neues Logo, die Grundfarbe wirkt nach ein paar Jahren müde, oder der dunkle Modus kommt dazu und braucht die ganze Palette ein zweites Mal, gespiegelt. Wie teuer das wird, hängt davon ab, wie die Farben in der Seite stecken.

Sind die Werte überall im Code und in Bildern eingetragen, ist ein Farbwechsel ein kleines Projekt. Sind sie an einer Stelle als benannte Werte hinterlegt, also Grundfarbe, Akzent, Text, Hintergrund, ist er eine Änderung an einer Datei. Wer eine Seite bauen lässt, sollte deshalb vor dem Auftrag fragen, wie ein späterer Farbwechsel abläuft und was er kostet. Bei Melta zum Beispiel sind Farben und Schriften ohne Neubau änderbar, weil sie als Teil der Marke hinterlegt sind und nicht im Code der einzelnen Seiten.

Dieselbe Frage stellt sich für den dunklen Modus. Eine helle Palette einfach umzukehren funktioniert selten: Sattes Blau, das auf Weiss gut trägt, leuchtet auf Schwarz zu grell, und reines Weiss als Text auf Schwarz flimmert. Wer den dunklen Modus will, plant ihn als eigene Palette mit denselben Rollen und prüft die Kontraste noch einmal.

Website Farben festlegen: die Liste vor dem Start

Bevor die Farben in eine Seite wandern, sollte auf einem Blatt stehen: die Grundfarbe mit Hex-Wert, die Textfarbe, der Hintergrund mit seiner zweiten Stufe, die Akzentfarbe, die Zustandsfarben und für jedes Paar aus Text und Hintergrund der gemessene Kontrast. Das ist eine halbe Seite, und sie erspart die Diskussion, die sonst bei jedem neuen Element wieder aufkommt.

Was nicht auf die Liste gehört: Farben ohne Aufgabe. Findet ein Ton keinen Platz in der Tabelle mit den Rollen, braucht ihn die Seite nicht. Und was bei Website Farben am Ende zählt, ist nicht, ob sie jemandem gefallen, sondern ob jemand die Preise darauf lesen, den Knopf finden und das Fehlerfeld erkennen kann. Wo diese Liste im Ablauf einer neuen Seite steht und was vor und nach ihr kommt, zeigt die Anleitung vom ersten Inhalt bis zum Livegang.

FAQ

Welche Farben passen zusammen auf einer Website?

Farben, die verschiedene Aufgaben haben und sich im Kontrast klar unterscheiden: eine Grundfarbe, eine sehr dunkle Textfarbe, ein heller Hintergrund und eine Akzentfarbe, die als Knopf und als Link lesbar bleibt. Ob sie nach Farbkreis harmonieren, ist zweitrangig gegenüber der Frage, ob Text darauf lesbar ist.

Wie viele Farben sollte eine Website haben?

So wenige, dass jede eine Aufgabe hat. Grundfarbe, Text, Hintergrund und Akzent reichen für die meisten Seiten, dazu kommen Rot, Grün und Gelb für Fehler, Erfolg und Hinweise. Alles Weitere sind Abstufungen dieser Farben.

Wie prüfe ich, ob meine Website Farben barrierefrei sind?

Jedes Paar aus Text- und Hintergrundfarbe durch einen Kontrastrechner schicken. Nach WCAG 2.1 braucht normaler Text ein Verhältnis von mindestens 4,5:1, grosser Text und Bedienelemente mindestens 3:1. Dazu darf Farbe nie die einzige Information sein.

Wie finde ich die Farben einer bestehenden Website heraus?

Mit den Entwicklerwerkzeugen des Browsers, die für jedes Element den verwendeten Farbwert anzeigen, oder mit der Pipette eines Bildprogramms auf einem Bildschirmfoto. Der Hex-Wert daraus ist der Wert, mit dem du weiterarbeitest.

Welche Bedeutung haben Farben auf einer Website?

Die Bedeutung kommt aus dem Umfeld, nicht aus der Farbe selbst. Rot heisst im Formular Fehler und beim Metzger Frische. Sieh dir an, was in deiner Branche üblich ist, und entscheide dann, ob du dazugehören oder dich absetzen willst.

Themen: Website erstellen, Website Farben, Design, Barrierefreiheit

Quellen

Weiterlesen

Zur Themenseite

Beschreib dein Produkt - den Rest übernimmt Melta.

Ein Konzept kostet nur wenige Credits. Gebaut, online gestellt und betrieben wird es, sobald du es freigibst.

Frühzugang sichern