# Duotone Fotos in deinen Markenfarben: Monochrom, Duoton und Farbhauch

[Canonical HTML page](https://gradiently.design/de/guide/photo-duotone-in-mark-colours)

Unpassende Fotos sind der schnellste Weg, einen Feed geliehen wirken zu lassen. Wenn du sie in deinen eigenen Farben tönst, werden Stockfotos, Smartphone-Bilder und Produktfotos zu einer Familie.

## The short version

- Ein Duotone Foto ersetzt die Töne eines Bildes durch zwei Farben: eine für die Schatten und eine für die Lichter.
- In Gradiently lässt sich jedes Foto als Monochrom, Duoton oder Farbhauch tönen, und Duoton und Farbhauch nehmen ihre Farben aus dem Mark des Designs.
- Wenn Fotos in denselben Farben getönt sind wie der Hintergrund, wirken gemischte Quellen, vom Stockfoto bis zum Smartphone-Bild, wie eine bewusst gewählte Serie.
- Fotos lassen sich außerdem in Licht und Farbe anpassen, mit Filtern wie Film oder Noir abschließen und in Bögen, Kreise und Kleckse zuschneiden.
- Jede Fotoanpassung bleibt bearbeitbar, du kannst also die Tönung ändern oder den Mark später tauschen, und das Foto folgt.

Ein **Duotone Foto** tauscht die natürlichen Farben eines Bildes gegen zwei gewählte: eine dunkle Farbe für die Schatten und eine helle für die Lichter, wobei jeder Ton dazwischen aus dem Paar gemischt wird. In deinen Markenfarben verwandelt es jedes Foto in etwas, das klar zu dir gehört. In Gradiently kannst du ein Foto auf drei Arten tönen, Monochrom, Duoton oder Farbhauch, und Duoton und Farbhauch nehmen ihre Farben direkt aus dem Mark des Designs, sodass Foto und Hintergrund immer übereinstimmen.

## Wie ein Duotone Foto funktioniert

Stell dir das Foto zuerst schwarz-weiß vor. Jeder Pixel hat eine Helligkeit von 0 bis 100 Prozent. Ein Duotone malt dann die dunkelsten Pixel in deiner Schattenfarbe, die hellsten in deiner Lichterfarbe und alles andere an der passenden Stelle des Verlaufs dazwischen. Das Ergebnis behält jedes Detail des Fotos, aber nichts von seiner ursprünglichen Farbe.

- Indigo zu Rosé: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Tiefes Petrol zu Sand: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Ochsenblut zu Butter: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Marineblau zu Eis: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Vier Duotone-Verläufe. Schatten nehmen die Farbe links, Lichter die Farbe rechts, und die Mitteltöne des Fotos landen in der Mitte.

Damit ein Duotone gut statt matschig aussieht, braucht es Kontrast zwischen den beiden Enden. Ein sehr dunkler Schatten und ein sehr helles Licht halten Gesichter und Produkte erkennbar. Zwei Mitteltöne ergeben ein flaches, trübes Bild. Zur Geschichte und zu weiteren Einsatzbereichen des Looks siehe [den Duotone-Effekt](https://gradiently.design/de/guide/duotone-effect).

## Monochrom, Duoton und Farbhauch: drei Arten zu tönen

| Tönung | Was sie macht | Farben aus | Nutze sie für |
| --- | --- | --- | --- |
| **Monochrom** | Macht das Foto schwarz-weiß | Neutrale Grautöne | Porträts, Zitate, alles Ernste oder Zeitlose |
| **Duoton** | Bildet Schatten und Lichter auf zwei Farben ab | Dem Mark | Kräftige Posts, Eventplakate, Teamfotos, die nicht zusammenpassen |
| **Farbhauch** | Legt die Farbe des Marks über das Foto und behält etwas von dessen eigener Farbe | Dem Mark | Produktfotos und Food, bei denen das Motiv echt aussehen soll |
| Ohne | Lässt die Farbe des Fotos unverändert | Dem Foto | Hero-Produktfotos, bei denen genaue Farbe zählt |

Die Tönungsoptionen in der Fotobearbeitung. Duoton und Farbhauch nutzen die Farben deines Marks, ein Tausch des Marks tönt das Foto also neu.

Ein Post im Hochformat mit dem Titel Das ist unser Team und einer Zeile über fünf Leute und eine Espressomaschine, auf einem warmen Verlaufs-Mark

Die Art Post, die ein Duotone rettet: Teamfotos, mit verschiedenen Smartphones aufgenommen, durch die Farben des Marks zu einer Serie verbunden.

Ein Produkt-Post im Hochformat, der eine Herbstkaffeemischung ankündigt, auf demselben Verlaufs-Mark

Ein Produkt-Post: die Art, bei der ein sanfter Farbhauch das Foto mit dem Hintergrund verbindet, der Kaffee aber nach Kaffee aussieht.

## So machst du ein Duotone Foto in Gradiently

1. **Das Foto hinzufügen** Lade dein eigenes hoch oder füg es ein, oder wähle eines aus den kostenlosen Stockfotos im Studio.
2. **Die Fotobearbeitung öffnen** Wähle das Foto aus und öffne sein Bearbeitungspanel, wo Licht, Farbe, Filter und Tönung liegen.
3. **Unter Mark-Farben Duoton wählen** Das Foto wird sofort auf die Palette des Marks abgebildet. Probier auch Farbhauch und Monochrom; der Vergleich kostet nichts.
4. **Den Kontrast einstellen** Erhöhe den Kontrast, wenn das Ergebnis flach wirkt, und die Helligkeit, wenn Gesichter in die Schattenfarbe fallen.
5. **In eine Form zuschneiden** Rahme es als Quadrat, Kreis, Bogen oder Klecks, passend zum Layout.
6. **Zum Testen den Mark tauschen** Ändere den Mark des Designs, und die Tönung folgt, so kannst du mehrere Looks am selben Foto ausprobieren.

> **Alles bleibt bearbeitbar** Tönungen und Filter brennen sich nie ins Foto ein. Du kannst sie jederzeit ändern oder zurücksetzen, und das zählt, wenn eine Kampagne mittendrin die Farbe wechselt.

## Filter, Licht und Farbe für den Feinschliff

Die Tönung legt die Farbfamilie fest; die übrigen Anpassungen entscheiden über das Gefühl. Sie sind in drei Gruppen geordnet, und die Voreinstellungen sind ein schneller Einstieg vor dem Feintuning. Ist das Foto ein Produktbild, bring zuerst den Hintergrund in Ordnung: [Hintergründe für Produktfotos](https://gradiently.design/de/guide/product-photo-backgrounds) erklärt das.

| Gruppe | Regler | Wozu du greifst |
| --- | --- | --- |
| Licht | Helligkeit, Kontrast | Bei jedem Duoton zuerst den Kontrast; er trennt die beiden Farben |
| Farbe | Sättigung, Temperatur, Grün zu Magenta, Farbton | Temperatur, um einen Farbhauch wärmer oder kühler zu machen; bei Duoton die Sättigung lassen |
| Feinschliff | Unschärfe, Vignette | Eine leichte Vignette zieht bei Porträts den Blick nach innen |
| Voreinstellungen | Original, Lebendig, Weich, Warm, Kühl, Verblasst, Noir, Film | Film oder Verblasst unter einem Farbhauch ergibt leicht einen gedruckten Look |

Die Regler der Fotobearbeitung. Starte mit einer Voreinstellung und passe dann Licht vor Farbe an.

## Zuschnittformen: Bögen, Kreise und Kleckse

Ein getöntes Foto in einer weichen Form wirkt gestaltet statt hineingeworfen. Bögen wirken architektonisch und ruhig, schön für Interior, Floristik und Hochzeiten und eine natürliche Wahl für [Branding für Fotografen](https://gradiently.design/de/guide/photographer-branding). Kreise passen zu Menschen: Teamseiten, Speaker, Kundenstimmen. Kleckse sind verspielt und passen zu Food, Kindermarken und allem Lockeren. Bleib bei einer Form pro Design, damit die Serie einheitlich wirkt.

### Vermeiden

- Zwei Mitteltöne, die das Foto grau machen
- Ein Duotone auf dem einen Foto, bei dem echte Farbe verkauft, etwa ein Kleid
- Eine andere Tönung auf jedem Foto eines Karussells
- Wörter über dem unruhigsten Teil des Fotos

### Machen

- Eine tiefe Schattenfarbe und ein blasses Licht
- Farbhauch für Produkte, Duoton für Menschen und Orte
- Eine Tönung über alle Fotos einer Serie
- Wörter im ruhigen Bereich, die Farbe wählt Automatische Farbe

Steht Text direkt auf dem Foto, erklärt [Text auf Fotos lesbar machen](https://gradiently.design/de/guide/readable-text-on-photos) die Platzierung, und eine einheitliche Tönung ist eine der einfachsten Gewohnheiten hinter [Markenkonsistenz](https://gradiently.design/de/guide/brand-consistency).

## Ein Duotone in CSS

Auf einer Website baust du denselben Effekt mit Füllmethoden: Mach das Foto grau, multipliziere es über der Lichterfarbe und hell es dann mit der Schattenfarbe auf.

```css
.duotone {
  position: relative;
  background: #fbcfe8; /* highlight colour */
}

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

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e1b4b; /* shadow colour */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Indigo-Schatten und rosé Lichter. Zur Browserunterstützung siehe [mix-blend-mode auf MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode).

## FAQ

### Was ist ein Duotone Foto?

Ein Foto, dessen Farben durch zwei ersetzt werden: eine für die Schatten und eine für die Lichter, wobei die Töne dazwischen aus dem Paar gemischt werden.

### Wie mache ich ein Duotone Foto in meinen Markenfarben?

In Gradiently wählst du das Foto aus, öffnest die Fotobearbeitung und wählst Duoton; es nutzt die Farben des Marks im Design. In CSS kombinierst du ein Graustufenbild mit Füllmethoden.

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

Ein Duotone ersetzt die gesamte Farbe des Fotos durch zwei Farben. Ein Farbhauch legt eine Farbe über das Foto und behält etwas von dessen eigener, sodass Motive natürlich bleiben.

### Welche Farben ergeben ein gutes Duotone?

Eine sehr dunkle Schattenfarbe und eine sehr helle Lichterfarbe. Zwei Mitteltöne lassen das Foto flach und matschig wirken.

### Kann ich Fotos in Gradiently in Formen zuschneiden?

Ja. Fotos lassen sich als Quadrat, Kreis, Bogen oder Klecks rahmen.