# Der Duotone-Effekt: jedes Foto in zwei Farben markengerecht [Canonical HTML page](https://gradiently.design/de/guide/duotone-effect) Duotone macht aus jedem Foto zwei Farben deiner Wahl: eine für die Schatten, eine für das Licht. Es ist der schnellste Weg, damit unpassende Bilder wie eine Marke wirken. ## The short version - Der Duotone-Effekt färbt ein Foto mit zwei Farben um, wobei seine dunkelsten Töne einer Farbe und seine hellsten Töne einer anderen zugeordnet werden. - Ein Duotone entsteht, indem das Foto in Graustufen verwandelt und jedes Grau durch den passenden Punkt auf einem zweifarbigen Farbverlauf ersetzt wird. - Die Schattenfarbe muss deutlich dunkler sein als die Lichterfarbe, sonst verliert das Foto seine Form. - Duotone eignet sich ideal, um Fotos aus verschiedenen Quellen einheitlich und markengerecht wirken zu lassen und um Text über Bilder zu setzen. - In CSS erzeugt ein SVG-Filter mit feColorMatrix und feComponentTransfer ein echtes Duotone auf jedem Bild. Der **Duotone-Effekt** färbt ein Foto mit nur zwei Farben um: Seine Schatten werden zu einer Farbe, seine Lichter zu einer anderen, und jeder Ton dazwischen wird aus beiden gemischt. Ein Porträt in tiefem Indigo und warmem Gold, eine Stadt in Waldgrün und Mint. Weil jedes Bild in denselben zwei Farben endet, ist Duotone der schnellste Weg, damit Fotos aus verschiedenen Kameras, Jahreszeiten und Quellen wie zu einer Marke gehörig aussehen. ## So funktioniert der Duotone-Effekt Ein Duotone ist eine Verlaufszuordnung mit zwei Stopps. Zuerst wird das Foto auf Graustufen reduziert, sodass jedes Pixel nur noch eine Helligkeit von Schwarz bis Weiß ist. Dann wird jede Helligkeit durch die Farbe am selben Punkt eines zweifarbigen Farbverlaufs ersetzt: Schwarz wird zur Schattenfarbe, Weiß zur Lichterfarbe, und mittleres Grau zur Farbe genau dazwischen. Das Foto behält seine Formen und sein Licht, aber seine ursprüngliche Farbe ist ganz weg. - Mitternacht und Gold: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Marine und Koralle: `linear-gradient(90deg, #0f1b3d 0%, #ff8a70 100%)` - Wald und Mint: `linear-gradient(90deg, #0b3d2e 0%, #b8f2d0 100%)` - Pflaume und Pfirsich: `linear-gradient(90deg, #3b0a45 0%, #ffc9a3 100%)` - Espresso und Zitrone: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Ochsenblut und Blush: `linear-gradient(90deg, #3f0d12 0%, #fbcfe8 100%)` - Petrol und Creme: `linear-gradient(90deg, #073b4c 0%, #f6ecd9 100%)` - Violett und Cyan: `linear-gradient(90deg, #2e1065 0%, #67e8f9 100%)` Jeder Streifen ist ein Duotone, von links nach rechts gelesen: Die Schatten eines Fotos nehmen die linke Farbe an, die Lichter die rechte und alles andere die Farbe dazwischen. Duotones als Farbverläufe zu lesen macht sie leicht beurteilbar, bevor du ein Foto anfasst. Wirkt die Mitte des Streifens trüb, tun es die Mitteltöne des Fotos auch. Die breitere Technik mit drei oder mehr Farben behandelt [Verlaufszuordnung](https://gradiently.design/de/guide/gradient-map). ## So wählst du ein Duotone-Farbpaar 1. **Die Schattenfarbe dunkel wählen** Die Schattenfarbe trägt die Struktur des Fotos. Sie sollte in der Helligkeit nahe an Schwarz liegen, etwa ein tiefes Marineblau, Pflaume oder Waldgrün, sonst verflachen Gesichter und Details. 2. **Die Lichterfarbe hell wählen** Die Lichterfarbe trägt das Licht. Ein blasses Gold, Blush, Mint oder Creme hält das Bild leuchtend. Ein großer Helligkeitsabstand hält das Foto lesbar. 3. **Die Mitte prüfen** Der größte Teil eines Fotos besteht aus Mitteltönen, deshalb zählt die Farbe genau in der Mitte des Paars am meisten. Wird sie grau oder olivfarben, wähle eine Lichterfarbe, die im Farbton näher an der Schattenfarbe liegt. Siehe [trübe Farbverläufe](https://gradiently.design/de/guide/muddy-gradients). 4. **Eine Farbe aus deiner Marke nehmen** Nutze deine Markenfarbe als Schatten- oder Lichterfarbe und wähle die andere passend dazu. So wirkt Duotone markengerecht statt nur stilisiert. 5. **An einem Gesicht und einer Landschaft testen** Haut und Himmel sind der Ort, an dem sich ein schlechtes Paar zuerst zeigt. Sehen beide noch gut aus, funktioniert das Paar auf fast allem. ### Schwache Paare - Zwei Farben ähnlicher Helligkeit, etwa Rot und Blau - Eine helle Schattenfarbe, die das Foto auswäscht - Gegensätzliche Farbtöne, die die Mitteltöne grau machen - Neonlichter, die Haut krank aussehen lassen ### Starke Paare - Ein Fast-Schwarz als Schatten und ein blasses Licht - Farbtöne, die in der Mitte bunt bleiben - Eine Farbe aus der Markenpalette - Warme Lichter für Menschen, kühle für Orte | Stimmung | Schatten | Lichter | | --- | --- | --- | | Warm und redaktionell | Pflaume `#3b0a45` | Pfirsich `#ffc9a3` | | Klassisch und hochwertig | Mitternacht `#1b134f` | Gold `#fad084` | | Frisch und natürlich | Wald `#0b3d2e` | Mint `#b8f2d0` | | Ruhig und literarisch | Petrol `#073b4c` | Creme `#f6ecd9` | | Laut und elektrisch | Violett `#2e1065` | Cyan `#67e8f9` | Startpaare nach Stimmung. Tausche eine Seite gegen deine eigene Markenfarbe und behalte den Helligkeitsabstand. ## Wann Duotone hilft - **Unpassende Fotos:** Stockbilder, Handyfotos und alte Archivbilder wirken wie ein Set - **Text über Fotos:** Ist das Foto auf zwei ruhige Farben reduziert, sitzen Wörter viel leichter darauf, siehe [Text über Bild](https://gradiently.design/de/guide/text-over-image) - **Markenkonsistenz:** Jedes Bild wiederholt deine Farben, was Wiedererkennung aufbaut, siehe [Markenkonsistenz](https://gradiently.design/de/guide/brand-consistency) - **Poster und Cover:** Ein starkes Duotone wirkt aus der Ferne und druckt sauber - **Schwache Fotos:** Schlechtes Licht und fade Farben spielen kaum eine Rolle, wenn die Farbe ersetzt wird Weniger hilft es dort, wo echte Farbe zählt: Essen, Mode, Produkte und Immobilien, wo Menschen sehen müssen, was sie bekommen. Dort erledigt ein hellerer Farbton oder ein Farbschleier über einem Teil des Bildes die Aufgabe, ohne die echten Farben zu verbergen. ## So machst du ein Duotone in CSS Die genaueste Methode ist ein SVG-Filter. `feColorMatrix` verwandelt das Bild mit Standard-Luminanzgewichten in Graustufen, und `feComponentTransfer` ordnet jeden Kanal von der Schattenfarbe der Lichterfarbe zu. Die Tabellenwerte sind jeweils Rot, Grün und Blau der Farbe geteilt durch 255. ```html Portrait ``` Mitternacht und Gold als SVG-Filter. `color-interpolation-filters="sRGB"` hält die Farben genau wie angegeben. Füge jeder `tableValues`-Liste einen dritten Wert hinzu, und du hast ein Tritone mit einer gewählten Mittelton-Farbe. Das ist der einfachste Weg, ein Paar zu retten, dessen Mitte trüb wird. Für Filter und CSS-Effekte allgemein ist [MDNs Leitfaden zu Filtereffekten](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) eine gute Referenz. ## Duotone in Design-Tools Bildeditoren machen Duotone meist mit einer Verlaufszuordnung: Füge eine Verlaufszuordnungs-Einstellung hinzu, setze den linken Stopp auf deine Schattenfarbe und den rechten auf deine Lichterfarbe und passe den Mittelpunkt an, bis Haut und Himmel stimmen. Manche Tools bieten zudem einen eigenen Duotone-Modus für den Druck, der zwei echte Druckfarben vorbereitet statt eines RGB-Bildes. In Gradiently kann jedes Foto im Studio in den Farben des Marks getönt werden, mit dem du gestaltest: als Mono, als Duotone oder als weicherer Schleier. Wechselst du den Mark, folgt das Foto, sodass ein ganzes Set an Designs in einer Palette bleibt. ## FAQ ### Was ist der Duotone-Effekt? Der Duotone-Effekt färbt ein Foto mit zwei Farben um: Seine Schatten werden zu einer Farbe, seine Lichter zu einer anderen, und die Mitteltöne werden dazwischen gemischt. ### Welche Farben funktionieren für Duotone am besten? Eine sehr dunkle Schattenfarbe und eine sehr helle Lichterfarbe, mit Farbtönen, die in der Mitte bunt bleiben, etwa Marine und Koralle oder Pflaume und Pfirsich. ### Wie mache ich ein Duotone-Bild in CSS? Nutze einen SVG-Filter: `feColorMatrix`, um in Graustufen umzuwandeln, dann `feComponentTransfer` mit Tabellenwerten für Schatten- und Lichterfarbe. ### Was ist der Unterschied zwischen Duotone und einer Verlaufszuordnung? Ein Duotone ist eine Verlaufszuordnung mit genau zwei Farben. Eine Verlaufszuordnung kann drei oder mehr Farben über denselben Tonwertbereich nutzen. ### Warum wirkt mein Duotone flach? Die beiden Farben liegen in der Helligkeit zu nah beieinander. Mache die Schattenfarbe dunkler oder die Lichterfarbe heller.