A color's family: tint, shade, and tone

Short answer

Adding white to a color turns it into a tint, adding black turns it into a shade, and adding gray turns it into a tone; together these three make up that color's family and form the basis of consistent palettes in design. There are two reasons adding black to yellow produces olive green: most real black paints lean slightly toward blue and push the mixture toward green; and the eye no longer calls a darkened yellow "yellow," but names it olive or brown instead. That's why building a tone family takes more than just mixing; you need to check each step by eye and correct the hue if needed.

Three paths, three family members

In English color language, a color's family is described with three words: tint, shade, and tone. The established Turkish equivalents are açık ton ("light tone"), koyu ton ("dark tone"), and kırık ton ("broken tone"). All three are produced by adding an achromatic color to the same starting color — the pure or base color.

These three paths change two of DT-01's three dimensions at once. Adding white raises lightness while lowering saturation. Adding black lowers both lightness and saturation. Adding gray lowers saturation, while lightness shifts up or down depending on the gray's own lightness. That's why the achromatic colors covered in DT-06 are the invisible partner of every color family.

The word "tone" causes confusion of its own. In English, "hue" means a color's position on the color wheel and "tone" means a color with gray added; because Turkish can use ton for both, using kırık ton ("broken tone") for the gray-added meaning avoids that confusion.

Building a tone family step by step

For a design, the way to build a family from a single color is to choose a starting color and produce steps in three directions.

The first step is to determine the starting color. This is the family's "mother" — its most saturated and most characteristic member. The second step is to produce the tints: white is added to the starting color at twenty-five, fifty, and seventy-five percent. The third step is to produce the shades: black is added at the same proportions. The fourth step, if wanted, is to produce the tones with a medium-lightness gray.

The fifth step is the most important: line up the steps side by side and check them by eye. Steps mixed in equal proportions don't look like equal steps to the eye; especially on the dark side, the first few steps make large jumps and the later ones move closer together. In some colors, the hue also shifts as the steps progress. That's why the final step is to correct the proportions and the hue by hand if needed.

Why does adding black to yellow produce olive?

The question on the lesson card is the most striking example of the hue shift that adding black can cause. Two different reasons work together.

The first reason is material. Real black paints aren't perfectly neutral; as DT-06 shows, a perfectly flat reflectance curve doesn't exist in everyday materials. Many of the black pigments painters use carry a slightly bluish or cool bias. Yellow pigment reflects red and green light and absorbs blue; when a bluish black is mixed into it, the mixture gets pushed toward green. That's why, on a painter's palette, mixing yellow with black yields an olive that's more or less greenish depending on the pigments used.

The second reason is perceptual, and more surprising. Assume black is perfectly neutral and that only the light is being reduced; on screen, turning down all channels of pure yellow by the same proportion does exactly that. Doing the math, reducing pure yellow's (#FFFF00) light by eighty percent gives #7C7C00. Measured by OKLab's hue angle, the two colors have the same hue, 110 degrees. But no one calls #7C7C00 "dark yellow"; to the eye it looks like olive green or mustard brown. In the same way, the darkened version of orange (#FF8000), #7C3B00, turns into brown with its hue angle unchanged.

The reason is that the perception of "yellow" and "orange" exists only within a certain range of lightness. Yellow is, by its nature, a bright color. When its lightness drops noticeably relative to its surroundings, the eye no longer places it in the yellow category; it calls it olive, khaki, or brown. Brown is especially interesting from this angle: there's no brown light in the spectrum. Brown is a perception that arises when an orange or yellow surface looks dark relative to its surroundings.

In other words, adding black to yellow changes the color's category even when the hue doesn't shift; in real paints, an actual hue shift is added on top of that.

The hue shift from adding white

Like black, white can also shift hue, but by a different route. When white light is added to a color, the perceived hue shifts too; William de Wiveleslie Abney described this effect in 1910, and today it's known by his name.

This effect shows up on screen too. Mixing pure blue (#0000FF) half-and-half with white gives #BCBCFF; OKLab's hue angle shifts from 264 degrees to 284 degrees, meaning the tint looks noticeably purplish. Mixing red with white also turns the hue slightly toward pink. That's why, when producing a blue's tints, designers often nudge the hue back toward cyan so the family still reads as "the same blue." Turning these kinds of corrections into tone scales in software is the subject of UX-01.

Example — a foundation shade range

A cosmetics brand wants to start from a light foundation shade and produce darker shades for darker skin tones. The easiest route is to darken the light shade by mixing it with black or a dark gray. The math shows why this route is a problem.

The example light skin tone, #F1C7A9, has roughly 0.86 lightness, 0.063 chroma, and a 57-degree hue angle in OKLab. Darkening this color by reducing its light — that is, darkening it with a neutral black — down to 0.32 lightness gives #3D3128: the hue angle is still 57 degrees, but the chroma has dropped to 0.024. For comparison, the dark skin tone example used in BI-19, #4A2C1D, has roughly the same lightness with 0.051 chroma and a 47-degree hue angle. The color darkened with black has less than half the chroma of the real dark skin tone example and leans slightly more yellow; on skin, it gives a gray, washed-out look — what Turkish cosmetics language calls küllü ("ashy").

The lesson here is this: dark skin tones aren't the shades of light skin tones. They have their own chroma, their own undertones. When building a tone family, adding black lowers lightness but also lowers the color's vividness; for the dark members to still look vivid, the chroma and hue need to be adjusted separately. This rule holds for every color family, but with skin tones it calls for extra care, because the result shows up on a person's face.

Common misconception

Summary

1. A color's family consists of the tint lightened with white, the shade darkened with black, and the tone broken with gray; all three change lightness and saturation together.
2. Adding black to yellow produces olive, because real blacks usually lean toward blue and the eye names a darkened yellow olive or brown instead of yellow; the color's category changes even if the hue doesn't shift at all.
3. Adding white can also shift the hue through the Abney effect; for a consistent tone family, the steps are checked by eye, and chroma and hue are adjusted alongside lightness. Dark skin tone colors aren't the darkened version of light skin tones.

Test yourself

1. (Easy) What are the Turkish names for the three members produced by adding white, black, and gray to a color?
2. (Easy) Why is kırık ton preferred as the Turkish equivalent of the word "tone"?
3. (Medium) Why does adding black to yellow produce olive green?
4. (Medium) What is the Abney effect, and how does it affect a blue's tints?
5. (Hard) Even though the hue angle doesn't change in the calculation, why isn't #7C7C00 seen as yellow?
6. (Hard) Why is it a problem to produce colors for dark skin tones by darkening a light foundation shade with black?

Answers

1. Açık ton, koyu ton, and kırık ton ("Three paths, three family members").
2. Because in Turkish the word ton can be used for both "hue" and "tone"; the kırık ton equivalent keeps the gray-added color distinct from hue ("Three paths, three family members").
3. Most real black pigments lean slightly toward blue and push the color toward green when mixed with yellow; the eye also no longer places a yellow with lowered lightness in the yellow category, naming it olive or khaki instead ("Why does adding black to yellow produce olive?").
4. It's the shift in perceived hue that occurs when white light is added to a color and its saturation is lowered; when pure blue is mixed with white, its tints turn toward purple ("The hue shift from adding white").
5. The perception of yellow exists only within a certain range of lightness; a yellow whose lightness drops noticeably relative to its surroundings is perceived and named as olive or brown, even if its hue stays the same ("Why does adding black to yellow produce olive?").
6. Darkening with black keeps the hue but lowers the chroma sharply; in the example, chroma drops to 0.024, while the real dark skin tone example has 0.051 and a slightly more reddish hue. The result looks gray and washed out on skin; dark skin tone colors need their own chroma and undertone adjusted separately ("Example — a foundation shade range").

Sources

• Fuld, K., Werner, J. S., and Wooten, B. R., "The possible elemental nature of brown," Vision Research 23: 631–637, 1983.
• Quinn, P. C., Rosano, J. L., and Wooten, B. R., "Evidence that brown is not an elemental color," Perception & Psychophysics, 1988.
• Abney, W. de W., "On the change in hue of spectrum colours by dilution with white light," Proceedings of the Royal Society of London, Series A 83: 120–127, 1910.

Next step

DT-09 turns this lesson's single-hue family into a harmony method: it covers monochromatic harmony, built from a single hue's tint, shade, and tone members, analogous harmony between colors that sit next to each other on the wheel, and avoiding monotony in these harmonies by using value and texture. UX-01, meanwhile, carries the tone family into code: it covers tone scales running from 50 to 900, the move from a raw palette to meaningful color tokens, and keeping design and code in sync.