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:

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/white_chicken.jpg

Ruby:

cl_image_tag("white_chicken.jpg")

PHP:

cl_image_tag("white_chicken.jpg")

Python:

CloudinaryImage("white_chicken.jpg").image()

Node.js:

cloudinary.image("white_chicken.jpg")

Java:

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

JS:

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

jQuery:

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

React:

<Image publicId="white_chicken.jpg" >

</Image>

Vue.js:

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

</cld-image>

Angular:

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

</cl-image>

.Net:

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

Android:

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

iOS:

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

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

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_hue/white_chicken.jpg

Ruby:

cl_image_tag("white_chicken.jpg", :effect=>"hue")

PHP:

cl_image_tag("white_chicken.jpg", array("effect"=>"hue"))

Python:

CloudinaryImage("white_chicken.jpg").image(effect="hue")

Node.js:

cloudinary.image("white_chicken.jpg", {effect: "hue"})

Java:

cloudinary.url().transformation(new Transformation().effect("hue")).imageTag("white_chicken.jpg");

JS:

cloudinary.imageTag('white_chicken.jpg', {effect: "hue"}).toHtml();

jQuery:

$.cloudinary.image("white_chicken.jpg", {effect: "hue"})

React:

<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue" />
</Image>

Vue.js:

<cld-image publicId="white_chicken.jpg" >
  <cld-transformation effect="hue" />
</cld-image>

Angular:

<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue")).BuildImageTag("white_chicken.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("hue")).generate("white_chicken.jpg");

iOS:

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

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

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_hue:-40/white_chicken.jpg

Ruby:

cl_image_tag("white_chicken.jpg", :effect=>"hue:-40")

PHP:

cl_image_tag("white_chicken.jpg", array("effect"=>"hue:-40"))

Python:

CloudinaryImage("white_chicken.jpg").image(effect="hue:-40")

Node.js:

cloudinary.image("white_chicken.jpg", {effect: "hue:-40"})

Java:

cloudinary.url().transformation(new Transformation().effect("hue:-40")).imageTag("white_chicken.jpg");

JS:

cloudinary.imageTag('white_chicken.jpg', {effect: "hue:-40"}).toHtml();

jQuery:

$.cloudinary.image("white_chicken.jpg", {effect: "hue:-40"})

React:

<Image publicId="white_chicken.jpg" >
  <Transformation effect="hue:-40" />
</Image>

Vue.js:

<cld-image publicId="white_chicken.jpg" >
  <cld-transformation effect="hue:-40" />
</cld-image>

Angular:

<cl-image public-id="white_chicken.jpg" >
  <cl-transformation effect="hue:-40">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("hue:-40")).BuildImageTag("white_chicken.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("hue:-40")).generate("white_chicken.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("hue:-40")).generate("white_chicken.jpg")!, cloudinary: cloudinary)

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:

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/l_avatar2,g_south_east,x_20,y_20,w_200/white_chicken.jpg

Ruby:

cl_image_tag("white_chicken.jpg", :overlay=>"avatar2", :gravity=>"south_east", :x=>20, :y=>20, :width=>200)

PHP:

cl_image_tag("white_chicken.jpg", array("overlay"=>"avatar2", "gravity"=>"south_east", "x"=>20, "y"=>20, "width"=>200))

Python:

CloudinaryImage("white_chicken.jpg").image(overlay="avatar2", gravity="south_east", x=20, y=20, width=200)

Node.js:

cloudinary.image("white_chicken.jpg", {overlay: "avatar2", gravity: "south_east", x: 20, y: 20, width: 200})

Java:

cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("avatar2")).gravity("south_east").x(20).y(20).width(200)).imageTag("white_chicken.jpg");

JS:

cloudinary.imageTag('white_chicken.jpg', {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200}).toHtml();

jQuery:

$.cloudinary.image("white_chicken.jpg", {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200})

React:

<Image publicId="white_chicken.jpg" >
  <Transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" />
</Image>

Vue.js:

<cld-image publicId="white_chicken.jpg" >
  <cld-transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" />
</cld-image>

Angular:

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

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:

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:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("avatar2").setGravity("south_east").setX(20).setY(20).setWidth(200)).generate("white_chicken.jpg")!, cloudinary: cloudinary)

Here's the same image after applying the hue effect (with a custom level 50) on the overlay avatar 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/l_avatar2,g_south_east,x_20,y_20,w_200,e_hue:50/white_chicken.jpg

Ruby:

cl_image_tag("white_chicken.jpg", :overlay=>"avatar2", :gravity=>"south_east", :x=>20, :y=>20, :width=>200, :effect=>"hue:50")

PHP:

cl_image_tag("white_chicken.jpg", array("overlay"=>"avatar2", "gravity"=>"south_east", "x"=>20, "y"=>20, "width"=>200, "effect"=>"hue:50"))

Python:

CloudinaryImage("white_chicken.jpg").image(overlay="avatar2", gravity="south_east", x=20, y=20, width=200, effect="hue:50")

Node.js:

cloudinary.image("white_chicken.jpg", {overlay: "avatar2", gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"})

Java:

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:

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:

$.cloudinary.image("white_chicken.jpg", {overlay: new cloudinary.Layer().publicId("avatar2"), gravity: "south_east", x: 20, y: 20, width: 200, effect: "hue:50"})

React:

<Image publicId="white_chicken.jpg" >
  <Transformation overlay="avatar2" gravity="south_east" x="20" y="20" width="200" effect="hue:50" />
</Image>

Vue.js:

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

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

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:

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:

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)