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).

Here's an example of a smartphone image:

Ruby:
Copy to clipboard
cl_image_tag("smartphone.png")
PHP:
Copy to clipboard
cl_image_tag("smartphone.png")
Python:
Copy to clipboard
CloudinaryImage("smartphone.png").image()
Node.js:
Copy to clipboard
cloudinary.image("smartphone.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("smartphone.png");
JS:
Copy to clipboard
cloudinary.imageTag('smartphone.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("smartphone.png")
React:
Copy to clipboard
<Image publicId="smartphone.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="smartphone.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="smartphone.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("smartphone.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("smartphone.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("smartphone.png")!, cloudinary: cloudinary)
Original

Here's the same image while being colorized, in this example we'll use the color name (purple):

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)
Solid colorizing

A specific RGB color is also supported by setting the color parameter to #<value> (co_rgb:<value> in URLs). For example:

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

You can also control the color opacity with a value between 0 to 100 (the default is 100). For example, the following demonstrates the same colorized image with an opacity of 30:

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

by Itay Taragano