Duotone-Generator

Eine zweifarbige Bildbearbeitung erstellen

Duotone ist eine klassische Grafiktechnik, die ein Foto auf zwei dominante Farben reduziert. Statt den ursprünglichen Farbton jedes Pixels beizubehalten, wird das Bild in Tonwerte umgewandelt und dann zwischen einer Schattenfarbe und einer Lichterfarbe abgebildet. Dieser Duotone-Generator führt diesen Vorgang direkt auf einem HTML-Canvas in Ihrem Browser aus. Laden Sie ein Bild hoch, wählen Sie die beiden Farben, sehen Sie sich die Vorschau an und laden Sie ein PNG herunter, ohne die Datei an einen Server zu senden.

Der Effekt eignet sich für Hero-Bilder, redaktionelle Grafiken, Social-Media-Motive, Cover im Albumstil, Produktfeature-Blöcke und Markenkampagnen, bei denen normale Fotos einheitlich wirken sollen. Eine Palette aus Marineblau und Creme kann seriös und warm wirken, Violett und Cyan dagegen energiegeladen und digital. Da die Zuordnung auf der Helligkeit basiert, liefern Fotos mit klarer Licht- und Schattenstruktur meist die stärksten Ergebnisse. Flache Screenshots oder sehr kontrastarme Bilder müssen unter Umständen vorab bearbeitet werden, damit die Duotone-Wirkung dramatisch aussieht.

Wie der Browser das Bild verarbeitet

Nachdem das Bild lokal dekodiert wurde, liest das Canvas jedes Pixel aus. Aus den Rot-, Grün- und Blaukanälen wird ein Helligkeitswert berechnet, der dann zum Mischverhältnis zwischen den beiden gewählten Farben wird. Dunkle Pixel bleiben nahe an der Schattenfarbe, helle Pixel wandern zur Lichterfarbe, und Mitteltöne mischen sich dazwischen. Der Alphakanal bleibt erhalten, sodass transparente PNG-Grafiken auch im exportierten Ergebnis transparent bleiben.

Bessere Duotone-Farben wählen

Starke Duotone-Paletten kombinieren in der Regel eine dunkle Farbe mit einer deutlich helleren. Haben beide Farben ähnliche Helligkeit, kann das fertige Bild matschig wirken, weil Schatten und Lichter zusammenfallen. Beginnen Sie mit einer tiefen Markenfarbe für die Schatten und einem hellen Akzent für die Lichter und tauschen Sie die Farben, wenn die Stimmung invertiert wirkt. Testen Sie das heruntergeladene PNG im finalen Layout mit Text und Calls to Action. Auch eine schöne Bildbearbeitung braucht genügend Kontrast rund um alle Vordergrundinhalte, die darübergelegt werden.