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:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/smartphone.png

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>

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

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_colorize,co_purple/smartphone.png

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>

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:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_colorize,co_rgb:dd14d1/smartphone.png

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>

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:

URL Ruby PHP Python Node.js Java JS jQuery React Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_colorize:30,co_rgb:dd14d1/smartphone.png

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>

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)