Monochromatisches Farbschema & Duotone-Effekte auf Bildern

Bei Website-Besuchern hinterlassen Bilder mit gut gewählten Effekten einen starken Eindruck. Mit etwas CSS sind manche Effekte schnell und einfach realsierbar. Hier zwei Beispiele.

Ein monochromatisches Farbschema besteht aus einer Basisfarbe, die von Weiß über Graustufen zu Schwarz abschattiert wird. Duotone-Effekte verhalten sich ähnlich. Hier werden jedoch zwei gegensätzliche Farben verwendet für helle bzw. dunkle Bereiche. Im Grafikdesign sind diese Effekte schon sehr lange bekannt, auf Webseiten und in Apps tauchen sie jetzt auch häufiger auf. Ein bekanntes Beispiel ist Spotify.

Für das UI-Design einer Kundenwebsite habe ich nach Möglichkeiten geschaut, auf Bilder einen Monochrome- oder Duotone Effekt zu legen. Damit der Kunde keine regelmäßige Photoshop Arbeit zu verantworten hat, bieten sich eine technische Lösung mit CSS an. Zum Testen habe ich für beide Varianten je ein Beispiel auf Codepen gebaut:

Monochromatisches Beispiel:
https://codepen.io/onza/pen/PoPxvrX

Duotone Beispiel:
https://codepen.io/onza/pen/VwvqxyZ

In den Beispielen verwende ich die CSS Eigenschaften filter und mix-blend-mode. Beide Eigenschaften haben einen recht guten Browser Support, nur der IE11 scheidet (wenig überraschend) aus.

So sieht das dann aus:

Foto: https://picsum.photos/