Eine gute Website-Palette ist mehr als fünf schöne Farben. Jede Farbe hat eine Aufgabe: Die Primärfarbe trägt die Marke, der Akzent zeigt, wo es weitergeht, Hintergrund und Text sorgen dafür, dass man lesen kann. Erst wenn diese Rollen klar sind, wirkt eine Seite ruhig und führt zum Ziel.
Die sechs Harmonien
- Komplementär: Ihre Farbe und ihr Gegenüber im Farbkreis. Starker Kontrast, gut für einen auffälligen Akzent.
- Analog: Nachbarn im Abstand von 30 Grad. Ruhig und zusammenhängend, braucht für Knöpfe oft einen dunkleren Ton.
- Triadisch: drei Töne im Abstand von 120 Grad. Lebendig, verlangt eine klare Hauptfarbe.
- Split-Komplementär: statt der Gegenfarbe ihre beiden Nachbarn. Kontrast mit weniger Spannung.
- Tetradisch: zwei Gegenfarbpaare. Viel Spielraum für Kategorien und Diagramme, schnell zu bunt.
- Monochrom: ein Farbton in mehreren Helligkeiten. Elegant und nahezu fehlerfrei.
Warum gleiche Helligkeit wichtig ist
Viele Generatoren drehen den Farbton im HSL-Modell. Dort sind Gelb und Blau mit „50 Prozent Helligkeit“ für das Auge völlig verschieden hell: Aus einem kräftigen Rot werden dann ein grelles Neongrün und ein tiefes Blau. Unser Generator rechnet im Farbraum OKLab von Björn Ottosson, den auch CSS Color 4 verwendet. Dort sehen gleiche Helligkeitswerte gleich hell aus. Wo ein Farbton bei dieser Helligkeit nicht kräftig sein kann, etwa ein dunkles Gelb, rückt der Generator die Helligkeit nur so weit wie nötig und sagt es Ihnen.
Abstufungen von 50 bis 950
Für Flächen, Rahmen und Zustände wie „darüber fahren“ brauchen Sie hellere und dunklere Varianten jeder Farbe. Der Generator erzeugt elf Stufen wie in Tailwind CSS. Ihre eingegebene Farbe steht dabei unverändert auf der Stufe, die ihrer Helligkeit entspricht. So bleibt Ihre Markenfarbe exakt, und die Skala passt trotzdem zu anderen Paletten.
Kontrast und Barrierefreiheit
Text muss sich vom Hintergrund genug abheben. Die WCAG 2.2 verlangen 4,5 : 1 für normalen Text und 3 : 1 für große Schrift und Bedienelemente. Seit dem 28. Juni 2025 gilt in Deutschland zudem das Barrierefreiheitsstärkungsgesetz für viele Online-Shops und digitale Dienstleistungen. Was das für Ihr Unternehmen bedeutet, erklärt unser Ratgeber zum Barrierefreiheitsgesetz. Einzelne Farbpaare prüfen Sie genauer im Kontrastrechner.
Markenfarben aus der eigenen Website
Sie haben schon eine Website und wollen wissen, welche Farben sie wirklich nutzt? Der Website-Farben-Extraktor liest sie aus. Die wichtigste übernehmen Sie hier als Primärfarbe und bauen daraus ein sauberes System.
Häufige Fragen
Wie erstelle ich eine Farbpalette für meine Website?
Beginnen Sie mit Ihrer Markenfarbe als Primärfarbe. Wählen Sie eine Harmonie, die zur Wirkung passt: analog für Ruhe, komplementär für starke Akzente, triadisch für Lebendigkeit. Ergänzen Sie neutrale Töne für Hintergrund, Text und Rahmen und prüfen Sie jedes Paar, das Text trägt, auf mindestens 4,5 : 1 Kontrast. Der Generator erledigt alle Schritte in einem Zug und liefert die Werte als CSS, Tailwind oder Design Tokens.
Wie viele Farben braucht eine Website?
Meist reichen eine Primärfarbe, eine Sekundärfarbe, ein Akzent und neutrale Töne für Hintergrund, Text und Rahmen. Mehr Farben machen Seiten unruhig und schwerer zu pflegen. Abstufungen von 50 bis 950 je Farbe geben Ihnen trotzdem genug Spielraum für Flächen, Rahmen und Zustände wie Hover.
Was ist die 60-30-10-Regel?
Eine Faustregel aus der Gestaltung: etwa 60 Prozent der Fläche in einer ruhigen Grundfarbe (Hintergrund und Neutraltöne), 30 Prozent in Primär- und Sekundärfarbe, 10 Prozent im Akzent. So bleibt klar, was wichtig ist. Der Akzent wirkt nur, wenn er selten vorkommt.
Warum rechnet der Generator in OKLCH und nicht in HSL?
In HSL haben Farben mit gleicher „Helligkeit“ sehr unterschiedliche wahrgenommene Helligkeit: Gelb wirkt fast weiß, Blau fast dunkel. Eine im HSL-Farbkreis gedrehte Palette wirkt deshalb oft grell und unausgewogen. OKLCH ist so gebaut, dass gleiche Zahlen gleich hell aussehen. Harmonien, Abstufungen und Kontraste werden dadurch vorhersagbar. Moderne Browser verstehen oklch() direkt.
Welcher Kontrast ist für Text vorgeschrieben?
Die WCAG 2.2 verlangen für normalen Text mindestens 4,5 : 1 (Stufe AA), für große Schrift ab 24 Pixel oder 18,66 Pixel fett mindestens 3 : 1. Für Rahmen, Symbole und Bedienelemente gelten 3 : 1. Stufe AAA verlangt 7 : 1. Der Generator prüft die Paare, die auf einer Website wirklich vorkommen, und rundet dabei nie auf.
Gilt das Barrierefreiheitsgesetz für meine Website?
Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen, darunter Online-Shops und andere Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen. Ausreichender Farbkontrast gehört zu den Anforderungen. Im Zweifel lassen Sie Ihren Einzelfall prüfen.