## Color: HSB (HSV, HSI) again

I need to learn to write better summaries.

Here are the summaries I should have written for the HSB post, and for the tint-tone-shade post.

## First, I am going to describe what “saturation” and “brightness- intensity- value” mean in the HSB (HSI, HSV) color space.

I cannot over emphasize that I am discussing what these words mean in a particular color space. As far as I know, these are not universal truths, but particular approaches to them. (I could be wrong: these definitions may be more general than I know, but that’s the point – I don’t know that they are universal.)

I still don’t like the non-technical definitions which I see all over the place, but I will admit that there is a place for them. Color is a physiological response, so many questions of color boil down to describing our response to it. And that is, ultimately, personal and subjective; we don’t all have the same eyes.

Someday I may find other quantitative definitions of “saturation” and “intensity”. This is what I have, so let me summarize it. (Of the three equivalent terms — brightness, intensity, value — I am going to use “intensity” in this post.)

Let me say that again with different emphasis. Brightness, intensity, and value are equivalent terms in these color spaces.

If you need or want far more than this summary, you could start by reading my original color posts.

I personally understand HSB by its relationship to RGB. Although hue, H, is the most complicated to describe mathematically, is the one that is obvious to me. All we do is choose an angle; keep it constant, and we’re working with tints, tones, and shades of a fixed color.

It is convenient, but not essential, to normalize R,G,B to the range 0..1.
If we’re given values in the range 0 to 255, just divide by 255. The equations work perfectly well if the range is 0 to 255; I just want to be able to refer to a numerical maximum, and I am choosing 1 instead of 255 because that is what my code used. We could just as well write the values as percentages, ranging from 0 to 100.

Intensity is computed easily.

• find the maximum value of R, G, B.
• that’s the intensity.

(It doesn’t matter if more than one of R,G,B has the maximum value; after all, it’s the same maximum. Intensity does not depend on which color has the maximum.)

We say that a color is fully intense if its intensity = 1; this is equivalent to: at least one of R,G,B = 1.

Saturation is computed as follows.

• Find the maximum and minimum values of R,G,B,
• subtract them: range = maximum – minimum
• and divide the range by the maximum.
• i.e. saturation = (maximum – minimum)/maximum.

It is worth noting that we can write the saturation as

saturation = 1 – minimum/maximum.

Among other things, that tells us that we can hold the saturation constant by holding constant the ratio of minimum to maximum.

There are interesting implications at the boundaries.

• Saturation = 1 if and only if minimum = 0.
• Saturation = 0 if and only if minimum = maximum.

These, in turn, translate to

• Saturation = 1 if and only if at least one of R,G,B = 0.
• Saturation = 0 iff R = G = B, i.e. we have gray (including possibly white or black).

(And that last property is why people sometimes say that saturation is “how far from gray” a color is.)

We say that a color is fully saturated if its saturation = 1; this is equivalent to one of R,G,B = 0.

So a color is fully saturated and fully intense if and only if one of R,G,B is 0 and one of R,G,B is 1.

(Incidentally, the HSB (HSI, HSV) definition of intensity does not capture the fact that a fully saturated and fully intense yellow appears more luminous than a fully intense and fully saturated blue.)

## Second, let me summarize the relationship of intensity and saturation to tint-tone-shade.

I personally understand monochromatic variations of a fixed hue as tint-tone-shade. This does not help me mix colors, but it gives me a firm handle on variations of one color.

If we start with a fully intense and fully saturated hue, we reduce the saturation by increasing the minimum value of R,G,B; and this has no effect on intensity. Conceptually, that should be the equivalent of mixing it with white. And that’s what I showed in the earlier post: that reducing the saturation produces a tint.

Similarly, if we start with a fully intense and fully saturated hue, we reduce the intensity by decreasing the maximum value of R,G,B. This should be the equivalent of mixing it with black light. I know, that isn’t really possible, but it’s what’s happening: reducing the intensity produces a shade.

(If we start with a color which is not fully saturated, to reduce the intensity while holding saturation constant requires that we change both the maximum and minimum values of R,G,B. All we have to do is keep the ratio minimum/maximum constant.)

Finally, if we start with a fully intense and fully saturated hue, we produce a tone by decreasing the saturation (i.e. by increasing the minimum value of R,G,B) and by decreasing the intensity (i.e. by decreasing the maximum value of R,G,B).

Let me summarize. In HSB, HSV, or HSI:

• a tint is fully intense but not fully saturated;
• a shade is fully saturated but not fully intense;
• a tone is neither fully saturated nor fully intense.

I encourage you to play with the color picker on your computer. Let it show you the HSB and RGB values for tints, tones, and shades.