Zweifarbiges Design: kühne Looks mit nur zwei Farben

Zweifarbiges Design bedeutet, alles aus nur zwei Farben zu bauen: Schrift, Formen, Hintergründe und sogar Fotos, meist eine dunkle und eine helle mit starkem Helligkeitsunterschied. Kobalt und Mandarine, Wald und Blush, Tinte und Butter. Die Begrenzung ist der Punkt. Zwei Farben wirken gewollt, lesen sich in jeder Größe klar und geben einer Marke schneller eine wiedererkennbare Handschrift als eine volle Palette.

Zweifarbig, Duotone und Monochrom sind nicht dasselbe

Die Begriffe werden lose verwendet, deshalb hilft es, sie zu trennen. Sie überschneiden sich, und viele gute Layouts nutzen alle drei Ideen zugleich.

Willst du die Mischung statt der Teilung, behandelt Zweifarbige Verläufe diese Seite, und Monochromatische Farbschemata die Variante mit einem Farbton.

Zwölf zweifarbige Farbpaletten

Bei jedem Paar unten ist eine Farbe dunkel genug, um Text auf die andere zu setzen. Der Kontrast zwischen Farbtönen zählt weniger als der zwischen Helligkeiten: Ein Paar kann warm und kühl sein oder zwei Nachbarn, solange eine deutlich dunkler ist.

Manche davon sind Komplementärfarben, etwa Kobalt und Mandarine, was maximale Energie gibt. Andere sind enge Verwandte, etwa tiefes Violett und Flieder, was ruhiger und hochwertiger wirkt. Komplementärfarben erklärt, warum Gegensätze summen, wenn sie sich treffen.

So wählst du deine zwei Farben

1. 1

   Zuerst die dunkle Farbe wählen

   Sie trägt jede Überschrift und jeden Absatz, sie muss also auf der hellen Farbe lesbar sein. Marineblau, Wald, Aubergine, Schokolade und fast Schwarz funktionieren alle.

2. 2

   Die helle Farbe nach Stimmung wählen

   Das ist die Farbe, an die man sich erinnert. Warme Helltöne wie Pfirsich und Butter wirken freundlich; kühle wie Himmel und Flieder wirken ruhiger.

3. 3

   Den Kontrast in beide Richtungen prüfen

   Dunkler Text auf der hellen Farbe sollte für Fließtext 4,5:1 erreichen. Jedes Paar im Raster oben besteht diesen Test.

4. 4

   An drei Formaten ausprobieren

   Ein quadratischer Post, eine Story in 1080×1920 und ein A5-Flyer. Wenn sich das Paar in allen dreien noch nach dir anfühlt, behalte es.

So holst du mehr Spielraum aus zwei Farben

Zwei flache Farben können dünn wirken, sobald du eine Nebenfläche, eine Bildunterschrift oder einen deaktivierten Button brauchst. Die Lösung ist keine dritte Farbe. Mische Aufhellungen der hellen Farbe und Abdunklungen der dunklen, sodass jeder neue Ton weiter zum Paar gehört.

• Grund: die hellste Aufhellung, für große Flächen und Textseiten.
• Haupt: die dunkle Farbe, für Überschriften, Fließtext und feste Blöcke.
• Pointe: die helle Farbe in voller Stärke, für eine Form, ein Wort oder einen Preis.
• Mitteltöne: je eine mittlere Aufhellung, für Trennlinien, Bildunterschriften und Illustrationsflächen.

Zweifarbige Fotos mit Duotone

Bei Fotos brechen zweifarbige Layouts meist: Ein Farbbild bringt eine dritte, vierte und fünfte Farbe in die Seite. Eine Duotone-Behandlung legt das Foto so um, dass seine Schatten zu deiner dunklen und seine Lichter zu deiner hellen Farbe werden. Der Duotone-Effekt geht tiefer; im Web gelingt es mit Mischmodi.

.duotone {
  position: relative;
  background-color: #ff7a1a; /* light tone: the highlights */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(100%) contrast(1.15);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #172e70; /* dark tone: the shadows */
  mix-blend-mode: lighten;
  pointer-events: none;
}

In Gradiently kannst du jedes Foto in den Farben des Marks einfärben, als Mono, Duotone oder Schleier, damit Bilder zum Design gehören, statt mit ihm zu kämpfen.

Ideen für zweifarbiges Design zum Ausprobieren

• Konzert- und Eventplakate: Zwei Sonderfarben drucken günstig und sehen von der anderen Straßenseite gewollt aus.
• Speisekarten: eine dunkle Farbe für die Gerichte, die helle für das Papier, ein mittlerer Ton für Preise.
• Instagram-Karussells: Wechsle auf jeder Folie, welche Farbe der Grund ist, damit das Wischen rhythmisch wirkt.
• Verpackung: eine Farbe pro Produktlinie, die andere im ganzen Sortiment gleich.
• Präsentationen: Abschnittsfolien in der dunklen Farbe, Inhaltsfolien auf der hellen Aufhellung.
• Visitenkarten: auf jeder Seite eine Farbe.

Den Kontrast in beide Richtungen misst du mit den Werkzeugen aus Farbkontrast und Barrierefreiheit. Wenn dir die Disziplin zweier Farben gefällt, zieht sich dasselbe Denken durch Minimalistisches Grafikdesign und, in voller Lautstärke, durch Kühnes Grafikdesign.