# Zweifarbiges Design: kühne Looks mit nur zwei Farben

[Canonical HTML page](https://gradiently.design/de/guide/two-tone-design)

Zwei gut gewählte Farben können eine ganze Marke tragen: Plakate, Speisekarten, Posts und Fotos. So wählst du das Paar, holst mehr Spielraum heraus und verhinderst, dass es flach wirkt.

## The short version

- Zweifarbiges Design baut jedes Element aus zwei Farben, meist einer dunklen und einer hellen, ohne dritte Farbe außer Tönen der beiden.
- Das Paar braucht einen klaren Helligkeitsunterschied, damit Text und Formen lesbar bleiben, welche Farbe auch obenauf liegt.
- Aufhellungen und Abdunklungen der beiden Farben geben einer zweifarbigen Palette genug Spielraum für Hintergründe, Flächen und Nebentext.
- Duotone-Fotos legen die Schatten eines Bildes auf die dunkle und die Lichter auf die helle Farbe, sodass Fotografie zu einem zweifarbigen Layout passt.
- Zweifarbige Layouts fallen in vollen Feeds auf, weil sie gewollt aussehen, und sie lassen sich günstig als zwei Sonderfarben drucken.

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

| Begriff | Was er bedeutet | Typischer Einsatz |
| --- | --- | --- |
| Zweifarbig | Ein ganzes Design aus zwei unterschiedlichen Farben | Plakate, Speisekarten, Verpackungen, Markensysteme |
| Duotone | Ein Foto, auf zwei Farben umgelegt, Schatten auf die eine, Lichter auf die andere | Fotografie innerhalb eines zweifarbigen Layouts |
| Monochrom | Nur Töne und Abdunklungen eines Farbtons | Ruhige Marken in einer Farbe |
| Zweifarbiger Verlauf | Zwei Farben, weich ineinander übergehend | Hintergründe und Hero-Bereiche |

Zweifarbig hält die Farben getrennt, ein Verlauf mischt sie. Beides kann in einer Marke leben.

Willst du die Mischung statt der Teilung, behandelt [Zweifarbige Verläufe](https://gradiently.design/de/guide/two-color-gradients) diese Seite, und [Monochromatische Farbschemata](https://gradiently.design/de/guide/monochromatic-color-scheme) 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.

- Kobalt und Mandarine: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Wald und Blush: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Tinte und Butter: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Kleinblau und Papier: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Rennwagengrün und Senf: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Aubergine und Limette: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Plakatrot und Creme: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Tiefes Petrol und Pfirsich: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Schokolade und Himmel: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Ochsenblut und Blassrosa: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Schwarz und Warngelb: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Tiefes Violett und Flieder: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Zwölf Paare, diagonal geteilt. Bei jedem lässt sich tauschen, welche Farbe der Grund ist, was deine Layouts verdoppelt.

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](https://gradiently.design/de/guide/complementary-colors) erklärt, warum Gegensätze summen, wenn sie sich treffen.

## So wählst du deine zwei Farben

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

- Kobalt: #172e70
- Kobalt 75: #516294
- Kobalt 40: #a2abc6
- Mandarine 10: #fdf0e6
- Mandarine 55: #ffb780
- Mandarine: #ff7a1a

Ein Paar, sechs Töne. Die 10 % Mandarine ergeben einen warmen Papiergrund, und die 40 % Kobalt eignen sich für Nebentext auf dunklen Flächen.

- **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](https://gradiently.design/de/guide/duotone-effect) geht tiefer; im Web gelingt es mit Mischmodi.

```css
.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;
}
```

Ein Duotone in Kobalt und Mandarine. Das Bild wird grau, wird auf den hellen Ton multipliziert, dann hebt der dunkle Ton die Schatten auf Kobalt.

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

Ein Hochformat-Post, in zwei Farbblöcke geteilt, mit Freitags lange geöffnet auf einer Seite

Ein geteiltes Layout: Eine Farbe hält die Worte, die andere die Stimmung.

Ein minimaler Hochformat-Post mit dem Text Frühlingsmenü in dunkler Farbe auf hellem Grund

Ein minimales Layout, bei dem die helle Farbe der Grund ist und die dunkle die ganze Schrift übernimmt.

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

### Vermeiden

- Zwei Farben ähnlicher Helligkeit
- Für einen Button heimlich eine dritte Farbe einschmuggeln
- Unbehandelte Farbfotos einfügen
- Helle Schrift auf der hellen Farbe

### Besser

- Eine klar dunkel, eine klar hell
- Stattdessen Aufhellungen und Abdunklungen des Paars
- Jedes Foto in den zwei Farben als Duotone
- Kontrast in beide Richtungen prüfen

Den Kontrast in beide Richtungen misst du mit den Werkzeugen aus [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility). Wenn dir die Disziplin zweier Farben gefällt, zieht sich dasselbe Denken durch [Minimalistisches Grafikdesign](https://gradiently.design/de/guide/minimalist-design-ideas) und, in voller Lautstärke, durch [Kühnes Grafikdesign](https://gradiently.design/de/guide/bold-design-ideas).

## FAQ

### Was ist zweifarbiges Design?

Ein Design, das komplett aus zwei Farben gebaut ist, meist einer dunklen und einer hellen, wobei Töne dieser beiden erlaubt sind, aber keine dritte Farbe.

### Welche zwei Farben passen gut zusammen für ein Design?

Jedes Paar mit klarem Helligkeitsunterschied, etwa Kobalt und Mandarine, Wald und Blush oder Tinte und Butter. Die dunklere sollte auf der helleren lesbar sein.

### Was ist der Unterschied zwischen zweifarbig und Duotone?

Zweifarbig beschreibt ein ganzes Layout aus zwei Farben. Duotone beschreibt ein Foto, das so umgelegt ist, dass seine Schatten und Lichter zu zwei Farben werden.

### Wie erstelle ich ein Duotone-Bild in CSS?

Mach das Bild graustufig, mische es mit `mix-blend-mode: multiply` auf die helle Farbe und lege dann die dunkle Farbe mit `mix-blend-mode: lighten` darüber.

### Ist Zweifarbdruck günstiger?

Bei Siebdruck und Offset-Sonderfarbdruck bedeuten weniger Farben meist weniger Siebe oder Platten, Zweifarbaufträge sind also in der Regel günstiger als Vierfarbdruck.