Create your own Duotone filter
Create your own Duotone filter
Filters and effects

A cool new design trend popularized by Shopify is Duotone imagery. There’s a good post on the Shopify blog covering this and some other trends so you can read that there if curious (4 Trendy Visual Design Trends - Shopify Blog). In the spirit of Cloudinary Cookbooks, we’re going to get right down to business.

Here's the original image we’re going to work off: Original

We need to do two things here, make it grayscale, then apply the duotone using our “tint” effect. Duotone Red

You can adjust the color name, use a hex value, change the strength of tinting by changing that “50” number (higher number is stronger), etc., to achieve the desired effect.

You can also specify two different colors, here a blue and a yellow in hex:


Changing grayscale to black and white creates this effect:

Duotone Blue and Yellow - blackwhite, removing the implicit black and white

As is typical with Cloudinary, there’s more than one way to skin a cat. Try to come up with a better Duotone transformation and post it in the comments!

Effects documentation to help you in your endeavor: Cloudinary Effects Cheatsheet