# Tetradisches Farbschema: vier Farben im Gleichgewicht [Canonical HTML page](https://gradiently.design/de/guide/tetradic-colors) Vier Farben sind die reichste klassische Harmonie und die am leichtesten misslungene. Das Geheimnis liegt nicht in der Wahl der Farbtöne, die ist reine Arithmetik, sondern darin, welche Farbe das Sagen hat. ## The short version - Ein tetradisches Farbschema nutzt vier Farbtöne, die als zwei Komplementärpaare auf dem Farbkreis liegen. - Beim Rechteck liegen zwei Farbtöne 60 Grad auseinander, dazu ihre beiden Gegenüber; beim Quadrat sind alle vier Farbtöne 90 Grad voneinander entfernt. - Tetradische Paletten sind reich und abwechslungsreich, aber schwer auszubalancieren, weil vier Farbtöne um Aufmerksamkeit konkurrieren. - Das Schema funktioniert, wenn eine Farbe dominiert, eine zweite unterstützt und die übrigen beiden als kleine Akzente dienen. - Wenn du einige der vier Farbtöne abdämpfst oder abdunkelst, wirkt eine tetradische Palette edel statt laut. Ein **tetradisches Farbschema** besteht aus vier Farbtönen, die auf dem Farbkreis zwei Komplementärpaare bilden. Verbindest du sie mit Linien, entsteht ein Rechteck oder ein Quadrat, deshalb heißen die beiden Varianten Rechteck- und Quadratschema. Weil es warme und kühle Farben auf beiden Seiten des Kreises enthält, ist die tetradische Palette die vollste der klassischen Harmonien. Sie wirkt aber auch am ehesten chaotisch, es sei denn, eine Farbe führt und die anderen drei bleiben an ihrem Platz. ## Rechteck- und Quadratschemata Beide Varianten beginnen mit einem Grundfarbton und seiner Komplementärfarbe, 180 Grad entfernt. Sie unterscheiden sich darin, wo das zweite Paar sitzt. | Variante | Farbtöne ab Grundfarbe | Charakter | | --- | --- | --- | | Rechteck, oder doppelt komplementär | 0, 60, 180 und 240 Grad | Zwei nahe Nachbarn und ihre Gegenüber; leichter auszubalancieren | | Quadrat | 0, 90, 180 und 270 Grad | Vollkommen gleichmäßige Abstände; am abwechslungsreichsten und am kräftigsten | Rechteckschemata haben auf jeder Seite ein natürliches Paar von Verbündeten, weshalb Designer meist damit anfangen. - Kobalt: #1b3c7e - Amethyst: #9d59c0 - Ringelblume: #f0b642 - Farn: #7dba5e Ein Rechteckschema: Kobalt und Amethyst, 60 Grad auseinander, gegenüber Ringelblume und Farn. - Tiefviolett: #452277 - Korallrot: #e25a66 - Limettenblatt: #95c059 - Meerestürkis: #2e9e95 Ein Quadratschema: vier Farbtöne im Abstand von 90 Grad, das Violett vertieft, damit es als Grund dienen kann. ## So baust du ein tetradisches Farbschema 1. **Wähle den Grundfarbton** Nimm die Farbe, auf der deine Marke oder dein Design beruht. Notiere ihren Farbton in Grad; jeder Farbwähler mit HSL-Anzeige nennt ihn dir. 2. **Ergänze die Komplementärfarbe** Addiere 180 Grad. Dieses Paar ist das Rückgrat des Schemas. Warum Gegenüber so gut funktionieren, erklärt [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors). 3. **Entscheide dich für Rechteck oder Quadrat** Für ein Rechteck addierst du 60 Grad zur Grundfarbe und zur Komplementärfarbe. Für ein Quadrat addierst du jeweils 90 Grad. 4. **Gib jeder Farbe eine Aufgabe** Eine dominiert, eine unterstützt, zwei sind Akzente. Schreib es auf, damit die Rollen in jedem Design gleich bleiben. 5. **Stimme Helligkeit und Sättigung ab** Dunkle die dominante Farbe ab, mildere die unterstützende und lass die Akzente am hellsten. Der Farbton legt die Harmonie fest, die Helligkeit die Hierarchie. ```css :root { --h: 220; /* base hue */ /* Rectangle scheme */ --c1: hsl(var(--h) 65% 30%); --c2: hsl(calc(var(--h) + 60) 45% 55%); --c3: hsl(calc(var(--h) + 180) 85% 60%); --c4: hsl(calc(var(--h) + 240) 40% 55%); /* For a square scheme use +90, +180 and +270 instead */ } ``` Die Rechteckpalette von oben, aus einer einzigen Zahl erzeugt. Der HSL-Farbton läuft von selbst über 360 hinaus, du musst also nie etwas abziehen. ## Warum vier Farben schwer auszubalancieren sind Bei zwei Farben ist Kontrast einfach. Bei vier kräftigen Farbtönen weiß das Auge nicht, wohin es zuerst schauen soll, und jede Farbe scheint die anderen zu überschreien. Die meisten misslungenen tetradischen Designs scheitern daran, dass alle vier Farben ungefähr gleich viel Fläche und gleich viel Sättigung bekommen. Die Lösung ist Hierarchie, nicht weniger Farben. Hochformat-Eventpost für ein offenes Atelierwochenende mit einer dominanten Hintergrundfarbe und kleinen Akzenten Eine Farbe führt den Hintergrund, die anderen tauchen an kleinen Stellen auf: lebendiger Inhalt, ruhiges Design. Hochformat-Listenpost derselben Serie, angeführt von einer zweiten Farbe des Vier-Farben-Schemas Ein Begleitpost, in dem eine zweite Farbe des Sets die Führung übernimmt, sodass die Serie verwandt wirkt, ohne sich zu wiederholen. Dieses zweite Bild zeigt die eigentliche Stärke des Schemas. Vier Farben bieten genug Vielfalt für eine ganze Serie: Jeder Post kann von einer anderen Farbe der Palette angeführt werden, und das Set gehört trotzdem erkennbar zusammen. Ideal für Karussells, Speisekarten und Veranstaltungsprogramme, wo [Markenkonsistenz](https://gradiently.design/de/guide/brand-consistency) zählt, Gleichförmigkeit aber langweilt. ## Wo ein tetradisches Farbschema am besten funktioniert Vier Farbtöne lohnen sich, wenn ein Projekt mehrere Dinge klar trennen muss, ohne jedes Mal neue Farben zu erfinden. Ein einzelnes Plakat braucht das selten. Ein System meistens schon. - **Kategorien kodieren:** eine Café-Karte mit Getränken, Frühstück, Mittagessen und Kuchen, jeweils in eigener Farbe. - **Veranstaltungsprogramme:** vier Bühnen, Tracks oder Tage, die Besucher auf einen Blick unterscheiden müssen. - **Diagramme und Dashboards:** vier Datenreihen, die unterscheidbar bleiben müssen, am besten auch [auf Farbenblindheit geprüft](https://gradiently.design/de/guide/color-blindness-design). - **Kinder- und Spielmarken:** wo die volle, leuchtende Version der Palette genau der Punkt ist. - **Saisonkampagnen:** ein Farbton führt jedes Quartal des Jahres, die anderen unterstützen. Für die Proportionen beginnst du mit der [60-30-10-Regel](https://gradiently.design/de/guide/60-30-10-rule) und teilst die letzten zehn Prozent auf die beiden Akzente auf. Auf einer Speisekarte füllt etwa die dominante Farbe die Seite, die unterstützende kennzeichnet Überschriften, und die beiden Akzente markieren vegetarische und neue Gerichte. ## So wirkt eine tetradische Palette edel Tetradische Paletten in voller Sättigung sehen aus wie eine Spielzeugkiste, perfekt für ein Spielwarengeschäft und falsch für die meisten anderen. Zieh zwei oder drei der Farben Richtung Grau oder Richtung Dunkel, und dieselben Farbtöne wirken durchdacht und erwachsen. - Schieferblau: #24324c - Heidekraut: #a085ad - Weizen: #dfc590 - Salbei: #85a375 - Leinen: #f6f2ea Das Kobalt-Rechteckschema abgedämpft: dieselben Farbtöne, jetzt leise genug für ein Hotel, eine Buchhandlung oder eine Hochzeit. - Kobalt zu Amethyst: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)` - Ringelblume zu Farn: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)` - Heidekraut auf Schieferblau: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)` Verlaufe im Rechteckschema jeweils innerhalb eines 60-Grad-Paars. Ein Verlauf zu einem Gegenüber geht durch Grau; siehe [schmutzige Verläufe](https://gradiently.design/de/guide/muddy-gradients). ### Vermeiden - Vier Farbtöne mit gleicher Fläche und gleicher Helligkeit - Text in einem leuchtenden Farbton auf einem anderen - Ein Verlauf durch alle vier Farben - Einen fünften Farbton zur Rettung der Balance ergänzen ### Besser so - Eine dominante Farbe, etwa 60 Prozent der Fläche - Ein Neutralton für Text und Weißraum - Zwei Farbtöne abgedämpft, zwei heller gelassen - Die Leitfarbe über eine Serie hinweg wechseln Wenn vier Farben zu viele sind, geh einen Schritt zurück zu drei mit [triadischen Farben](https://gradiently.design/de/guide/triadic-colors) oder [geteilten Komplementärfarben](https://gradiently.design/de/guide/split-complementary-colors). Beide behalten starken Kontrast bei einem Farbton weniger. Probiere die Palette dann an echten Designs aus: In Gradiently erscheinen Farben, die du in einem Markenkit speicherst (ein Pro-Feature), in jedem Farbwähler im Studio zuerst, sodass jeder Post einer Serie eine andere Leitfarbe bekommen kann. ## FAQ ### Was ist ein tetradisches Farbschema? Eine Palette aus vier Farbtönen, die zwei Komplementärpaare auf dem Farbkreis bilden und ein Rechteck oder ein Quadrat ergeben. ### Was ist der Unterschied zwischen Rechteck- und Quadratschema? Ein Rechteckschema nutzt Farbtöne bei 0, 60, 180 und 240 Grad; ein Quadratschema verteilt sie gleichmäßig im Abstand von 90 Grad. Rechtecke lassen sich meist leichter ausbalancieren. ### Ist tetradisch dasselbe wie doppelt komplementär? Das tetradische Rechteckschema heißt oft doppelt komplementär, weil es zwei Komplementärpaare sind, die dicht beieinander liegen. ### Was ist ein Beispiel für ein tetradisches Farbschema? Kobalt `#1B3C7E`, Amethyst `#9D59C0`, Ringelblume `#F0B642` und Farn `#7DBA5E` bilden ein Rechteckschema: Kobalt und Amethyst liegen 60 Grad auseinander, gegenüber Ringelblume und Farn. ### Wie balanciert man eine Vier-Farben-Palette? Lass eine Farbe dominieren, gib einer eine unterstützende Rolle und halte die anderen beiden als kleine Akzente. Dämpfe oder verdunkle einige Farbtöne und ergänze einen Neutralton für Text.