Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryWebsite Development and Maintenance

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Image Hue Shift

It is possible to shift the hues of an image. All hues are shifted equally.

Let's demonstrate. Notice the orange−ish color on the duck's cheek.

demo image

Now, let's shift the hues of the entire image until the cheek is green−ish.

demo image

All the hues in the image shifted, including the colors in the cheek area.

If you want to do stuff like that with some of your images, here's how.

You could do trial and error until you get what you want, which can be fun. I enjoy doing things with trial and error to learn about the various effects my trials have.

However, unless you wish to immerse yourself into possibilities, it probably is better to visualize the hue bar.

The hues of an image are shifted left or right along a hue bar of colors. A hue bar represents 360 degrees of colors. Here is a representation.

color bar

At the left end is degree 0. At the right end is degree 359. Imagine the bar wrapped around so the 0 and the 359 meet.

That imagination will be used to determine how many degrees to shift the hues of an image.

In the demonstration further above, the hues were shifted 100 degrees. The orange−ish cheek became green−ish.

On the hue bar, you'll see the orange band and the green band. The green band is about 100 degrees to the right of the orange band.

This is the CSS that was used to shift the hues in the demo image:

filter:hue-rotate(100deg);

The 100deg value can be any whole number, positive or negative, with "deg" appended.

Here is where your imagination of the wrap-around hue bar comes in. If the result of the hue shift calculation is more than 359deg, the result wraps around. Similarly, if the result is less than -0deg, the result wraps around.

Here is the same image, but with the hue-rotate() being -100deg. All hues are shifted left instead of right along the wrap-around hue bar. The hues for the orange−ish cheek colors wrap around and become the hues for pink−ish.

demo image

Here are the three img tags for the demonstration images.

<img src="https://www.willmaster.com/possibilities/images/20250701.jpg" style="max-width:100%;" alt="demo image">

<img src="https://www.willmaster.com/possibilities/images/20250701.jpg" style="filter:hue-rotate(100deg); max-width:100%;" alt="demo image">

<img src="https://www.willmaster.com/possibilities/images/20250701.jpg" style="filter:hue-rotate(-100deg); max-width:100%;" alt="demo image">

When an image has its hues shifted, all the hues in the image shift by an equal amount.

The filter:hue-rotate(); CSS rule is specialized. It sure comes in handy when a hue shift is desired.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2025 Will Bontrager Software LLC