Split-Komplementärfarben: Kontrast mit weniger Reibung

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 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. 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. 2

   Sein Komplement finden

   Addiere 180 Grad. Teals Komplement ist ein Korallrot bei etwa 355 Grad.

3. 3

   30 Grad beiderseits gehen

   Gehe 30 Grad in jede Richtung vom Komplement: etwa 325 Grad (Pink) und 25 Grad (Orange).

4. 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.

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 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.

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.

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 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.

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.

: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%);
}

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.