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 v1:
cl_image_tag("smartphone.png")
PHP v2:
(new ImageTag('smartphone.png'));
Python:
CloudinaryImage("smartphone.png").image()
Node.js:
cloudinary.image("smartphone.png")
Java:
cloudinary.url().imageTag("smartphone.png");
JS:
cloudinary.imageTag('smartphone.png').toHtml();
jQuery:
$.cloudinary.image("smartphone.png")
React:
<Image publicId="smartphone.png" >
</Image>
Vue.js:
<cld-image publicId="smartphone.png" >
</cld-image>
Angular:
<cl-image public-id="smartphone.png" >
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.BuildImageTag("smartphone.png")
Android:
MediaManager.get().url().generate("smartphone.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("smartphone.png")!, cloudinary: cloudinary)
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 v1:
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"purple"))
PHP v2:
(new ImageTag('smartphone.png'))
->effect(Effect::colorize()->color(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:
cloudinary.imageTag('smartphone.png', {effect: "colorize", color: "purple"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "purple"})
React:
<Image publicId="smartphone.png" >
<Transformation effect="colorize" color="purple" />
</Image>
Vue.js:
<cld-image publicId="smartphone.png" >
<cld-transformation effect="colorize" color="purple" />
</cld-image>
Angular:
<cl-image public-id="smartphone.png" >
<cl-transformation effect="colorize" color="purple">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("purple")).BuildImageTag("smartphone.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("colorize").color("purple")).generate("smartphone.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize").setColor("purple")).generate("smartphone.png")!, cloudinary: cloudinary)
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 v1:
cl_image_tag("smartphone.png", array("effect"=>"colorize", "color"=>"#dd14d1"))
PHP v2:
(new ImageTag('smartphone.png'))
->effect(Effect::colorize()->color(Color::rgb('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:
cloudinary.imageTag('smartphone.png', {effect: "colorize", color: "#dd14d1"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize", color: "#dd14d1"})
React:
<Image publicId="smartphone.png" >
<Transformation effect="colorize" color="#dd14d1" />
</Image>
Vue.js:
<cld-image publicId="smartphone.png" >
<cld-transformation effect="colorize" color="#dd14d1" />
</cld-image>
Angular:
<cl-image public-id="smartphone.png" >
<cl-transformation effect="colorize" color="#dd14d1">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize").Color("#dd14d1")).BuildImageTag("smartphone.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("colorize").color("#dd14d1")).generate("smartphone.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize").setColor("#dd14d1")).generate("smartphone.png")!, cloudinary: cloudinary)
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 v1:
cl_image_tag("smartphone.png", array("effect"=>"colorize:30", "color"=>"#dd14d1"))
PHP v2:
(new ImageTag('smartphone.png'))
->effect(Effect::colorize()->level(30)
->color(Color::rgb('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:
cloudinary.imageTag('smartphone.png', {effect: "colorize:30", color: "#dd14d1"}).toHtml();
jQuery:
$.cloudinary.image("smartphone.png", {effect: "colorize:30", color: "#dd14d1"})
React:
<Image publicId="smartphone.png" >
<Transformation effect="colorize:30" color="#dd14d1" />
</Image>
Vue.js:
<cld-image publicId="smartphone.png" >
<cld-transformation effect="colorize:30" color="#dd14d1" />
</cld-image>
Angular:
<cl-image public-id="smartphone.png" >
<cl-transformation effect="colorize:30" color="#dd14d1">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("colorize:30").Color("#dd14d1")).BuildImageTag("smartphone.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("colorize:30").color("#dd14d1")).generate("smartphone.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("colorize:30").setColor("#dd14d1")).generate("smartphone.png")!, cloudinary: cloudinary)
