Skip to content

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:

Duotone Spotify Source:

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

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

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

    Loading code examples Tint

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 Tint

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

Loading code examples Tint

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.

Back to top

Featured Post