Adjust the hue value of images

Create a different mixture of colors for your images with the Hue filter. This can be applied by setting the effect parameter to hue (e_hue in URLs). The hue level can be customized.

Here's an original image for example:

Ruby:
Copy to clipboard
cl_image_tag("white_chicken.jpg")
PHP:
Copy to clipboard
cl_image_tag("white_chicken.jpg")
Python:
Copy to clipboard
CloudinaryImage("white_chicken.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("white_chicken.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("white_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('white_chicken.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("white_chicken.jpg")
React:
Copy to clipboard
<Image publicId="white_chicken.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="white_chicken.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="white_chicken.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("white_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("white_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("white_chicken.jpg")!, cloudinary: cloudinary)
Original

Here it is again after applying the hue effect with its default value:

Ruby:
Copy to clipboard
cl_image_tag("white_chicken.jpg", :effect=>"hue")
PHP:
Copy to clipboard
cl_image_tag("white_chicken.jpg", array("effect"=>"hue"))
Python:
Copy to clipboard
CloudinaryImage("white_chicken.jpg").image(effect="hue")
Node.js:
Copy to clipboard
cloudinary.image("white_chicken.jpg", {effect: "hue"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("hue")).imageTag("white_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('white_chicken.jpg', {effect: "hue"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("white_chicken.jpg", {effect: "hue"})
React:
Copy to clipboard
<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="white_chicken.jpg" >
  <cld-transformation effect="hue" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue")).BuildImageTag("white_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("hue")).generate("white_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
Default level

While the default value is 80, you can customize the hue level, for example:

Ruby:
Copy to clipboard
cl_image_tag("white_chicken.jpg", :effect=>"hue:-40")
PHP:
Copy to clipboard
cl_image_tag("white_chicken.jpg", array("effect"=>"hue:-40"))
Python:
Copy to clipboard
CloudinaryImage("white_chicken.jpg").image(effect="hue:-40")
Node.js:
Copy to clipboard
cloudinary.image("white_chicken.jpg", {effect: "hue:-40"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("hue:-40")).imageTag("white_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('white_chicken.jpg', {effect: "hue:-40"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("white_chicken.jpg", {effect: "hue:-40"})
React:
Copy to clipboard
<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue:-40" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="white_chicken.jpg" >
  <cld-transformation effect="hue:-40" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue:-40">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue:-40")).BuildImageTag("white_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("hue:-40")).generate("white_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue:-40")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
Custom level

The adjustment of the Hue level is not limited to the main image, it can be changed for overlaid images as well. Here's the same image with an avatar overlay, scaled-down and placed in a 20 pixels offset (for both x and y) from the south-east corner:

Ruby:
Copy to clipboard
cl_image_tag("white_chicken.jpg", :overlay=>"avatar2", :gravity=>"south_east", :x=>20, :y=>20, :width=>200)
PHP:
Copy to clipboard
cl_image_tag("white_chicken.jpg", array("overlay"=>"avatar2", "gravity"=>"south_east", "x"=>20, "y"=>20, "width"=>200))
Python:
Copy to clipboard
CloudinaryImage("white_chicken.jpg").image(overlay="avatar2", gravity="south_east", x=20, y=20, width=200)
Node.js:
Copy to clipboard
cloudinary.image("white_chicken.jpg", {overlay: "avatar2", gravity: "south_east", x: 20, y: 20, width: 200})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200)).imageTag("white_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('white_chicken.jpg', {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("white_chicken.jpg", {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200})
React:
Copy to clipboard
<Image publicId="white_chicken.jpg" >
  <Transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="white_chicken.jpg" >
  <cld-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="white_chicken.jpg" >
  <cl-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("avatar2")).Gravity("south_east").X(20).Y(20).Width(200)).BuildImageTag("white_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200)).generate("white_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("avatar2").setGravity("south_east").setX(20).setY(20).setWidth(200)).generate("white_chicken.jpg")!, cloudinary: cloudinary)
With overlay

Here's the same image after applying the hue effect (with a custom level 50) on the overlay avatar image:

Ruby:
Copy to clipboard
cl_image_tag("white_chicken.jpg", :overlay=>"avatar2", :gravity=>"south_east", :x=>20, :y=>20, :width=>200, :effect=>"hue:50")
PHP:
Copy to clipboard
cl_image_tag("white_chicken.jpg", array("overlay"=>"avatar2", "gravity"=>"south_east", "x"=>20, "y"=>20, "width"=>200, "effect"=>"hue:50"))
Python:
Copy to clipboard
CloudinaryImage("white_chicken.jpg").image(overlay="avatar2", gravity="south_east", x=20, y=20, width=200, effect="hue:50")
Node.js:
Copy to clipboard
cloudinary.image("white_chicken.jpg", {overlay: "avatar2", gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200).effect("hue:50")).imageTag("white_chicken.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('white_chicken.jpg', {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("white_chicken.jpg", {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"})
React:
Copy to clipboard
<Image publicId="white_chicken.jpg" >
  <Transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" effect="hue:50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="white_chicken.jpg" >
  <cld-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" effect="hue:50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="white_chicken.jpg" >
  <cl-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" effect="hue:50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("avatar2")).Gravity("south_east").X(20).Y(20).Width(200).Effect("hue:50")).BuildImageTag("white_chicken.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200).effect("hue:50")).generate("white_chicken.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("avatar2").setGravity("south_east").setX(20).setY(20).setWidth(200).setEffect("hue:50")).generate("white_chicken.jpg")!, cloudinary: cloudinary)
Custom hue level for overlay

by Itay Taragano