How RGB is related to HSV, and how to implement hue shifting on the iPhone

How RGB is related to HSV, and how to implement hue shifting on the iPhone

Last weekend, I wrote some code that shifted hues in existing colors. To do that, I needed to improve my understanding of hue, saturation, and lightness. I had to go on a journey of learning! So, I thought I’d share my rainbow voyage with you here.

I started by poking around in Photoshop. If you’re familiar with Photoshop, you may recognize this dialog:





If you move around the Hue slider, your image changes color without changing either saturation (which can be described as ‘colorfulness’, sort of) or value (lightness). That is exactly the functionality I wanted to implement. In Photoshop, it’s also fun
stuff that can make your photos look psychedelic.

Then, there’s this guy, the Color Picker:





To pick your color, you click around in the box on the left and move the rainbow slider up and down. The number-containing boxes in the middle show you the RGB (red green blue) values
of the color currently specified, which is handy. The rainbow slider is a hue controller, and the big box on the left represents lightness on its Y-axis and saturation on its X-axis.

When you sit down to code something like this, though, you can’t manipulate the hue directly like that, at least not on the iPhone. You can’t just say “give me this existing color’s hue” and then use that to compose a new color. Whether you’re using
UIColor, CGColor, or cocos2d’s ccColor3B, the only way to manipulate the hue of an existing color is via RGB. Thus, you need to figure out how RGB affects HSV (hue saturation value/lightness).

Moving the hue slider in Photoshop’s color picker and noting the RGB value changes is a good way to do this. Try it, and you’ll notice that among the RGB values, there’s always a constant highest number, a constant lowest number, and a variable middle number.

Let’s say the color you start off with has an RGB of 57-181-107 (a mildly-bluish green). You can move the hue slider anywhere you want, but two
of the RGB values will always be 57 and 181. If you slide it toward the orange spectrum, you’ll end up with something like 181-107-57.
181 and 57 are still in the mix, yet it’s an entirely different color.

When moving the hue slider, the limits remain constant becausechanging the upper and lower limits will affect the lightness and saturation of a color. If you move the cursor in the saturation/lightness color panel, however, those limits
will change.

Lightness

On a display, if you max out red, green, and blue, the result is pure white. It follows that raising the upper limit among the RGB components of a given color will move it closer to white, whereas lowering the lower limit will move it further away from
white. “Moving a color further away from white” is also known as “darkening a color.”

Saturation

Saturation is also affected by the upper and lower RGB limits, but by the two limits’ relative distance from each other, rather than by the limit’s absolute values. In RGB terms, gray occurs when each of the components’ values are close to one another. 177-171-161 is
a kind of gray, for example. When all three components of a color have matching values, as in 177-177-177, that color is said to be totally desaturated.

Conversely, the further apart the RGB components are, the more saturated the colors become. e.g. 255-112-17 is a very intense orange. 255 and 17 are about as far apart as you can get.

Hue

If we want to change the hue while freezing saturation and lightness, we can’t change the upper and lower limits, as explained above. That leaves us just the following:

1. We can change the variable middle value. e.g. 112 in a color like 112-67-233. If we change 112 to 150, we get 150-67-233.

2. We can’t change the upper and lower limits, but we can swap their positions. e.g. In 112-67-233, we can move 67 and 233 and get

67-233-112.

Now we know how to change the hue without messing with saturation or lightness, but we’re changing it haphazardly. To find out how to move the hue along the spectrum the way the Photoshop slider does, look at the RGB value changes that happen when the slider
is slowly moved in the red-to-blue direction. You’ll see that:

1. One value (either R, G, or B) changes at a time.

2. That value is either moves up until it hits the upper limit, or it moves down until it hits the lower limit.

3. Once a value hits a limit, that value stops changing momentarily, and a different value starts moving.

Here’s a graph of the changes in the RGB values as the color is moved along the spectrum:





(I apologize for the graph’s crapulence. I bet you there’s a good version of this somewhere on the web, but it wasn’t on the first page of search results, so I just scriggled this out.)

The lines represent the amounts of R, G, and B components that are present in each point along the spectrum. The vertical bars at the top are the colors that (approximately) result from those RGB combinations.

The graph shows the following behavior: For each component (R, G, and B):

- If the component is not at the the lower limit and the next component (e.g. the next component after the R component is G) is at the upper limit, that component will descend.

- If the component is not at the upper limit and the next component is at the lower limit, that component will ascend.

- Otherwise, that component doesn’t change.

I’m sure there’s some clean mathematical formula that describes this, but I haven’t done any real math in like twelve years, and now my math organ is shriveled and useless. So, you’ll have to live with the algorithm.

Implementation

Once you know the above, implementation is fairly straightforward. If you want an example, though, here’s my cocos2d-oriented implementation in Objective-C on github.

OGColorTools contains the code that does the color shifting. The meat of the code is in the method color:shiftHue:inDirection:. OGHueShiftExampleLayer is a simple example layer that creates a sprite and shifts its color every time the layer is tapped. You
will need to provide your own bitmap and load it into the sprite for this to work.

Enjoy your hue shifting!