Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

Create your own Duotone filter

A cool new design trend popularized by Spotify 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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/18882410261_e4f9d25780_b_lked9y.jpg
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :quality=>"auto", :fetch_format=>:auto)
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("quality"=>"auto", "fetch_format"=>"auto"))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(quality="auto", fetch_format="auto")
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {quality: "auto", fetch_format: "auto"})
Java:
cloudinary.url().transformation(new Transformation().quality("auto").fetchFormat("auto")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {quality: "auto", fetchFormat: "auto"}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {quality: "auto", fetch_format: "auto"})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" fetchFormat="auto" />
</Image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cl-transformation quality="auto" fetch-format="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto").FetchFormat("auto")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().quality("auto").fetchFormat("auto")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto").setFetchFormat("auto")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
Original

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/e_grayscale/e_tint:50:red/18882410261_e4f9d25780_b_lked9y.jpg
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
  {:quality=>"auto"},
  {:effect=>"grayscale"},
  {:effect=>"tint:50:red"}
  ])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
  array("quality"=>"auto"),
  array("effect"=>"grayscale"),
  array("effect"=>"tint:50:red")
  )))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
  {"quality": "auto"},
  {"effect": "grayscale"},
  {"effect": "tint:50:red"}
  ])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" />
  <Transformation effect="grayscale" />
  <Transformation effect="tint:50:red" />
</Image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation effect="tint:50:red">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Chain()
  .Effect("grayscale").Chain()
  .Effect("tint:50:red")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").chain()
  .setEffect("grayscale").chain()
  .setEffect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/e_grayscale/e_tint:100:0000ff:0p:ffff00:100p/18882410261_e4f9d25780_b_lked9y.jpg
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
  {:quality=>"auto"},
  {:effect=>"grayscale"},
  {:effect=>"tint:100:0000ff:0p:ffff00:100p"}
  ])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
  array("quality"=>"auto"),
  array("effect"=>"grayscale"),
  array("effect"=>"tint:100:0000ff:0p:ffff00:100p")
  )))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
  {"quality": "auto"},
  {"effect": "grayscale"},
  {"effect": "tint:100:0000ff:0p:ffff00:100p"}
  ])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:100:0000ff:0p:ffff00:100p"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:100:0000ff:0p:ffff00:100p")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:100:0000ff:0p:ffff00:100p"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:100:0000ff:0p:ffff00:100p"}
  ]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" />
  <Transformation effect="grayscale" />
  <Transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</Image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation effect="tint:100:0000ff:0p:ffff00:100p">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Chain()
  .Effect("grayscale").Chain()
  .Effect("tint:100:0000ff:0p:ffff00:100p")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").chain()
  .setEffect("grayscale").chain()
  .setEffect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
Blue/Yellow

Changing grayscale to black and white creates this effect:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/q_auto,f_auto/e_blackwhite/e_tint:100:0000ff:0p:ffff00:100p/18882410261_e4f9d25780_b_lked9y.jpg
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
  {:quality=>"auto"},
  {:effect=>"blackwhite"},
  {:effect=>"tint:100:0000ff:0p:ffff00:100p"}
  ])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
  array("quality"=>"auto"),
  array("effect"=>"blackwhite"),
  array("effect"=>"tint:100:0000ff:0p:ffff00:100p")
  )))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
  {"quality": "auto"},
  {"effect": "blackwhite"},
  {"effect": "tint:100:0000ff:0p:ffff00:100p"}
  ])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "blackwhite"},
  {effect: "tint:100:0000ff:0p:ffff00:100p"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("blackwhite").chain()
  .effect("tint:100:0000ff:0p:ffff00:100p")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
  {quality: "auto"},
  {effect: "blackwhite"},
  {effect: "tint:100:0000ff:0p:ffff00:100p"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "blackwhite"},
  {effect: "tint:100:0000ff:0p:ffff00:100p"}
  ]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" />
  <Transformation effect="blackwhite" />
  <Transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</Image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
  <cl-transformation effect="blackwhite">
  </cl-transformation>
  <cl-transformation effect="tint:100:0000ff:0p:ffff00:100p">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Chain()
  .Effect("blackwhite").Chain()
  .Effect("tint:100:0000ff:0p:ffff00:100p")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("blackwhite").chain()
  .effect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").chain()
  .setEffect("blackwhite").chain()
  .setEffect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
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

by Robert Moseley
Tags: