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