Create your own Duotone filter

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cld-transformation quality="auto" fetchFormat="auto" />
</cld-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)

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

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cld-transformation quality="auto" />
  <cld-transformation effect="grayscale" />
  <cld-transformation effect="tint:50:red" />
</cld-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)

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cld-transformation quality="auto" />
  <cld-transformation effect="grayscale" />
  <cld-transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</cld-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)

Changing grayscale to black and white creates this effect:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <cld-transformation quality="auto" />
  <cld-transformation effect="blackwhite" />
  <cld-transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</cld-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