In this article I'd like to deal with some complexities that were omitted in my Simple Formulas for Calculating Tints and Shades. These complications arise when one attempts a more exact treatment of color saturation.

I should point out that here, as in my previous examination of color, I intend to treat only the mathematics of color--whether or not it corresponds to the way in which we perceive it. So, for example, mixing 50% black (#000) with 50% white (#fff) just is the specific gray specified by the rgb value #808080. It is a different issue whether the human eye perceives this gray to be halfway between white and black. While the possible discrepancy in this case may seem insignificant, it can become noticeable when we step through the various shades one step at a time. The following grayscale begins with black and increases the amount of white by 10% at each step:

Most people will likely perceive some of these steps as larger than others, although the difference in the numeric values is the same each time (with negligible exceptions due to rounding). The distance between the steps, however, isn't the important issue here. I'm concerned here only with determining which specific rgb values belong to the range of tints and shades of a particular coloer and which ones don't.

Saturation

I'm going to call rgb colors saturated when 1) the maximum of the 3 rgb values is 255 and 2) the minimum of these values is 0. Any rgb color that is not itself a graytone can be represented uniquely as a mixture of gray and a fully saturated color. Let's take the 3-tuple (a0, b0, c0) to be the rgb representation of a color other than gray, 0 <= g <= 255, and 0 <= p <= 1. g is going to represent the desired shade of gray, and p is going to be the percent of a saturated color present in a mixture that yields (a0, b0, c0). Since we know that (a0, b0, c0) is not a shade of gray, we can for ease of calculation permute the values so that a0 >= b0 >= c0 and a0 > c0. We then get the equations:

a0 = (p * 255) + ((1 - p) * g)
b0 = (p * b_sat) + ((1 - p) * g)
c0 = (1 - p) * g

We have 3 unknowns here (p, g and b_sat) and 3 equations, so we have a unique solution for p, g and b_sat as long as the equations are independent, as they clearly are when a0 > b0 > c0 (and when b0 = a0 or b0 = c0 we get 2 independent equations with 2 unknowns).

The spreadsheet zipped up in gui_color_1_0.zip solves these equations in 2 steps: First, I extract all black from the original color (just like the simple spreadsheet), then I extract all white from the result of the black extraction (unlike the simple spreadsheet). I'll leave it to the reader to verify that these steps amount to extracting gray. They also yield numbers that make it easy to figure the proportions of gray and saturated color present in the original unsaturated color. Here are some saturation ranges for the same set of colors I used in the previous version. The saturation level nearest the original color is indicated by a dotted border. Also note that the "gray" for the melon and for the green is actually white--i.e., no black was present in the orginal color.

It's interesting to see here how brown results from mixing gray (71.8%) with orange (28.2%).

Also worth noting is that any given saturated color will have different "desaturation paths" depending on which shade of gray we use in the desaturation mix. So, we can't simply desaturate a given color but instead can only desaturate it using a particular gray-tone.