Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
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>
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)
Original

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
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>
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)
Default level

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
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>
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)
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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
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>
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)
With overlay

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
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>
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)
Custom hue level for overlay

by Itay Taragano
Tags: