# Split-Komplementärfarben: Kontrast mit weniger Reibung

[Canonical HTML page](https://gradiently.design/de/guide/split-complementary-colors)

Ein komplementäres Paar ist laut und schwer auszubalancieren. Teilst du den Gegenpol in zwei, behältst du fast den ganzen Kontrast, während die Farben aufhören zu streiten. So funktioniert es, mit Paletten zum Kopieren.

## The short version

- Split-Komplementärfarben sind eine Basisfarbe plus die zwei Farben, die im Farbkreis beiderseits ihrer Komplementärfarbe liegen.
- Auf einem Farbkreis mit 360 Grad liegen die beiden Partner etwa 150 und 210 Grad von der Basis entfernt, etwa 30 Grad beiderseits ihres genauen Gegenpols.
- Das Schema behält starken Kontrast, wirkt aber weniger gegensätzlich als ein reines Komplementärpaar, weil keine zwei Farben genau gegenüberliegen.
- Es funktioniert am besten, wenn die Basisfarbe dominiert und die beiden Split-Farben als kleinere Akzente dienen.
- Farbkreise der Maler und Bildschirm-Farbkreise legen Komplemente unterschiedlich fest, deshalb kann dieselbe Basis leicht unterschiedliche Split-Paletten ergeben.

**Split-Komplementärfarben** sind drei Farben: eine Basis plus die zwei Farben beiderseits des Komplements der Basis. Statt Blau mit seinem direkten Gegenpol Orange zu paaren, paarst du Blau mit Rotorange und Gelborange. Du behältst den Kontrast von warm gegen kühl, der komplementäre Schemata lebendig macht, aber weil nichts genau gegenüber von etwas anderem liegt, ist das Ergebnis angenehmer fürs Auge und in einem echten Design viel leichter auszubalancieren.

## So funktionieren Split-Komplementärfarben

Stell dir den [Farbkreis](https://gradiently.design/de/guide/color-wheel) als Uhr vor. Deine Basisfarbe steht bei zwölf. Ihr Komplement steht bei sechs. Ein Split-Komplementärschema überspringt die Sechs und nimmt stattdessen Fünf und Sieben. In Grad bedeutet das Farbtöne, die etwa 150 und 210 Grad von der Basis entfernt liegen.

1. **Einen Basisfarbton wählen** Beginne mit der Farbe, um die es in deinem Design wirklich geht: die Markenfarbe, das Produkt, die Stimmung. Sagen wir Teal, bei einem Farbton von 175 Grad.
2. **Sein Komplement finden** Addiere 180 Grad. Teals Komplement ist ein Korallrot bei etwa 355 Grad.
3. **30 Grad beiderseits gehen** Gehe 30 Grad in jede Richtung vom Komplement: etwa 325 Grad (Pink) und 25 Grad (Orange).
4. **Helligkeit und Sättigung anpassen** Die Farbtöne bestimmen das Schema, aber du wählst, wie hell, tief oder gedämpft jeder ist. Dort beginnt die Palette, nach dir auszusehen.

- Teal-Basis: #188b81
- Orchideenrosa: #e052a5
- Aprikose: #f58a3d
- Tiefes Teal: #173633
- Warmes Papier: #f6f0ea

Das durchgerechnete Beispiel: Teal mit Rosa und Aprikose, dazu ein dunkleres Teal und ein Neutralton für Text und Raum.

## Warum Split-Komplementär weniger kollidiert

Genaue Gegenpole wie Rot und Cyan oder Blau und Orange konkurrieren mit gleicher Stärke um Aufmerksamkeit. Nebeneinander in voller Sättigung können sie zu flimmern scheinen, und gemischt werden sie grau. [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors) sind aus diesem Grund kraftvoll, lassen aber wenig Spielraum für Fehler.

In einem Split-Schema liegen die beiden Partner 60 Grad voneinander entfernt, was sie zu engen Verwandten macht. Sie unterstützen sich, statt zu streiten, und balancieren gemeinsam die Basis. Du bekommst Kontrast mit einem natürlichen Verbündeten auf der warmen oder der kühlen Seite, je nachdem, wo du beginnst.

| Schema | Farben | Kontrast | Leichtigkeit der Balance |
| --- | --- | --- | --- |
| Komplementär | 2, genau gegenüber | Am höchsten | Schwer |
| Split-Komplementär | 3, Basis plus zwei nahe Gegenpole | Hoch | Mittel |
| [Triadisch](https://gradiently.design/de/guide/triadic-colors) | 3, gleichmäßig im Abstand von 120 Grad | Hoch | Mittel bis schwer |
| [Analog](https://gradiently.design/de/guide/analogous-colors) | 3, nebeneinander | Niedrig | Leicht |

Split-Komplementär liegt zwischen der Ruhe des Analogen und dem Drama des Komplementären.

## Beispiele für Split-Komplementär-Paletten

Fünf Paletten, gebaut mit den Schritten oben. Die erste Farbe jeder Zeile ist die Basis; die anderen beiden sind ihre Split-Partner. Helligkeit und Sättigung wurden so abgestimmt, dass jedes Set für echte Arbeit taugt, nicht nur theoretisch korrekt ist.

| Basis | Basis-Hex | Split-Partner | Wirkt wie |
| --- | --- | --- | --- |
| Teal | `#188b81` | `#e052a5` Orchidee, `#f58a3d` Aprikose | Tropisch, modern, lebendig |
| Violett | `#6629a3` | `#f5e63d` Zitrone, `#3fa648` Blatt | Verspielt, kreativ, mutig |
| Kobaltblau | `#1b4f98` | `#e45e44` Zinnober, `#f5d63d` Sonnenblume | Selbstbewusst, sportlich, klassisch |
| Karmesin | `#c32230` | `#318160` Jade, `#2970a3` Cölinblau | Festlich, geerdet, reich |
| Tannengrün | `#2a6f41` | `#ab5eba` Orchidee, `#e4677c` Rose | Botanisch, romantisch, frisch |

Kopiere die Codes direkt in dein Werkzeug. Nutze die Basis für den größten Teil der Fläche.

- Teal-Schema: die zwei Partner: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Kobalt-Schema: die zwei Partner: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Teal-Basis als Grund: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Kobalt-Basis als Grund: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

Die beiden Split-Partner sind Nachbarn, deshalb mischen sie sich sauber ineinander. Die Basis direkt in einen Partner zu mischen kreuzt den Farbkreis und wird trüb, behalte die Basis also als eigenen Grund.

## So nutzt du ein Split-Komplementärschema im Design

Drei gleich laute Farben lassen ein Design wie eine Flagge aussehen. Gib ihnen stattdessen ungleiche Aufgaben. Die [60-30-10-Regel](https://gradiently.design/de/guide/60-30-10-rule) ist ein guter Ausgangspunkt: Die Basis deckt den größten Teil der Fläche, ein Partner übernimmt eine unterstützende Rolle, und der andere erscheint nur dort, wo das Auge zuerst hinsehen soll.

Dämpfen ist dein zweiter Hebel. Dunkle oder vergraue die Basis, bis sie sich fast wie ein Neutralton verhält, und die beiden Partner wirken plötzlich gewollt statt laut. So wirken Split-Schemata am Ende raffiniert: Ein tiefes Teal, ein staubiges Rosa und ein weiches Aprikose nutzen dieselben Farbtöne wie die leuchtende Version, wirken aber wie ein Boutique-Hotel statt wie ein Wasserball.

Ein Sommerkarten-Post im Hochformat auf tiefem Teal mit Rosa- und Aprikosenakzenten

Ein tiefer Teal-Grund leistet die meiste Arbeit; Rosa und Aprikose bleiben für die Worte und ein Highlight.

### Vermeiden

- Alle drei Farbtöne in voller Sättigung und gleicher Fläche
- Fließtext in einer Partnerfarbe auf der anderen
- Ein einzelner Verlauf von der Basis zum Partner quer durch den Farbkreis
- Einen vierten leuchtenden Farbton obendrauf setzen

### Besser

- Eine dominante Basis, oft vertieft oder gedämpft
- Partner in unterschiedlicher Helligkeit, damit einer führt
- Ein Neutralton für Text und Luft zum Atmen
- Kontrast prüfen, wo immer Worte stehen

## Maler-Farbkreis oder Bildschirm-Farbkreis

Es gibt zwei gängige Farbkreise. Der traditionelle Farbkreis der Maler nutzt Rot, Gelb und Blau als Grundfarben, deshalb ist Rots Gegenpol Grün. Bildschirme nutzen rotes, grünes und blaues Licht, deshalb ist auf einem HSL-Farbkreis Rots Gegenpol Cyan. Beide ergeben gültige Schemata; nutze nur konsequent einen Farbkreis. Wenn du in CSS arbeitest, ist der Bildschirm-Farbkreis das, was `hsl()` nutzt, du kannst ein Schema also mit etwas Rechnen erzeugen.

```css
:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}
```

Ändere `--h`, und das ganze Split-Komplementärschema wandert mit. Mehr zu diesem Modell unter [Farbton, Sättigung und Helligkeit](https://gradiently.design/de/guide/hue-saturation-brightness).

Um eine Palette auf echten Formaten zu sehen, kann der Designer in Gradiently einen Post, eine Story und ein Banner in einem Zug gestalten, sodass du die Proportionen in jeder Größe beurteilen kannst statt auf einer Farbkarte.

## FAQ

### Was sind Split-Komplementärfarben?

Eine Basisfarbe plus die zwei Farben beiderseits ihres Komplements im Farbkreis. Für Blau sind das Rotorange und Gelborange.

### Wie findet man Split-Komplementärfarben?

Finde das Komplement der Basisfarbe, indem du 180 Grad zu ihrem Farbton addierst, und nimm dann die Farbtöne etwa 30 Grad beiderseits davon.

### Ist Split-Komplementär besser als Komplementär?

Es ist leichter auszubalancieren. Du behältst den größten Teil des Kontrasts, aber die Farben kollidieren weniger, weil keine genau gegenüberliegt.

### Was ist das Split-Komplementär von Rot?

Im Farbkreis der Maler Gelbgrün und Blaugrün. Auf einem HSL-Bildschirm-Farbkreis sind Rots Partner ein Grüncyan und ein Blaucyan, bei etwa 150 und 210 Grad.

### Wie viele Farben hat ein Split-Komplementärschema?

Drei Farbtöne, auch wenn die meisten echten Paletten ein dunkles und ein helles Neutral für Text und Raum hinzufügen.