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:
cl_image_tag("smartphone.png")
PHP:
cl_image_tag("smartphone.png")
Python:
CloudinaryImage("smartphone.png").image()
Node.js:
cloudinary.image("smartphone.png")
Java:
cloudinary.url().imageTag("smartphone.png")
JS:
cl.imageTag('smartphone.png').toHtml();
jQuery:
$.cloudinary.image("smartphone.png")
React:
<Image publicId="smartphone.png" >

</Image>
Angular:
<cl-image public-id="smartphone.png" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("smartphone.png")
Original

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

Ruby:
cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"purple")
PHP:
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))
Python:
CloudinaryImage("smartphone.png").image(effect="colorize", color="purple")
Node.js:
cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
Java:
cloudinary.url().transformation(new Transformation().effect("colorize").color("purple")).imageTag("smartphone.png")
JS:
cl.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
React:
<Image publicId="smartphone.png" effect="colorize" color="purple">
        <Transformation effect="colorize" color="purple" />
</Image>
Angular:
<cl-image public-id="smartphone.png" effect="colorize" color="purple">
        <cl-transformation effect="colorize" color="purple" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")
Solid colorizing

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

Ruby:
cl_image_tag("smartphone.png", :effect=>"colorize", :color=>"#dd14d1")
PHP:
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"#dd14d1"))
Python:
CloudinaryImage("smartphone.png").image(effect="colorize", color="#dd14d1")
Node.js:
cloudinary.image("smartphone.png", {effect: "colorize", color: "#dd14d1"})
Java:
cloudinary.url().transformation(new Transformation().effect("colorize").color("#dd14d1")).imageTag("smartphone.png")
JS:
cl.imageTag('smartphone.png', {effect: "colorize", color: "#dd14d1"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "#dd14d1"})
React:
<Image publicId="smartphone.png" effect="colorize" color="#dd14d1">
        <Transformation effect="colorize" color="#dd14d1" />
</Image>
Angular:
<cl-image public-id="smartphone.png" effect="colorize" color="#dd14d1">
        <cl-transformation effect="colorize" color="#dd14d1" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("#dd14d1")).BuildImageTag("smartphone.png")
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:
cl_image_tag("smartphone.png", :effect=>"colorize:30", :color=>"#dd14d1")
PHP:
cl_image_tag("smartphone.png", array("effect"=>"colorize:30", "color"=>"#dd14d1"))
Python:
CloudinaryImage("smartphone.png").image(effect="colorize:30", color="#dd14d1")
Node.js:
cloudinary.image("smartphone.png", {effect: "colorize:30", color: "#dd14d1"})
Java:
cloudinary.url().transformation(new Transformation().effect("colorize:30").color("#dd14d1")).imageTag("smartphone.png")
JS:
cl.imageTag('smartphone.png', {effect: "colorize:30", color: "#dd14d1"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize:30", color: "#dd14d1"})
React:
<Image publicId="smartphone.png" effect="colorize:30" color="#dd14d1">
        <Transformation effect="colorize:30" color="#dd14d1" />
</Image>
Angular:
<cl-image public-id="smartphone.png" effect="colorize:30" color="#dd14d1">
        <cl-transformation effect="colorize:30" color="#dd14d1" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize:30").Color("#dd14d1")).BuildImageTag("smartphone.png")
Custom intensity

by Itay Taragano