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:

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:
cl.imageTag('vegetable_soup.jpg').toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg")
React:
<Image publicId="vegetable_soup.jpg" >

</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")
Original

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

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:
cl.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>
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")
+60% Saturation

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

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:
cl.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>
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")
-60% Saturation

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

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:
cl.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>
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")
Grayscale

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

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:
cl.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>
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")
+80% Saturation

by Itay Taragano