Farbpaletten-Generator

So verwenden Sie den Farbpaletten-Generator

1. Basisfarbe festlegen – wählen Sie sie im Farbfeld, tippen Sie einen HEX-Code ein oder drücken Sie Mischen für einen zufälligen Startpunkt.
2. Harmonie wählen – analog für Ruhe, komplementär für starken Kontrast, triadisch oder tetradisch für Vielfalt, monochromatisch für ein Schema aus einem einzigen Farbton, oder Automatisch zum Ausprobieren.
3. Sperren & mischen – klicken Sie auf das Schloss der Felder, die Sie behalten möchten, und drücken Sie dann Leertaste oder Mischen, um nur den Rest neu zu berechnen.
4. Kopieren oder exportieren – klicken Sie ein Feld an, um seinen HEX-Code zu kopieren, holen Sie sich Aufhellungen & Abdunklungen für Varianten, oder exportieren Sie die ganze Palette als CSS-Variablen, JSON oder Hex-Liste.

Farbharmonien erklärt

Was Sie damit bauen können

• Ein Website- oder App-Design – eine Hauptfarbe, ein paar Akzente und neutrale Aufhellungen und Abdunklungen für Flächen und Rahmen.
• Ein Marken-Farbsystem – sperren Sie Ihre Markenfarbe und finden Sie dazu passende Zweitfarben.
• Folien & Infografiken – ein abgestimmter Satz gut unterscheidbarer Farben für Diagramme und Abschnitte.
• Design-Tokens – als JSON oder CSS-Variablen direkt in Ihren Code oder Ihr Designsystem exportieren.
• Illustration & Kunst – Harmonien schnell durchspielen, bevor Sie sich für ein Schema entscheiden.

Eine kurze Geschichte des Farbkreises

Jede Harmonie in diesem Generator geht auf eine einzige Idee zurück: dass man Farben in einem Kreis anordnen kann, sodass ihre Beziehungen sichtbar werden. Die Idee ist jünger, als man denkt. 1704 veröffentlichte Isaac Newton Opticks. Darin bog er das gerade Band des Spektrums zu einem geschlossenen Ring – dem ersten echten Farbkreis. Newton wollte nicht schmücken, er wollte ein Modell bauen. Er setzte die Farbtöne in ungleichen Abständen an, in Anlehnung an die Intervalle einer Tonleiter, und zeigte, dass man die Farbe einer Mischung vorhersagen kann, indem man den „Schwerpunkt“ der beteiligten Strahlen auf dem Kreis sucht. Die Enden des Spektrums zu verbinden hieß, zwischen Rot und Violett die Purpur- und Magentatöne einzufügen, die keine einzelne Wellenlänge haben – jener Teil des Kreises, den die Physik allein nicht hergibt.

Ein Jahrhundert später, 1810, veröffentlichte Goethe Zur Farbenlehre – im Englischen als Theory of Colours bekannt. Goethe interessierten Wellenlängen weniger als das, was das Auge tatsächlich tut. Er beobachtete, dass Farben, die einander „diametral entgegengesetzt“ sind, sich im Auge gegenseitig hervorrufen – eine frühe Beschreibung von Nachbildern und Gegenfarben, die Ewald Hering später genau fasste. Sein symmetrischer Farbkreis und die Arbeit von Künstler-Naturforschern wie Moses Harris im 18. Jahrhundert führten spätere Kreise zu gleichen Abständen und zu jenem vertrauten Aufbau, den Künstlerinnen und Künstler bis heute nutzen.

Zwei Menschen machten aus diesen Kreisen Systeme, die man unterrichten kann. Am Bauhaus, wo er von 1919 bis 1922 den berühmten Vorkurs gab, baute Johannes Itten einen Farbkreis mit zwölf Farbtönen und beschrieb sieben Arten von Farbkontrast – darunter den Farbe-an-sich-Kontrast, den Hell-Dunkel-Kontrast, den Kalt-Warm-Kontrast, den Komplementärkontrast, den Qualitätskontrast und den Quantitätskontrast. Diese Gedanken fasste er später in Kunst der Farbe zusammen. Unabhängig davon begann der amerikanische Maler Albert H. Munsell 1898 mit seiner Arbeit und veröffentlichte 1905 A Color Notation. Er gab der Farbe drei unabhängige, messbare Achsen: Farbton (die Farbfamilie), Helligkeitswert (von Schwarz bis Weiß) und Buntheit (die Intensität). Munsell trennte diese Größen als Erster so, dass sie dazu passten, wie Menschen Unterschiede wirklich sehen, und nicht dazu, wie sich Pigmente mischen – der gedankliche Vorfahr moderner Wahrnehmungsräume wie CIELAB und OKLCH.

Farbharmonien und die Mathematik dahinter

Dieses Werkzeug rechnet in HSL. Dort ist jede Farbe nur drei Zahlen: ein Farbton, gemessen als Winkel von 0° bis 360° rund um den Kreis, eine Sättigung und eine Helligkeit. Weil der Farbton ein Winkel ist, wird aus den klassischen Harmonien einfaches Rechnen. Für die Komplementärfarbe addieren Sie 180°; für eine Triade addieren Sie 120° und 240°; für das Quadrat gehen Sie in vier Sprüngen zu je 90° einmal herum. Der Generator dreht nur den Farbton und lässt Sättigung und Helligkeit weitgehend unverändert. Genau deshalb wirken die Ergebnisse wie eine Familie: Die Farben sitzen in bewusst gewählten Winkeln auf demselben Kreis und teilen eine gemeinsame Helligkeit und Leuchtkraft, statt fünf zusammenhanglose Griffe zu sein.

Warum wirken gerade diese Winkel „harmonisch“? Dafür gibt es zwei Gründe. Gleichmäßig verteilte Farbtöne (analog, triadisch, Quadrat) teilen den Kreis in gleich große Bögen, sodass keine Farbe das Gleichgewicht beherrscht – das Auge sieht eine geordnete Gruppe statt eines Durcheinanders. Gegenüberliegende Farbtöne (komplementär und das sanftere Split-komplementär bei 150° und 210°) bringen den größtmöglichen Kontrast im Farbton, und genau das lässt einen Akzent vor seinem Hintergrund hervorspringen. Analoge Schemata liegen dagegen nur rund ±30° von der Basis entfernt und machen das Gegenteil: Sie bleiben auf dem Kreis so nah beieinander, dass sie fast immer dieselbe Temperatur teilen und ruhig und einheitlich wirken.

Ein ehrlicher Hinweis zur Geometrie: Weil dies ein additiver Kreis für Bildschirme (RGB/HSL) ist, ist das „Gegenteil“ einer Farbe ihre Lichtkomplementärfarbe. Das Gegenstück zu Rot ist hier Cyan und nicht das Grün, das Sie auf einem klassischen Rot-Gelb-Blau-Kreis für Farbmischung bekommen. Keiner von beiden ist „falsch“ – sie beantworten verschiedene Fragen (Licht mischen gegenüber Pigment mischen). Es erklärt aber, warum ein komplementäres Paar aus einem Bildschirm-Werkzeug etwas anders aussehen kann als das Paar in einem alten Künstlerhandbuch. HSL ist außerdem nicht wahrnehmungsgleich: Ein Gelb und ein Blau mit derselben Zahl für die Helligkeit wirken nicht gleich hell. Das ist der wichtigste Grund, warum selbst eine rechnerisch perfekte Palette am Ende ein menschliches Auge zum Ausgleichen braucht.

Aufhellungen, Abdunklungen und Trübungen

Eine Harmonie wählt Ihre Farbtöne; Aufhellungen, Abdunklungen und Trübungen geben Ihnen die helleren, dunkleren und weicheren Varianten jeder einzelnen Farbe – und die brauchen Sie viel öfter als neue Farbtöne. In der Malerei ist der Unterschied genau festgelegt: Eine Aufhellung mischt eine Farbe mit Weiß, eine Abdunklung mischt sie mit Schwarz, und eine Trübung mischt sie mit Grau. In den HSL-Zahlen, mit denen dieser Generator arbeitet, halten Aufhellungen und Abdunklungen Farbton und Sättigung fest und verschieben nur die Helligkeit nach oben oder unten, während eine Trübung die Helligkeit behält und die Sättigung Richtung Grau zieht.

Dafür ist der Streifen mit Aufhellungen und Abdunklungen über den häufigen Fragen da. Eine echte Oberfläche besteht selten aus fünf flachen Farben – sie besteht aus einem oder zwei Farbtönen, die als ganze Leiter von Helligkeitsstufen auftreten: eine fast weiße Aufhellung für den Hintergrund, ein etwas dunklerer Rahmen, ein mittlerer Ton für den Fließtext und eine tiefe Abdunklung für Überschriften oder gedrückte Schaltflächen. Designsysteme halten genau das fest. Googles Material Design und Tailwind CSS liefern jede Farbe als nummerierte Leiter (etwa 50–900, hell bis dunkel), erzeugt aus einem einzigen Ausgangsfarbton. So greifen Designerinnen und Designer zu „blue 100“ oder „blue 700“, statt neu zu wählen. Bauen Sie Ihre Palette genauso auf, dann haben Sie genug Farbe, um ein Projekt zu beenden – nicht nur, um eines zu beginnen.

Die 60-30-10-Regel und eine brauchbare Palette

Ein häufiger Anfängerfehler ist, jeder Farbe einer Palette gleich viel Platz zu geben. Harmonie hat genauso viel mit dem Verhältnis zu tun wie mit der Auswahl, und die haltbarste Faustregel kommt aus der Innenarchitektur: die 60-30-10-Regel. Geben Sie rund 60 % eines Layouts einer Hauptfarbe (meist ein Neutralton oder eine ruhige Aufhellung – Hintergründe und große Flächen), rund 30 % einer Zweitfarbe, die sie stützt und Tiefe gibt, und etwa 10 % einem kräftigen Akzent, den Sie für die Dinge aufheben, die wirklich angeklickt werden sollen: Schaltflächen, Links, Hervorhebungen. Die genauen Zahlen sind nicht heilig, die Rangfolge schon – eine Hauptfarbe, eine Stützfarbe und ein kleiner Funke.

Das lässt sich sauber auf die Farben übertragen, die dieses Werkzeug erzeugt. Nehmen Sie Ihr ruhigstes oder neutralstes Feld als Hintergrund mit 60 %, einen mittleren Harmoniepartner als Zweitfarbe mit 30 % und Ihre gesättigtste Farbe als Akzent mit 10 %. Die Leiter aus Aufhellungen und Abdunklungen füllt dann alles dazwischen – den Hover-Zustand der Schaltfläche, den zarten Rahmen, das Grau für deaktivierten Text. Ein praktischer Ablauf: Sperren Sie Ihre Ankerfarbe (eine Markenfarbe oder einfach die, die Ihnen gefällt), mischen Sie so lange, bis die stützenden Farbtöne stimmen, und bauen Sie dann Helligkeitsleitern aus den zwei oder drei Farben, die Sie behalten. Am Ende nutzen Sie fast immer weniger Farbtöne und mehr Helligkeitsstufen, als Sie erwartet haben.

Warm, kalt und die Rolle der Neutraltöne

Der Farbkreis teilt sich grob in eine warme Hälfte (Rot, Orange, Gelb) und eine kalte Hälfte (Grün, Blau, Violett). Warme Farben kommen nach vorn und wirken energiegeladen; kalte Farben treten zurück und wirken ruhig. Auch deshalb wirken analoge Paletten so stimmig – wer innerhalb von ±30° bleibt, bleibt meist auf einer Seite der Grenze – und deshalb kann ein einzelner, gut gewählter Gegenakzent ein sonst kaltes Design lebendig machen.

Die Farbe, die eine Palette am häufigsten rettet, ist die, die kaum eine Farbe ist: ein Neutralton. Weiß, gebrochenes Weiß, Grau, Beige und Fast-Schwarz sind das Bindegewebe fast jedes professionellen Schemas. Sie geben den gesättigten Farbtönen einen Platz zum Ausruhen, tragen den größten Teil Ihres Textes und verhindern, dass eine bunte Palette anstrengend wird. Ein nützlicher Kniff ist, reines #000000 und #FFFFFF zu meiden: Nehmen Sie stattdessen Ihre Hauptfarbe und schieben Sie sie für Hintergründe auf eine sehr hohe und für Text auf eine sehr niedrige Helligkeit. Der zarte gemeinsame Unterton lässt die Neutraltöne wirken, als gehörten sie zur Palette, statt aus einer anderen geliehen zu sein – und genau das schenkt Ihnen der Streifen mit Aufhellungen und Abdunklungen.

Hält die Farbpsychologie stand?

Sie haben sicher gelesen, dass Blau für Vertrauen „steht“, Grün für Natur und Rot für Gefahr. Nehmen Sie solche Aussagen mit Vorsicht. Die ehrliche Zusammenfassung der Forschung lautet: Verbindungen zwischen Farbe und Gefühl sind echt, hängen aber stark von Kultur und Zusammenhang ab, und ein großer Teil der beliebten Ratschläge ist übertrieben. Die Bedeutungen gelten nicht überall: Studien über mehrere Kulturen hinweg finden Rot in etlichen Ländern mit Wut verknüpft, doch andere Verbindungen gehen deutlich auseinander – in einer Studie verbanden nur polnische Teilnehmende Violett mit Wut und Eifersucht, während deutsche Teilnehmende Eifersucht mit Gelb verbanden. Farbsymbolik, die in einer Kultur selbstverständlich wirkt (etwa Weiß für Hochzeiten), kann in einer anderen das Gegenteil bedeuten.

Einige Wirkungen sind besser belegt als andere. Es gibt ordentliche Hinweise darauf, dass langwelliges Rot die Erregung steigern und Aufmerksamkeit ziehen kann und dass blaues Licht beruhigt – Befunde, die stabil genug sind, dass einige Städte mit blauer Straßenbeleuchtung experimentiert haben. Das weitere Feld ist jedoch weiche Wissenschaft: Klassische Ergebnisse wie Goldsteins Versuche zu Farbe und Bewegung aus den 1940er-Jahren ließen sich wiederholt nicht bestätigen, und „Farbtherapie“ gilt weithin als Pseudowissenschaft. Die praktische Lehre daraus ist bescheiden und verlässlich: Nutzen Sie Farbverbindungen als erste Vermutung über Ihr Publikum, halten Sie sie innerhalb Ihres eigenen Produkts einheitlich, damit sie durch Wiederholung Bedeutung aufbauen, und prüfen Sie, statt zu vertrauen. Wiedererkennbarkeit der Marke, Kontrast und Einheitlichkeit verändern das Verhalten weit zuverlässiger als jede behauptete angeborene „Bedeutung“ eines Farbtons.

Barrierefreiheit: Harmonie allein genügt nicht

Eine Palette kann vollkommen harmonisch und trotzdem unlesbar sein. Harmonie beschreibt, wie Farbtöne zueinander stehen; Barrierefreiheit beschreibt, ob ein Mensch zwei benachbarte Farben überhaupt auseinanderhalten kann – und beides ist voneinander unabhängig. Der maßgebliche Standard ist das Kontrastverhältnis aus den Web Content Accessibility Guidelines (WCAG 2): Für die Stufe AA braucht Text in normaler Größe mindestens 4,5:1 Kontrast zu seinem Hintergrund, großer Text (etwa 18 pt oder 14 pt fett) mindestens 3:1. Zwei wunderschön komplementäre mittlere Töne, als Text auf Hintergrund gesetzt, scheitern daran häufig; ein ruhiges monochromatisches Schema scheitert oft ebenfalls, weil die Helligkeitswerte zu dicht beieinanderliegen.

Prüfen Sie also, statt zu vermuten. Legen Sie zuerst die Rollen der Farben fest – welches Feld ist Hintergrund, welches trägt Text, welches ist ein Akzent zum Anklicken – und prüfen Sie dann jedes Paar aus Text und Hintergrund gegen die Schwelle von 4,5:1 (oder 3:1) mit unserem WCAG-Kontrast-Prüfer. Zwei weitere Gewohnheiten zählen: Verlassen Sie sich nie allein auf den Farbton, um eine Bedeutung zu tragen – farbenblinde Nutzerinnen und Nutzer sehen den Unterschied zwischen Ihrem „Erfolgsgrün“ und Ihrem „Fehlerrot“ womöglich nicht, ergänzen Sie die Farbe also um ein Symbol, eine Beschriftung oder ein Muster. Und denken Sie daran, dass das Verhältnis aus WCAG 2 eine Formel für Bildschirmlicht ist und kein perfektes Modell der Wahrnehmung – neuere Ansätze wie APCA wollen die echte Lesbarkeit genauer vorhersagen, doch WCAG 2 bleibt die derzeitige Grundlage für Barrierefreiheit.

Häufige Fehler bei Paletten

Die meisten Paletten, die in der Praxis scheitern, scheitern aus denselben wenigen Gründen. Achten Sie auf diese Punkte:

• Zu viele konkurrierende Farbtöne. Fünf voll gesättigte, zusammenhanglose Farben wirken wie Lärm. Die meisten starken Paletten stützen sich auf einen oder zwei Farbtöne und Neutraltöne und holen ihre Vielfalt aus den Helligkeitsstufen, nicht aus zusätzlichen Farbtönen.
• Kein Neutralton, kein Anker. Ohne eine bestimmende Hintergrundfarbe und einen ruhigen Neutralton zum Ausruhen wirkt selbst eine lehrbuchmäßig perfekte Harmonie hektisch. Geben Sie Ihren Akzenten einen Platz zum Sitzen.
• Gleiche Gewichtung. Jede Farbe etwa gleich viel einzusetzen nimmt die Rangfolge heraus – nichts führt das Auge. Nutzen Sie die 60-30-10-Aufteilung, damit eine Farbe bestimmt und der Akzent selten bleibt.
• Kontrast und Barrierefreiheit übergehen. Farben zu wählen, die als Felder nebeneinander gut aussehen, und erst später zu merken, dass der Text darauf unlesbar ist. Prüfen Sie Textpaare gegen WCAG, bevor Sie sich festlegen.
• Den Zahlen mehr vertrauen als dem Auge. Weil HSL nicht wahrnehmungsgleich ist, sehen gleiche Zahlenschritte nicht gleich aus. Betrachten Sie die fertige Palette immer auf einem echten Bildschirm, hell und dunkel, und rücken Sie von Hand nach.
• Überall volle Sättigung. Durchweg knallige Paletten flirren und ermüden das Auge. Nehmen Sie die Sättigung bei den stützenden Farben zurück und heben Sie die volle Intensität für den Akzent auf.

Zum Schluss noch etwas Einordnung: Dieser Generator steht in einer langen Reihe von Paletten-Werkzeugen – von Adobe Color (früher Kuler) und Fabrizio Bianchis Coolors bis zu den Farbleitern in Material Design und Tailwind. Sie alle ruhen auf demselben, hundert Jahre alten Farbkreis. Das Werkzeug liefert Ihnen in einer Sekunde einen harmonischen, rechnerisch soliden Ausgangspunkt – doch das Urteil über Verhältnis, Neutraltöne, Kontrast und Zusammenhang bleibt Ihres, und genau dort lebt gute Farbarbeit.

Häufig gestellte Fragen