Der Duotone-Effekt: jedes Foto in zwei Farben markengerecht

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.

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.

So wählst du ein Duotone-Farbpaar

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

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

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
• Markenkonsistenz: Jedes Bild wiederholt deine Farben, was Wiedererkennung aufbaut, siehe Markenkonsistenz
• 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.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="duotone-midnight-gold" color-interpolation-filters="sRGB">
    <!-- 1. Greyscale by luminance -->
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0      0      0      1 0"/>
    <!-- 2. Map black to #1b134f and white to #fad084 -->
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.106 0.980"/>
      <feFuncG type="table" tableValues="0.075 0.816"/>
      <feFuncB type="table" tableValues="0.310 0.518"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="portrait.jpg" alt="Portrait" style="filter: url(#duotone-midnight-gold)">

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