Tints, tones and shades: what white, grey and black do to a colour

A tint is a colour that is mixed with white. Whereas, a shade is a colour that's mixed with black. A tone is a colour mixed with grey, which means white and black together. When you see that square in your colour picker, it's built from exactly these three mixes: tints, shades and tones. The words tints, tones and shades are used loosely, though, and sometimes the mixing itself can shift a colour's hue.

What are tints, tones and shades?

Think of it as a recipe with three ingredients: a pure colour, white and black. A tint uses two of them. A shade uses a different two. And a tone uses all three.

This isn't new. The American colour writer Faber Birren drew these mixes as a triangle, with pure colour, white and black at the three corners and the tones filling the middle. If you'd like a refresher with lots of examples, Canva's lesson on tints and shades (opens in a new tab) teaches the same recipe.

Worth knowing: the same triangle turns up in other colour systems too. In 1916 the German chemist Wilhelm Ostwald described every colour as a share of full colour, a share of white and a share of black, all adding up to the whole. The Swedish Natural Colour System (NCS), which paint and architecture people still use today, describes colours by their blackness and colourfulness, with one triangle for each hue.

Why is the square in your colour picker made of tints, shades and tones?

Because that's exactly what it was designed to copy. Back in 1978, Alvy Ray Smith (who later went on to co-found Pixar) published the colour model behind the hue, saturation and brightness (HSB) picker. In his paper (opens in a new tab) he says he wanted it to work the way an artist works: pick a pure colour, then add white for a tint, black for a shade, or grey for a tone. He took those ideas straight from Birren's Creative Color (1961).

And it really does match. I checked 10,000 random points, and every single colour in the square is a precise mix of three things: the pure colour in the top-right corner, white, and black. Two sliders do the mixing:

• Brightness sets the black. Brightness at 80% means 20% black.
• Saturation splits whatever is left between pure colour and white.

So saturation 40% and brightness 80% gives you 32% pure colour, 48% white and 20% black. That's a tone.

Once you know that, you can read the square like a map. The top edge, from white across to the pure colour, is all tints. The right edge, from the pure colour down to black, is all shades. Everything inside is a tone. The whole bottom edge is black, so the square is really a triangle with one side squashed flat.

That matters, because as of September 2026 neither Figma nor Canva has a "make a tint" button. The picker square is the tool you've already got. Just keep in mind that it mixes screen values, not paint, so a screen tint and a painted tint won't always match.

The words have been muddled for 170 years

If you've ever asked for "a shade lighter" and got something darker, you're not alone. People have been using the words tint and shade loosely for at least 170 years.

In 1855 Charles Martel was translating Michel-Eugène Chevreul's book on colour contrast into English, and he hit a snag. Chevreul had used one French word, tons, both for a colour lightened with white and for one darkened with black. English has two words for that, so Martel added a footnote to explain: tint and shade. Even Chevreul admitted that artists and everyday speech were pretty loose with colour words.

Fifty years later it had got worse. In 1905 the painter Albert Munsell was fed up with it. In A Color Notation (opens in a new tab) he complained that "shade" had turned into a word for any colour at all, which meant a "shade" of yellow could be lighter than a "tint" of blue. He didn't like "tone" either. To him it was a word from music that had no business in colour. That's part of why he built his own numbered colour system, so he could get away from words like these. Dictionaries still list the loose meanings today, such as "a bright shade of blue".

Why does "tone" mean something different in every app?

Because each field borrowed the word for its own job. "Tone" has at least four working meanings today, and the right one depends on who you're talking to. It's a bit like "biscuit", which is a sweet snack in Australia but a savoury scone in the American South. Nobody is wrong, you just need to know who's talking.

Adobe on its own uses "tint" three different ways across Illustrator, InDesign and Lightroom. And in Google's Material Design (opens in a new tab), "tone 40" is a lightness level, not a colour mixed with grey. So when a developer, a photographer and a painter all say "tone" in the same meeting, they can mean three different things. Ask which one they mean. It takes ten seconds and can save you a round of revisions.

A side note: the official colour dictionary skips these words altogether. The CIE, the international body behind the world's colour standards, keeps a vocabulary of lighting and colour terms, and it has no entry for "tint" or "tone". Its only entry for "shade" is a lamp shade.

Does adding white change a colour's hue?

It can, yes. Adding white lightens a colour, but it can also nudge its hue. On screen, how much it moves depends on the maths your tool uses to mix. In paint, it depends on the pigment.

You'd think "add 50% white" would always give the same result. It doesn't. Mix pure red with 50% white and you can end up with three different pinks:

Blue is the one that drifts the most. If you tint pure blue by 50% the way most colour pickers do, it slides about 16 degrees towards purple on a perceptual hue scale. You probably won't notice it on its own, but put it next to your original blue and you'll see it straight away. The W3C, who write the rules for colour on the web, even use white plus blue as a worked example in their own spec (opens in a new tab), and call the result "a bit purple". Reds drift a little too, towards a slightly cooler pink. Whereas yellow and green barely move at all. The browser's newer default mixing keeps blue looking blue.

So if your light blue button looks a bit off next to the logo, this is likely why.

Paint has its own version of the same problem. Johannes Itten, whose colour teaching still shapes design courses, wrote that white makes carmine red look bluish and makes yellow cooler. Paint makers will also tell you that white dulls a colour while it lightens it. Painters call that chalkiness.

If you want tints that hold their hue, have a look at Lighter versions of a colour without it turning purple. And if you're wondering why tools mix so differently in the first place, that's in Why your gradient goes muddy in the middle.

Dark yellow doesn't look like yellow

Nobody calls dark yellow "dark yellow". They call it olive, or khaki. In the same way, dark orange becomes brown. Darkness changes what a colour looks like and what we call it, even when the hue itself hasn't moved.

On screen, a shade of pure yellow really does keep its hue. I measured #808000, which is the 50% shade of pure yellow, on two perceptual scales, and its hue is exactly the same as #FFFF00. So the numbers say it's still yellow. Your eyes say olive.

Artists noticed this a long time ago. Itten wrote that black makes yellow look sickly. And in 1911 Wassily Kandinsky went as far as claiming there can never be a dark yellow. That's his opinion rather than science, but if you've ever tried to make a "darker brand yellow", you'll know exactly what he meant. Part of the reason is what's around the colour, because brown and olive only appear when there are lighter colours nearby. That effect gets its own article: The same colour looks different in different places.

Paint adds a second cause on top. Most black paints lean slightly blue, which can push a yellow towards green. Black also takes away colourfulness faster than it takes away lightness, as the colour educator David Briggs (opens in a new tab) explains, so a painted shade can turn muddy before it's even dark enough.

One more thing: transparency is not a tint. A colour at 50% opacity only looks like a tint when it sits on white. Over any other background, it mixes towards that background instead. So a 50% blue on a grey card turns a greyish blue, not a pale blue. If you want a light version that looks the same everywhere, use a solid colour.

What should you do differently in your next design?

Use tints, shades and tones as your starting point, and then check the result with your own eyes.

1. Read the picker square as a recipe. For a tint, keep brightness at 100% and lower the saturation, so you move along the top edge. For a shade, keep saturation at 100% and lower the brightness, so you move down the right edge. Anywhere inside is a tone.
2. Ask which "tone" people mean. A developer working with Material Design means lightness. A photographer means the light and dark across a photo. A painter means colour plus grey. Agree on the word before you try to agree on the colour.
3. Check every tint next to its parent. Blues and reds are the most likely to drift. If a blue tint looks purple beside the original, nudge the hue slider a few degrees back towards blue and compare again.
4. Darken yellows and oranges with a neighbour, not just black. As you lower the brightness, move the hue a little towards orange or red. It's an old painter's trick, and it's worth trying on screen whenever a dark yellow starts looking olive.
5. Use solid colours for light versions. Opacity only looks like a tint when it's on a white background.

Frequently asked questions

Is pink a tint of red?

Yes, in colour-mixing terms it is. Pink is what you get when you mix red with white, and that's the definition of a tint. English treats pink as a colour in its own right, though. It's one of the eleven basic colour names recognised in colour research. And because mixing red with white tends to cool it slightly, a lot of pinks lean a little towards purple.

Is brown just dark orange?

Mostly, yes. Most browns are dark, dulled oranges or yellow-oranges, and if you darken orange far enough people stop calling it orange at all. But brown also depends on what's around it. It only appears when something lighter is nearby. That's why the same darkened orange can look brown on a page but like a dim orange on its own.

Why does yellow turn green when you add black?

There are two things going on. In paint, most black pigments lean slightly blue, which can nudge yellow towards green. The bigger reason, though, is perception. Dark yellow just doesn't look like yellow to us, so we see it as olive. Even on a screen, where darkening yellow leaves its hue exactly where it was, the result looks khaki or olive. To keep it golden, darken yellow with a little red-brown instead of black.

Why do my shades look muddy?

Because black takes colourfulness out of a colour faster than it takes out lightness. So a shade can go dull and greyish before it's dark enough, and that dullness is what reads as muddy. Painters often darken with a deeper neighbouring colour instead, like a red with a deep crimson or purple, or a yellow with an orange-brown. The colour gets darker without losing its character, and the same idea works on screen.

Does adding white make a colour cooler?

Often, but not always. Adding white can shift a colour's hue as well as lighten it. Reds tend to drift towards a cooler, bluish pink, and Johannes Itten noticed that white cools yellow too. On screen, some ways of mixing push a tinted blue towards purple. How much a colour shifts depends on the pigment or the maths, so it's worth judging each tint by eye.

For the curious

The picker's colour model is HSV, also called HSB, from Smith's 1978 paper "Color Gamut Transform Pairs". A colour with saturation S and brightness B is S×B pure hue, (1−S)×B white and (1−B) black. In 1996 Smith and Eric Ray Lyons named those amounts directly in HWB (hue, whiteness, blackness), and CSS now has it as hwb().

The three pinks come from averaging in three different spaces: gamma-encoded sRGB (the picker, hwb() and color-mix(in srgb)), linear-light sRGB, and Oklab. CSS Color Module Level 5 (Working Draft, 13 September 2026) makes Oklab the default for color-mix() when no space is named. I measured drift as OKLCH hue angle and checked every mix with two libraries, colour-science and colorjs.io: blue +16°, crimson −12°, yellow under 1°. The same spec notes that mixing white and black 50/50 in sRGB gives #808080, CIELAB L* 53.4, which it calls "a bit too light".

The hue shift you get from adding white is called the Abney effect, and William Abney first measured it in 1909. There's also the Bezold–Brücke effect, which says a hue can look different at different light levels. That's why I say a darkened pure yellow keeps its hue "by the numbers". Material Design's tone is CIELAB L* inside its HCT colour space. Paint mixing needs a different model entirely, usually Kubelka–Munk.

Sources (18)

• Alvy Ray Smith, "Color Gamut Transform Pairs" (opens in a new tab), SIGGRAPH 78 Proceedings, 1978
• Alvy Ray Smith and Eric Ray Lyons, "HWB: A More Intuitive Hue-Based Color Model" (opens in a new tab), Journal of Graphics Tools 1(1), 1996
• M. E. Chevreul, trans. Charles Martel, The Principles of Harmony and Contrast of Colours (opens in a new tab), 2nd edn, 1855, paras 146–153
• Albert H. Munsell, A Color Notation (opens in a new tab), 1905 (Project Gutenberg, 2nd edn)
• Faber Birren, Creative Color, Van Nostrand Reinhold, 1961
• Johannes Itten, The Art of Color, 1961, and The Elements of Color, ed. Faber Birren, 1970
• Wilhelm Ostwald, The Color Primer, ed. Faber Birren, 1969 (original 1916)
• NCS Colour AB, "The NCS System" (opens in a new tab)
• Wassily Kandinsky, Concerning the Spiritual in Art (opens in a new tab), trans. M. Sadleir, 1914 (original 1911)
• W3C, CSS Color Module Level 5 (opens in a new tab), Working Draft, 13 September 2026
• W3C, CSS Color Module Level 4 (opens in a new tab), Candidate Recommendation Draft, 13 September 2026
• James O'Leary, "The Science of Color & Design" (opens in a new tab), Google Material Design, 2022
• Adobe, "Create and edit tints" (opens in a new tab) (InDesign), "Color Guide panel overview" (opens in a new tab) (Illustrator) and "Adjust image tone and color" (opens in a new tab) (Lightroom Classic)
• CIE, Abney phenomenon, term 17-22-070 (opens in a new tab), and basic colour names, term 17-22-057 (opens in a new tab), CIE S 017:2020
• W. de W. Abney, "On the change in hue of spectrum colours by dilution with white light", Proceedings of the Royal Society A 83, 1909
• David Briggs, "The Dimensions of Colour: paint-mixing principles" (opens in a new tab)
• Sarah Sands, "The Subtleties of Color" (opens in a new tab), Golden Artist Colors, 2009, updated 2021
• Merriam-Webster, "shade" (opens in a new tab) and "tint" (opens in a new tab), retrieved 19 September 2026