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.

Original

Original

Duotone Red

Duotone Red

Blue/Yellow

Blue/Yellow
Ruby:
Copy to clipboard
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
  {:quality=>"auto"},
  {:effect=>"grayscale"},
  {:effect=>"tint:50:red"}
  ])
PHP:
Copy to clipboard
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
  array("quality"=>"auto"),
  array("effect"=>"grayscale"),
  array("effect"=>"tint:50:red")
  )))
Python:
Copy to clipboard
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
  {'quality': "auto"},
  {'effect': "grayscale"},
  {'effect': "tint:50:red"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
  {quality: "auto"},
  {effect: "grayscale"},
  {effect: "tint:50:red"}
  ]})
React:
Copy to clipboard
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
  <Transformation quality="auto" />
  <Transformation effect="grayscale" />
  <Transformation effect="tint:50:red" />
</Image>
Vue.js:
Copy to clipboard
<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:
Copy to clipboard
<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:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Chain()
  .Effect("grayscale").Chain()
  .Effect("tint:50:red")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").chain()
  .effect("grayscale").chain()
  .effect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").chain()
  .setEffect("grayscale").chain()
  .setEffect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
by Robert Moseley

Color a picture

Color an image to any other color simply by setting the effect parameter to colorize (e_colorize in URLs), then set the color you want as the value of the color parameter (co in URLs). The color can be given by either it's name (e.g., green) or by an RGB value (e.g., 00FF00).

Original

Original

Solid colorizing

Solid colorizing

Custom intensity

Custom intensity
Ruby:
Copy to clipboard
cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"purple")
PHP:
Copy to clipboard
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))
Python:
Copy to clipboard
CloudinaryImage("smartphone.png").image(effect="colorize", color="purple")
Node.js:
Copy to clipboard
cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("colorize").color("purple")).imageTag("smartphone.png");
JS:
Copy to clipboard
cloudinary.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
React:
Copy to clipboard
<Image publicId="smartphone.png" >
  <Transformation effect="colorize" color="purple" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="smartphone.png" >
  <cld-transformation effect="colorize" color="purple" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="smartphone.png" >
  <cl-transformation effect="colorize" color="purple">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("colorize").color("purple")).generate("smartphone.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize").setColor("purple")).generate("smartphone.png")!, cloudinary: cloudinary)
by Itay Taragano