Applying Your Own Duotone Effect Filter With Cloudinary

The trendy duotone effect is ubiquitous in today’s websites and illustrations for good reason: it highlights content well, rendering it pleasing to the eye, especially on minimal web platforms. The sky is the limit as to how much you can play with colors while applying a duotone effect. You could keep trying them out until something stands out.

Here are two images with a duotone effect applied from design tools, such as Adobe’s Photoshop and Illustrator:

Source: adobedownload.org

Source: Adobe

The Cloudinary process is a lot simpler and faster, however. Read on for the details.

To apply duotone to an image with Cloudinary:

1. Upload to Cloudinary the image, for example, the one below.

2. Add the e_grayscale and e_tint parameters to the image URL, which then reads: Loading code examples

3. Assign a numerical value, e.g., 50, to e_tint. The URL then reads:

   Loading code examples

The bigger the number, the stronger the effect.

By default, the duotone color is red. For a different color, specify it in e_tint, for example blue:

Loading code examples

You can mix colors, for example, add yellow to blue in e_tint. The URL then reads:

Loading code examples

Feel free to experiment further with other colors.

For the syntax of applying various duotone effects along with examples, check out this API reference and cookbook.