Color: HSB and tint-tone-shade

Enough about different colors, for now. What about different forms of one color? Artists have some simple terminology for that. If you take some color of paint and mix it with white, you get a lighter form of that color; this is called a tint of that color. If you take some color of paint and mix it with black, you get a darker form of that color: this is called a shade. In other words, light red is not — technically speaking — a shade of red, but a tint of red.

If, on the other hand, you take some color of paint and mix it with both white and black — that is, you mix it with gray, whether light or dark — this is called a tone.

If your memory is as bad as mine, you might want to note the corresponding vowels: white and tint, black and shade, both and tone. (And that correspondence is precisely why I say “both” instead of “gray”,)

One of the reasons I like the HSB color wheel is that its colors can be interpreted as tints, tones, and shades. Oh, let me show you two different forms of it. The large disc at the beginning of the previous post was at full brightness. There was a slider to the right which would have given me a darker color wheel. For example:


Here is a chart I drew when I was first playing with the HSB color wheel on my computer.


It was drawn so that (S,B) corresponded to (x,y) coordinates. Our fully saturated and bright color is orange, in the upper right corner with coordinates (S,B) = (100, 100). Oh, please don’t panic because these numbers range from 0-100 instead of 0-1. A minor detail.

We move to the left by holding brightness constant and decreasing the saturation. We are creating tints, mixing orange with white. That is, the top middle two boxes are tints of orange. (To get pure white, we used zero orange: a saturation of zero.)

Alternatively, we move down by holding saturation constant and decreasing the brightness. We are creating shades, mixing orange with black. The two middle boxes on the right are shades of orange. (In this case, we end up with black at the bottom regardless of the saturation.)

On the x-axis, with a brightness of zero, we have black. On the y-axis, with a saturation of zero, we have grays (with white and black at the extremes).

There are four intermediate rectangles, with saturation and brightness strictly between 0 and 100. These are tones.

This is a good beginning. Tints, tones, and shades make sense to me.

There is, in fact, a color picker which incorporates this.


The problem is, that color picker varies so smoothly that I find it difficult to use. Okay, let’s take a closer look.

(I find that I myself use my blog for reference. I’m putting these images out here as much so that I can find them quickly, as to show them to you. They are not quantitative in the same sense as most of my examples, but examples they are, and quantitative to boot.)

One simple thing we can do is construct light orange and dark orange; that is, tints and shades. This is similar to what the “Color Harmony Workbook” shows on the artist’s color wheel: not just pure orange, but lighter and darker as well.


A plausible next drawing would be of tones, specifically tones with equal amounts of black and white, i.e. with B = S.


Then I did three drawings each with a constant brightness. In retrospect I’m not sure why I didn’t do constant saturation. In any case, here is brightness = 35…


brightness = 50…


and brightness = 80…


These last two posts have been largely about specifying color on a computer. Well, the artist’s color wheel should be used for choosing color combinations; the TV color wheel is almost certainly familiar because of RGB monitors; the HSB description of the TV color wheel works better for me, for specifying color.

Over the years, as I may have indicated before, I have referred to the other color wheel by various names, none of which are satisfactory to me. I have called it the mixing color wheel, the printers color wheel, or the TV color wheel. Let me try one more: 12 color HSB. After all, that’s how I got those 12 colors — the HSB hues 0°, 30°, 60°, …, 330°.

Maybe I should just call it “the other color wheel”. I simply chose to construct my versions of it from the HSB color wheel in particular. It actually leads to two greens that are virtually indistinguishable to my vision.

So, I constructed the other color wheel by choosing fully saturated and fully bright colors from HSB, every 30°. For the artists color wheel, in contrast, I used the CMYK specifications from the back of the “Color Harmony Workbook”.

I anticipate that the next color posts — whenever they occur — will be quite different. I expect to put a spectral distribution of light into the eye of a “standard observer”, compute the resulting RGB signal, and the dominant wavelength, and whatever else I can handle.

But that will be down the road.

(Actually, I probably need to make some comments about the first of these three color posts.)

Posted in color. 7 Comments »

7 Responses to “Color: HSB and tint-tone-shade”

  1. Deb in Idaho Says:

    this article has been immensely helpful. Thank you so much

  2. rip Says:

    Hi Deb,

    I don’t know why it took me so long to remember my manners.

    You’re quite welcome.

    Thanks for the comment — and please feel free to ask questions.


  3. daniel Says:


    Perhaps the only Color System well adapted to show Birren’s Color Triangle is NCS, because the independent variables of this 3D color system are : Hue, Whiteness and Chromaticness. No one else can show Birren’s concepts easily

    It is not adequate HSB because you cannot focus desired actions to get : tint, shade, tone to the HSB’s independent variables

    The concept of Saturation in HSB is a little bit distant from “intuitive wavelength color purity”, as its defined in HSB as :

    S% = (MAX-MIN) / MAX . 100 (with r,g,b є [0,1]
    MAX = MAX(r,g,b)
    MIN = MIN(r,g,b)

    Also happened the for Brightness in HSB, poorly correlated with the V (Value Concept) in the Perceptual Model HVC (Munsell), Brightness B(HSB) coincides with V(HVC) only for achromatic colors, and it is defined in HSB as :

    B% = MAX . 100 (with r,g,b є [0,1])
    MAX = MAX(r,g,b)

    At the beginning of the Birren’s experiment we have to have into account that : Starting with the pure color, adding : White / Black / Gray, to our original color will reduce the Saturation, just because color information have been degraded

    So if we try to find a correlation between Birren’s Triangle and HSB Model we have :

    Beginning with the pure color in the Color Vertex : HSB = H Smax Bmax

    To get a Tint (Color+White) : Maintaining H & B constant, you get the whole Tint Series just reducing S

    But to get a Shade (Color+Black) : It is not true that it can be sequenced by reducing B, maintaining S constant, instead of that B & S should be reduced

    To get a Tone (Color+Gray) : S should be reduced, and B should be augmented or reduced or not affected, depending on Gray Brightness and Color Brightness

    When you maintain S constant, varying B, you get the Shadow Series, described in Pages 60/62, paragraph “Tint, Tone, Shade” in PRINCIPLES OF COLOR (Faber Birren)

    In a similar way, using HVC (Munsell) Model :

    To get a Tint : You have to increase Value (V) and reduce C (Chroma)
    To get a Shade : You have to reduce V & C
    To get a Tone : You have to reduce C and increase, reduce or maintain V depending on Color V and Gray V


  4. rip Says:

    Hi Daniel,

    Let me say a couple of things up front. One, thank you for taking the time to talk about this with me.

    Two, I am learning from our discussions. I certainly wouldn’t have bought three books by Birren, and might not have bought the other two books,had it not been for your discussion of “shadow series” and “hue shift”.

    Three, I will have to put out some blog posts to elaborate on my answers — so my answers to your two recent comments may seem a bit brusque. I do not mean to put you off, but I do mean to give fuller answers in full blog posts.

    Four, we agree on some things but not on others.

    For other readers, let me say that “Birren’s triangle” refers to his triangular display of tint-tone-shade. I believe the original idea for describing all colors as mixtures of black-white-color is due to Ostwald. “NCS” refers to the “Swedish National Color System“.

    Daniel said:

    Perhaps the only Color System well adapted to show Birren’s Color Triangle is NCS, because the independent variables of this 3D color system are : Hue, Whiteness and Chromaticness. No one else can show Birren’s concepts easily

    I hope you meant to say blackness, whiteness, and chromaticness, since chromaticness is the hue variable.

    I certainly agree that NCS is particularly well adapted to Birren’s (Ostwald’s) color triangle. That they use Hering’s four psychological primaries is an interesting addition, but should not affect Birren’s single-hue triangles. They have taken his mixture (color-black-white) and added another layer: any pure color is a mixture of the four psychological primaries red, greem, blue, yellow.

    It may also be true that no other scheme can represent NCS (or Birren) but I’m not prepared to say that.

    Daniel then said:

    It is not adequate HSB because you cannot focus desired actions to get : tint, shade, tone to the HSB’s independent variables

    As I showed in this post, I have definitions of tint-tone-shade which work very well in HSB. That they do not match Birren’s color triangle, or the Swedish NCS, doesn’t bother me in the least — now that I know they do not match. And I pretty much agree with you that they cannot be made to match (though the failure to find a way doesn’t prove there isn’t one).

    Your subsequent exposition of S and H in the HSB color space is accurate. I was, however, surprised to see you introduce the Munsell — since it cannot be reconciled with NCS. It would be hasty of me to assume that the Munsell cannot be reconciled with Birren’s color triangle, but that it cannot be reconciled with NCS raises doubts in my mind.

    I’ll know more when I understand Munsell better. BTW, my source for NCS / Munsell is Fairchild, pp. 101-102:

    “Thus there is no direct relationship between Munsell chroma and NCS chromaticness. Likewise, there is no simple relationship between Munsell value and NCS blackness…. The Munsell and NCS systems represent two different ways to specify perceptual color appearance. It is not possible to say that one is better than the other, it can only be stated that the two are different. This was recently reaffirmed in the report of CIE TC1-31…, which was requested by ISO to recommend a single color order system as an international standard along with techniques to convert from one to another. This international committee of experts concluded that such a task is impossible.”

    You then illustrated some of the difficulties in trying to reconcile Birren’s color triangle with HSB. I already agree that the tint-tone-shade model which works in HSB cannot be used for Birren’s triangle. I just choose to use the same terminology for related concepts in another color space.

    Daniel mentioned Birren’s shadow series:

    When you maintain S constant, varying B, you get the Shadow Series, described in Pages 60/62, paragraph “Tint, Tone, Shade” in PRINCIPLES OF COLOR (Faber Birren)

    I would like to emphasize that Birren’s recipe for creating shadow series, which he says are “uniform chroma” is not a general recipe for creating tones, but a recipe for creating a particular family of tones.

    I would also like to ask, what the heck is Birren’s S?

    And thanks for the introduction to Munsell.

    In summary, I agree that HSB intensity and saturation cannot be correlated with whiteness and blackness. On the other hand, I think it is appropriate to use similar terminology for different things in color order systems which cannot be reconciled. Tint-tone-shade cannot be made to correspond between HSB and Birren, but the concept is too useful for me to abandon it, especially since I specify colors on my computer using HSB!

    (I cannot imagine that I will ever do one of Birren’s experiments, painting a disk with color and black and white, and then spinning it to see what color I get.)

  5. daniel Says:


    NCS variables are : Hue, blackness or whiteness (is the same variable) and Chromaticness, Chromaticness is related in some way (despite Fairchild 🙂 ) with Munsell’s Chroma

    I introduced Munsell in our conversation because it was conceived as a Perceptual Color Catalogue, where variables are equal spaced in perceptual steps for a standard observer, and it is a reference for biologists, geologist, etc., I’m a painter (at spare time) and is my reference too. I also use, as you do, HSB, because it is an excellent painter tool to get Shadow Series (varying B with SB constant)

    What the heck is Birren’s S? I think you are asking about the “S” I wrote : I was using S(HSB)

    Rip : Thanks a lot for your blog, I appreciate it a lot, sorry if I seemed to act as in a forum, it was not my intention, perhaps it could be useful to open a private post channel to avoid conversations appearing as debates


  6. rip Says:

    Hi Daniel,

    Yes, you’re right about the NCS variables — I was forgetting that I pick the hue before I draw the triangle, which has b,w,c… and those three add up to 1.

    This material is so scattered all over the place that it is difficult not to rely on one author (e.g. Fairchild) for any one point — but I’m beginning to see that there are a lot of points of view in this field, and I need to be more widely read.

    I am also beginning to think that it is difficult to cope with more than a couple of ideas in a comment. When I print one out, and start outlining it in order to reply… there’s too much there. And there will be too much in my reply.

    Nevertheless, I’m enjoying this dialogue.

  7. Inkscape | Sam Mela Software Says:

    […] Color: HSB and tint-tone-shade […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: