Customize color saturation

Saturation level of images can be easily increased or decreased on-the-fly. This can be done by setting the effect parameter to saturation (e_saturation in URLs). Saturation levels can be customized by specifying the saturation percentage, either positive or negative.

Here's an original image uploaded to Cloudinary:

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

URL:

https://res.cloudinary.com/demo/image/upload/vegetable_soup.jpg

Ruby:

cl_image_tag("vegetable_soup.jpg")

PHP:

cl_image_tag("vegetable_soup.jpg")

Python:

CloudinaryImage("vegetable_soup.jpg").image()

Node.js:

cloudinary.image("vegetable_soup.jpg")

Java:

cloudinary.url().imageTag("vegetable_soup.jpg");

JS:

cloudinary.imageTag('vegetable_soup.jpg').toHtml();

jQuery:

$.cloudinary.image("vegetable_soup.jpg")

React:

<Image publicId="vegetable_soup.jpg" >

</Image>

Vue.js:

<cld-image publicId="vegetable_soup.jpg" >

</cld-image>

Angular:

<cl-image public-id="vegetable_soup.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("vegetable_soup.jpg")

Android:

MediaManager.get().url().generate("vegetable_soup.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("vegetable_soup.jpg")!, cloudinary: cloudinary)

The following examples modify the color saturation of the image. A negative saturation value will reduce color saturation while a positive value will increase it.

Here's an example of increasing the saturation level by 60%:

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

URL:

https://res.cloudinary.com/demo/image/upload/e_saturation:60/vegetable_soup.jpg

Ruby:

cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:60")

PHP:

cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:60"))

Python:

CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:60")

Node.js:

cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})

Java:

cloudinary.url().transformation(new Transformation().effect("saturation:60")).imageTag("vegetable_soup.jpg");

JS:

cloudinary.imageTag('vegetable_soup.jpg', {effect: "saturation:60"}).toHtml();

jQuery:

$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})

React:

<Image publicId="vegetable_soup.jpg" >
  <Transformation effect="saturation:60" />
</Image>

Vue.js:

<cld-image publicId="vegetable_soup.jpg" >
  <cld-transformation effect="saturation:60" />
</cld-image>

Angular:

<cl-image public-id="vegetable_soup.jpg" >
  <cl-transformation effect="saturation:60">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:60")).BuildImageTag("vegetable_soup.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("saturation:60")).generate("vegetable_soup.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:60")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)

Here's an example of decreasing the saturation level by 60%:

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

URL:

https://res.cloudinary.com/demo/image/upload/e_saturation:-60/vegetable_soup.jpg

Ruby:

cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:-60")

PHP:

cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:-60"))

Python:

CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:-60")

Node.js:

cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-60"})

Java:

cloudinary.url().transformation(new Transformation().effect("saturation:-60")).imageTag("vegetable_soup.jpg");

JS:

cloudinary.imageTag('vegetable_soup.jpg', {effect: "saturation:-60"}).toHtml();

jQuery:

$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-60"})

React:

<Image publicId="vegetable_soup.jpg" >
  <Transformation effect="saturation:-60" />
</Image>

Vue.js:

<cld-image publicId="vegetable_soup.jpg" >
  <cld-transformation effect="saturation:-60" />
</cld-image>

Angular:

<cl-image public-id="vegetable_soup.jpg" >
  <cl-transformation effect="saturation:-60">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:-60")).BuildImageTag("vegetable_soup.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("saturation:-60")).generate("vegetable_soup.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:-60")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)

Decreasing the saturation level by 100% generates a grayscale version of the image:

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

URL:

https://res.cloudinary.com/demo/image/upload/e_saturation:-100/vegetable_soup.jpg

Ruby:

cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:-100")

PHP:

cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:-100"))

Python:

CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:-100")

Node.js:

cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-100"})

Java:

cloudinary.url().transformation(new Transformation().effect("saturation:-100")).imageTag("vegetable_soup.jpg");

JS:

cloudinary.imageTag('vegetable_soup.jpg', {effect: "saturation:-100"}).toHtml();

jQuery:

$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:-100"})

React:

<Image publicId="vegetable_soup.jpg" >
  <Transformation effect="saturation:-100" />
</Image>

Vue.js:

<cld-image publicId="vegetable_soup.jpg" >
  <cld-transformation effect="saturation:-100" />
</cld-image>

Angular:

<cl-image public-id="vegetable_soup.jpg" >
  <cl-transformation effect="saturation:-100">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:-100")).BuildImageTag("vegetable_soup.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("saturation:-100")).generate("vegetable_soup.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:-100")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)

Not specifying the saturation level, increases color saturation by the default level of 80%:

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

URL:

https://res.cloudinary.com/demo/image/upload/e_saturation/vegetable_soup.jpg

Ruby:

cl_image_tag("vegetable_soup.jpg", :effect=>"saturation")

PHP:

cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation"))

Python:

CloudinaryImage("vegetable_soup.jpg").image(effect="saturation")

Node.js:

cloudinary.image("vegetable_soup.jpg", {effect: "saturation"})

Java:

cloudinary.url().transformation(new Transformation().effect("saturation")).imageTag("vegetable_soup.jpg");

JS:

cloudinary.imageTag('vegetable_soup.jpg', {effect: "saturation"}).toHtml();

jQuery:

$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation"})

React:

<Image publicId="vegetable_soup.jpg" >
  <Transformation effect="saturation" />
</Image>

Vue.js:

<cld-image publicId="vegetable_soup.jpg" >
  <cld-transformation effect="saturation" />
</cld-image>

Angular:

<cl-image public-id="vegetable_soup.jpg" >
  <cl-transformation effect="saturation">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation")).BuildImageTag("vegetable_soup.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("saturation")).generate("vegetable_soup.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)