Ratgeber · Algorithmen & Praxis
Farbpaletten-Algorithmen: Komplementär, Triade, Analog, Monochrom, Split, Tetradisch
Sechs Schemata, sechs Wege durch den Farbkreis. Wer die HSL-Winkel hinter Komplementär, Triade, Analog, Monochrom, Split-Komplementär und Tetradisch verstanden hat, generiert Paletten gezielt statt zufällig.
Wenn du den Generator auf farbpalette-generieren.de öffnest und dich für ein Schema entscheidest, läuft im Hintergrund nicht Magie, sondern HSL-Mathematik. Jedes der sechs Schemata ist ein definierter Sprung im Farbkreis, jedes folgt einem Muster, das Johannes Itten 1961 in der Bauhaus-Tradition systematisch aufgeschrieben hat. Dieser Ratgeber zeigt dir die sechs Algorithmen mit ihren Winkeln, ihren typischen Anwendungsfeldern und konkreten Outputs für eine Basisfarbe Rose Hue 350 Grad.
Der HSL-Farbkreis als Bühne
Bevor wir in die Schemata einsteigen, ein kurzer Blick auf die Bühne: HSL steht für Hue, Saturation, Lightness. Der Hue-Wert läuft von 0 bis 360 Grad und beschreibt eine Position auf einem Kreis. Bei 0 Grad steht Rot, bei 60 Grad Gelb, bei 120 Grad Grün, bei 180 Grad Cyan, bei 240 Grad Blau, bei 300 Grad Magenta. Saturation und Lightness sind in den klassischen Schemata oft konstant. Variiert wird primär der Hue. Genau diese Bühne nutzen alle sechs Algorithmen, jeder mit einem eigenen Sprung-Pattern.
Die HSL-Notation ist nicht physikalisch korrekt im Sinne eines wahrnehmungslinearen Farbraums, was du im Ratgeber zu CIE-Farbräumen nachlesen kannst. Für klassische Farbharmonie reicht sie aber, weil die Schema-Sprünge ohnehin grobgeometrisch sind. Tailwind v4 wechselt für die Farbskalen mittlerweile auf OKLCH, die Schema-Logik bleibt aber dieselbe: Winkel-Sprünge auf einem Kreis.
Komplementär: 180 Grad Versatz
Der Komplementär-Algorithmus ist der einfachste. Du nimmst die Basisfarbe mit Hue H und generierst eine zweite Farbe mit Hue (H + 180) modulo 360. Aus Rose Hue 350 wird also Hue 170, ein helles Türkis. Das Ergebnis ist der maximal mögliche Kontrast auf dem Farbkreis, weil Komplementärfarben sich gegenseitig verstärken. Itten beschreibt diesen Effekt im Kapitel zum Komplementär-Kontrast als die kraftvollste Wirkungsart der Farbgegensätze.
Anwendung: Komplementär-Schemata eignen sich für Plakate, Sport-Branding, Spielzeug, kurz alles, was Aufmerksamkeit erzeugen soll. Im UI-Design wirkt purer Komplementärkontrast oft zu schreiend, weshalb Marketing-Seiten häufiger zu Split-Komplementär greifen. Klassisches Beispiel ist die Coca-Cola-Werbung mit Rot und Grün um die Weihnachtszeit, beide Töne stehen sich etwa diametral gegenüber.
Triade: drei Farben im 120-Grad-Abstand
Bei der Triade generierst du aus der Basis H die Farben H, (H + 120) modulo 360 und (H + 240) modulo 360. Aus Rose Hue 350 werden also Hue 110 (frisches Grün) und Hue 230 (kühles Blau-Violett). Drei Pole, gleichmäßig auf dem Kreis verteilt, das Ergebnis wirkt lebendig und ausbalanciert.
Triadische Paletten werden klassisch im Print-Design verwendet, etwa für Magazin-Layouts mit drei Themenfarben oder bei Kinder-Marken (Rot, Gelb, Blau als Lego-Triade). Im UI-Design sind Triaden gut geeignet, wenn drei semantische Kategorien gleichberechtigt visualisiert werden sollen.
Analog: zwei benachbarte Töne im Plus-Minus-30-Grad-Korridor
Das analoge Schema generiert Töne in der direkten Nachbarschaft der Basisfarbe, typischerweise im Korridor (H - 30, H, H + 30). Aus Rose Hue 350 entstehen Hue 320 (Pink-Magenta) und Hue 20 (Warm-Rot). Drei Töne im engen Spektralbereich, dadurch ruhig und harmonisch.
Analoge Paletten dominieren in der Natur: Sonnenuntergänge laufen durch das analoge Spektrum Gelb-Orange-Rot, ein Wald variiert Grüntöne von 90 bis 150 Grad. Wer in der Wahrnehmung Natürlichkeit erzeugen möchte, greift zu analogen Schemata. Risiko: bei zu enger Hue-Wahl wird die Palette monoton, dann hilft eine deutliche Lightness-Spreizung.
Monochrom: ein Hue, variable Lightness
Monochrome Paletten halten den Hue konstant und variieren nur Saturation und Lightness. Aus Rose mit Hue 350, Saturation 89, Lightness 60 entstehen Varianten von Lightness 95 (Pastell-Rose) bis Lightness 15 (Bordeaux). Das ist exakt das Prinzip hinter Tailwind-Skalen wie rose-50 bis rose-950: gleicher Hue, gestaffelte Helligkeit.
Anwendung: monochrome Skalen sind die Standardbasis für Design-Systeme. Sie bilden die Strukturfarben (Hintergrund, Text, Border, Hover) und werden dann durch eine einzelne Akzentfarbe ergänzt. Stripe, Linear, Vercel und Notion arbeiten alle nach diesem Muster. Pure Monochromie ohne Akzent wirkt elegant, aber schnell langweilig, weshalb meist eine zweite Skala (Neutral plus Brand) kombiniert wird.
Split-Komplementär: 150 Grad und 210 Grad Versatz
Split-Komplementär nimmt statt des einen Gegenpunkts bei 180 Grad die beiden Töne 30 Grad links und rechts davon, also Versatz 150 und 210. Aus Rose Hue 350 ergeben sich Hue 140 (Mintgrün) und Hue 200 (Hellblau). Drei Farben insgesamt: die Basis plus die beiden Split-Töne.
Das Ergebnis ist ein leiserer Komplementär-Effekt, mit dem die meisten Marketing-Seiten und UIs besser umgehen können als mit hartem 180-Grad-Kontrast. Itten ordnet Split-Komplementär systematisch zwischen Komplementär und Triade ein, weil es Eigenschaften beider Schemata kombiniert.
Tetradisch: vier Farben im Rechteck
Das tetradische Schema spannt ein Rechteck im Farbkreis auf, üblicherweise mit den Winkeln 60, 120, 60, 120 zwischen den Eckpunkten. Aus Rose Hue 350 werden so Hue 50 (Gelb-Orange), Hue 170 (Türkis) und Hue 230 (Indigo). Vier Farben, zwei komplementäre Paare.
Schwierigkeit: Mit vier gleich gewichteten Farben sind Layouts überfordert. Die Praxis-Regel lautet 60-30-10: eine dominante Farbe trägt 60 Prozent der Fläche, eine zweite 30 Prozent, die beiden anderen je 5 Prozent als Akzent. Tetradische Paletten sind die Wahl, wenn vier Datenkategorien optisch gleichberechtigt unterschieden werden müssen, etwa in einer Vier-Quadranten-BCG-Matrix oder einem Vier-Status-Dashboard.
Übersichts-Tabelle
| Schema | Hue-Offsets relativ zur Basis | Anzahl Farben | Typische Anwendung |
|---|---|---|---|
| Komplementär | 0°, 180° | 2 | Plakat, Sport, Werbung |
| Triade | 0°, 120°, 240° | 3 | Magazin, Kinder-Brand, 3-Status |
| Analog | -30°, 0°, +30° | 3 | Mood, Natur, ruhige Brand |
| Monochrom | 0° (Lightness variabel) | 5 bis 9 | Design-System, Struktur |
| Split-Komplementär | 0°, 150°, 210° | 3 | UI-Marketing, Web-Branding |
| Tetradisch | 0°, 60°, 180°, 240° | 4 | 4-Quadranten-Datenviz, Mood-Vier |
Beispiel-Output für Rose-Basis
Basisfarbe Rose Hex #f43f5e, HSL 350° / 89% / 60%. Die sechs Algorithmen liefern:
| Schema | Hex-Outputs |
|---|---|
| Komplementär | #f43f5e, #3ff4d6 |
| Triade | #f43f5e, #5ef43f, #3f5ef4 |
| Analog | #f43fa5, #f43f5e, #f4853f |
| Monochrom | #fce7eb, #f9a8b6, #f43f5e, #9f1239, #4c0519 |
| Split-Komplementär | #f43f5e, #3ff48d, #3f95f4 |
| Tetradisch | #f43f5e, #d4f43f, #3fd6f4, #5e3ff4 |
Die Werte sind das Resultat der reinen HSL-Mathematik. In der Praxis ziehst du eine oder zwei Lightness-Stufen pro Farbe, damit du Hover-States, Border-Töne und Pastell-Hintergründe hast.
Wann welches Schema sinnvoll ist
Die Wahl folgt der Botschaft des Designs. Soll Aufmerksamkeit erzeugt werden, lohnt der Komplementär-Kontrast oder die Triade. Soll Eleganz und Marken-Klarheit dominieren, sind Monochrom und Analog die Werkzeuge. Wer drei oder vier funktionale Kategorien differenzieren muss, greift zur Triade oder Tetrade. Für klassisches Web-Branding mit zwei Akzenten ist Split-Komplementär der pragmatische Standard.
Wichtig: die Algorithmen liefern Ausgangsmaterial, keine fertige Palette. Nach der Schema-Wahl folgen typischerweise drei Polishing-Schritte: Lightness-Spreizung pro Farbton (für Hover, Border, Background), Kontrast-Check gegen WCAG 4,5 zu 1 (siehe Ratgeber zu WCAG und BFSG) und gegebenenfalls Anpassung an den Markenfarbton, der oft nicht exakt auf einem Algorithmus-Punkt liegt.
Itten als Quelle
Wer tiefer einsteigen möchte: das Standardwerk ist Johannes Itten, Kunst der Farbe, Bauhaus-Verlag 1961, mit den sieben Farbkontrasten und dem zwölfteiligen Farbkreis. Die sechs hier beschriebenen Schemata sind eine moderne Vereinfachung dieses Systems, abgestimmt auf die HSL-Notation, die digitale Tools standardmäßig nutzen. Munsell hat 1905 mit seinem dreidimensionalen System eine wissenschaftlichere Basis gelegt, mehr dazu im Ratgeber zur Geschichte der Farbtheorie.
Verhältnis von Schema und Marken-Identität
Eine häufige Verwechslung: Markenfarben sind nicht das Ergebnis eines Algorithmus, sondern eine strategische Entscheidung. Der Algorithmus liefert harmonische Begleitfarben zu einer bereits gewählten Marken-Basisfarbe. Coca-Cola hat sich vor langer Zeit auf Rot festgelegt, Facebook auf ein bestimmtes Blau, Spotify auf Grün. Diese Basisfarben sind über Jahrzehnte gewachsen, oft mit kulturellen oder historischen Wurzeln. Was die Algorithmen leisten, ist die Generierung passender Sekundär- und Akzent-Farben, die die Marken-Basis konsistent erweitern. Wer eine neue Marke aufbaut, wählt zuerst die emotionale Stimmung (warm und vertrauensvoll, technisch und kühl, frisch und jugendlich) und dann eine Basisfarbe, die diese Stimmung trifft. Erst danach kommen die Algorithmen ins Spiel, um die vollständige Palette zu konstruieren. Diese Reihenfolge wird häufig übersehen, mit dem Ergebnis, dass Generator-Output direkt als Brand übernommen wird, ohne die Markenstrategie bewusst zu definieren.
Saturation und Lightness als zweite Stellschraube
Die sechs Schemata variieren primär den Hue. In der Praxis kommt zur Hue-Wahl aber fast immer eine zweite Stellschraube hinzu: Saturation und Lightness. Eine reine 100-Prozent-gesättigte Triade wirkt grell und ist für UI selten geeignet. Designer reduzieren deshalb die Saturation typischerweise auf 60 bis 80 Prozent und staffeln die Lightness, um Pastell-Hintergründe (Lightness 90 bis 95), neutrale Mittelpunkte (Lightness 50 bis 60), Akzent-Töne (Lightness 35 bis 50) und tiefe Kontrast-Töne (Lightness 15 bis 25) zu erzeugen. Aus jeder Schema-Farbe entstehen dadurch fünf bis sieben Varianten, die in einem Design-System als Token verwendet werden. Tailwind verfolgt dieses Muster mit den Skalen 50 bis 950 in elf Stufen pro Hue, abgestimmt so, dass benachbarte Stufen einen Kontrast von mindestens 1,2 zu 1 ergeben und Sprünge wie 100 zu 600 typischerweise WCAG-AA-tauglich sind.
Schemata in der historischen Praxis
Ein kurzer Blick auf historische Designs zeigt die sechs Schemata in Aktion. Die Werbeplakate der Russischen Avantgarde der 1920er-Jahre (El Lissitzky, Alexander Rodtschenko) nutzen primär Komplementär-Kontraste in Rot und Schwarz mit hohem Weißanteil, um maximale visuelle Kraft zu erzeugen. Das Bauhaus-Logo selbst, von Oskar Schlemmer entworfen, bleibt monochrom in Schwarz auf Weiß, weil die formale Klarheit dominieren sollte. Die Verpackungen der Pop-Art-Ära (Andy Warhols Campbell-Soup-Dosen) nutzen Triaden aus Rot, Weiß und Gold. Skandinavisches Design der Mitte des 20. Jahrhunderts (Marimekko, Arne Jacobsen) setzte oft auf analoge Paletten aus Naturtönen. In der frühen Web-Ära der späten 1990er-Jahre dominierten brutale Komplementär-Kontraste mit Neon-Tönen, die heute als visuelle Belastung gelten. Die aktuelle UI-Generation (Stripe, Linear, Vercel) bevorzugt monochrome Skalen mit zurückhaltenden Akzentfarben, was als ruhige Marken-Eleganz gelesen wird.
Worauf es bei der Schema-Wahl ankommt
Schema-Wahl ist Zweck-Wahl. Komplementär für Knall, Monochrom für Markenruhe, Analog für Natürlichkeit, Triade und Tetrade für funktionale Differenzierung. Der Generator auf farbpalette-generieren.de zeigt dir alle sechs parallel, du entscheidest, welcher zu deinem Use-Case passt. Die HSL-Mathematik liefert das Ausgangsmaterial, das letzte Polish gehört dir.
Wenn dir ein Fehler auffällt oder eine Quelle veraltet ist, schreib an info@akara-solutions.de, bestätigte Korrekturen dokumentieren wir auf /korrekturen/.
FAQ
Häufige Fragen
Was ist der Unterschied zwischen Komplementär und Split-Komplementär?
Komplementär nimmt die Basisfarbe plus den exakt gegenüberliegenden Punkt auf dem Farbkreis, also einen Hue-Versatz von 180 Grad. Split-Komplementär ersetzt diesen einzelnen Gegenpunkt durch die beiden Töne 30 Grad links und rechts davon, also 150 und 210 Grad Versatz zur Basis. Das Ergebnis ist softer als der harte Komplementär-Kontrast, behält aber den Gegen-Effekt. Itten beschreibt das im Kapitel zum Komplementär-Kontrast in Kunst der Farbe von 1961 als Übergang zum Drei-Klang. In der Praxis nutzen Designer Split-Komplementär häufig für Webseiten, weil die zweite Akzentfarbe sich nicht so aggressiv von der ersten unterscheidet.
Wann macht ein analoges Schema mehr Sinn als ein triadisches?
Analoge Paletten wirken ruhig und natürlich, weil die Töne im Plus-Minus-30-Grad-Korridor um die Basisfarbe liegen und so im Spektrum nah beieinander stehen. Sie eignen sich für Mood-Boards, beruhigende Hintergründe oder Brand-Welten, die nicht durch Kontrast leben sollen. Triadisches Schema mit 120 Grad Abstand erzeugt dagegen drei klar getrennte Pole und ist die Wahl für lebendige UI mit drei gleichberechtigten Akzenten, etwa bei Dashboards mit drei Statuskategorien. Faustregel: Analog für Atmosphäre, Triade für funktionale Differenzierung.
Wie funktioniert eine monochrome Palette technisch?
Bei einer monochromen Palette bleibt der Hue-Wert der Basisfarbe konstant, variiert wird nur die Lightness (oder zusätzlich die Saturation). Aus Rose 350 Grad bei 60 Prozent Lightness werden so fünf bis sieben Varianten, etwa von Lightness 95 (fast Weiß) bis Lightness 15 (sehr dunkel). Tailwind v4 generiert seine Farbskalen 50 bis 950 nach diesem Prinzip im OKLCH-Raum. Vorteil: maximale Markenkonsistenz, weil alles als ein Farbton wahrgenommen wird. Nachteil: keine Akzentfarbe vorhanden, deshalb meist mit einer neutralen Skala (Slate, Gray) kombiniert.
Was bedeutet tetradisch und warum ist es schwer zu nutzen?
Tetradisch beschreibt vier Farben im Rechteck auf dem Farbkreis, üblicherweise mit Abständen von 60, 120, 60 und 120 Grad. Es entstehen zwei komplementäre Paare gleichzeitig. Itten nennt das den Vier-Klang. Die Schwierigkeit: Vier gleich gewichtete Farben überfordern viele Designs schnell. Die übliche Praxis-Empfehlung lautet, eine der vier Farben als dominant zu setzen (etwa 60 Prozent Flächenanteil), eine als zweite Hauptfarbe (30 Prozent) und die anderen beiden nur sparsam als Akzent. Tetradische Paletten funktionieren oft gut bei datenreichen Visualisierungen mit vier Kategorien.
Welcher Algorithmus passt für ein SaaS-Dashboard?
Für funktionale SaaS-UIs empfehlen sich monochrome Hauptpalette plus ein Akzent, also eine Slate- oder Stone-Skala für Strukturfarben plus eine Markenfarbe für Calls-to-Action. Wer drei Statusarten differenzieren muss (Erfolg, Warnung, Fehler), greift zusätzlich auf semantische Farben aus dem triadischen Bereich zurück: typisch Grün, Gelb, Rot in jeweils zwei bis drei Lightness-Stufen. Komplementär-Schemata wirken in Dashboards meist zu plakativ. Tetradisch oder split-komplementär sind eher die Wahl für Marketing-Seiten und Mood-Boards. Stripe und Linear demonstrieren das Monochrom-plus-Akzent-Prinzip exemplarisch.
Quellen