Tints, Shades, and Tones: What’s the Difference?

Tint, shade, and tone are often used as if they all mean “a lighter or darker version of a color.” They do not. Each describes a specific mixture: add white and you make a tint; add black and you make a shade; add gray and you make a tone. That distinction is simple, but it explains why some color scales feel fresh, some feel heavy, and some feel quietly muted.

This guide explains the three terms, then measures what each mixture does to real colors: how far the hue drifts, how much chroma (how vivid it is) is lost, and what happens to contrast. Those numbers show which mixture fits a pale background, a pressed button, or a quiet label that must stay readable.

The three definitions

• Tint = hue + white. A tint moves a color toward white. It becomes lighter and its chroma decreases: red becomes pink, blue becomes powder blue, green becomes mint.
• Shade = hue + black. A shade moves a color toward black. It becomes darker and usually feels deeper or heavier: red becomes burgundy, blue becomes navy, green becomes forest green.
• Tone = hue + gray. A tone moves a color toward a neutral gray. It becomes less vivid without necessarily becoming extremely light or dark: bright blue becomes slate blue; orange becomes terracotta.

The starting color is the hue — the color family itself. Tinting, shading, and toning change how that hue behaves without replacing it with a different family. Rotate blue toward green and you have changed the hue; mix blue toward white, black, or gray and you are modifying the same hue.

A side-by-side example

Start with blue #3366CC. In a simple 50/50 sRGB mix:

• Mixed with white, it becomes the tint #99B3E6 — light, airy, useful for backgrounds.
• Mixed with black, it becomes the shade #1A3366 — dark, dense, useful for headings or deep surfaces.
• Mixed with middle gray, it becomes the tone #5A73A6 — quieter, less saturated, useful for secondary elements.

All three still read as blue, but they do different jobs. A tint creates space, a shade creates weight, and a tone reduces visual noise.

Measured in OKLCH, a color space designed so that changes in lightness look more even, all three mixtures roughly halve the blue’s chroma: the tint keeps 47%, the shade 57%, and the tone 51%. Lightness is what separates them. The tint climbs from L 0.53 to 0.77 and the shade falls to 0.33, while the tone barely moves, to 0.56. So only the tone stays closest to the base blue’s 5.37:1 contrast against white: it measures 4.73:1, against 2.11:1 for the tint and 12.29:1 for the shade.

The amount of the mixture matters

Tint, shade, and tone describe the direction of travel, not one fixed result. A color with a small amount of white and the same color mixed almost completely into white are both tints. The first may still work as a button; the second may be suitable only for a quiet background. “Add white” is therefore a definition, while “mix 20% toward white” is a recipe.

Be explicit about which percentage your tool reports. Some interfaces label the amount of the original hue, while others label the amount of white, black, or gray being added. A swatch described as an “80% tint” could mean mostly blue in one tool and mostly white in another. Record the final color value alongside the percentage and keep one convention inside a project. The HEX value removes the ambiguity even when the naming does not. In this guide, a percentage always means the share of white, black, or gray.

Why tone is the one people forget

Tints and shades are easy to recognize because they sit at the obvious ends of a light-to-dark scale. Tones occupy the middle ground. They are the dusty rose, sage, denim, clay, and slate colors that feel restrained rather than pastel or nearly black.

That restraint makes tones especially useful in interfaces and brand systems. A vivid brand color may work for a primary button but overwhelm a large card, illustration, or data series. Toning it down preserves the color identity while letting surrounding content take priority, and the same restraint applies to chart series; see Data Visualization Color Palettes. Tones are also how a palette gains range without adding unrelated hues. One caveat: the gray you mix in is rarely neutral. A warm gray pulls the result toward earth, a cool gray toward slate, so the tone inherits a temperature; warm vs. cool colors covers how warm and cool undertones set a palette’s temperature.

Traditional mixing vs digital color

The definitions come from paint, where white, black, or gray pigment is physically mixed into another pigment. Screens do not contain paint, so design software reproduces the idea by interpolating color values. The result depends on the color space used for that interpolation.

To see how much the route matters, we made a “20% tint” of #3366CC three ways. All three are available in CSS through color-mix(), and Chrome returned the same HEX values as our script:

• sRGB, color-mix(in srgb, #3366CC 80%, white), averages the familiar channel numbers: #5C85D6, 3.63:1 against white.
• Linear-light sRGB, in srgb-linear, averages amounts of light instead: #8396D7, 2.87:1. That is lighter than a 25% sRGB tint, and the hue has moved 8.8° toward purple.
• OKLab, in oklab, mixes in a perceptual space: #5A86D9, 3.59:1, with the hue held within a fraction of a degree.

This is why two apps can produce different “20% tints” from the same HEX code. The label describes the destination; the color space determines the route. Write the method next to the value, as in “20% white, sRGB,” and keep the final HEX in your token file. For a practical explanation of these models, see HEX, RGB, HSL, and OKLCH Explained.

Tints drift in hue; shades mostly do not

Mixing with white in sRGB scales every channel down by the same factor and then adds the same amount to each, which changes the proportions between them. For moderate colors the effect is small: a 50% sRGB tint of #3366CC moves 1.3° in OKLCH hue, and teal #008080 moves 1.1°. For vivid colors near the edge of the sRGB range it is much larger:

• Pure blue #0000FF mixed 50% with white gives #8080FF, 16.1° closer to purple. The OKLab mix, #74A3FF, stays within 1.3° of the original hue.
• Crimson #DC143C gives #EE8A9E, 12.4° toward magenta, where OKLab gives #F89C9B.
• Dark orange #FF8C00 gives #FFC680, 13.0° toward yellow, where OKLab gives #FFC89B.

Tones made with #808080 drift the same way, slightly less: 11.5° for pure blue, 9.9° for crimson, and 10.5° for dark orange at 50%. Shades are different. Mixing with black multiplies every channel by the same factor, so the proportions stay put and the hue mostly holds: up to 75% black, seven of our nine test colors stayed within 3°. Crimson (5.2°) and dark orange (7.3°) drifted more at 75%, because the sRGB curve is not a pure power curve and bends the proportions of very dark colors.

So if a light background has to read as the same hue as a vivid brand color beside it, make the tint in OKLab, for example with color-mix(in oklab, …), instead of averaging sRGB channels. And if a dark gold looks olive, hue drift is not the cause: the 50% shade of gold #FFD700, #806C00, sits within 1° of the original hue. For a warmer dark gold, rotate the hue toward orange on purpose.

Pick the gray before you make a tone

“Add gray” leaves out which gray. Middle gray #808080, used in the example above, measures 3.95:1 against white, so it is lighter than any color that passes the 4.5:1 body-text minimum there. Toning toward it can pull a color lighter as well as grayer. #3366CC drops from 5.37:1 to 4.73:1 at 50% and to 4.33:1 at 75%, below 4.5:1. Royal blue #4169E1 already fails at 50%, going from 4.85:1 to 4.48:1. Six of our nine test colors lost contrast this way.

The fix is to tone toward a gray with the same luminance as the color, which in WCAG terms is a gray with the same contrast ratio against white. For #3366CC that gray is #6B6B6B (5.33:1). Every mix between the two, from 5% to 95%, stayed between 5.35:1 and 5.53:1, while chroma fell about as fast as it did with middle gray. Across all nine colors, tones toward their own equal-luminance gray never dropped more than 0.02 below the starting ratio; they usually rose, by as much as 2.4 for pure blue (8.59:1 to 11.01:1), because an sRGB average comes out darker than the average of two equal-luminance colors. To find the gray, try grays in the Contrast Checker until the ratio against white matches your color.

This is where a tone earns its place. Secondary labels, inactive tabs, metadata, and supporting chart series should look quieter than the main color without becoming unreadable. A 50% tint of #3366CC is quieter but fails at 2.11:1; a 50% shade passes at 12.29:1 but adds weight instead of removing it. A 50% tone toward #6B6B6B halves the chroma and keeps 5.48:1. For warm and cool grays, undertone matching, and building a complete neutral scale, see how to choose a neutral and gray color palette.

Hover and pressed states: pick a lightness step, not a percentage

A rule such as “darken by 10% on hover” sounds consistent, but the same amount of black moves different colors by different amounts. Mixing in 10% black lowered OKLCH lightness by 0.066 for gold but only 0.030 for rebeccapurple #663399. The drop was always about 7% of the starting lightness (6.9% to 7.5%), so light colors move furthest. For the same 0.05 step, gold needed 8% black and rebeccapurple 17%; for a 0.10 step, 15% and 32%.

Black mixes also dull a color as they darken it. At the same 0.10 drop in lightness, the black mix of #3366CC keeps 79% of its chroma, while lowering its OKLCH lightness directly keeps all of it (black mix #264B97, lightness-only #1747AB). Royal blue, rebeccapurple, and sea green behaved the same way. For colors near the edge of the sRGB gamut (pure blue, crimson, dark orange, gold, and teal), there is little chroma to spare, and the two methods differed by six percentage points or less.

Label contrast moves too. White text on #3366CC rises from 5.37:1 to 8.31:1 at the 0.10 step, but black text on a light button falls: from 14.97:1 to 10.77:1 on gold, and from 9.00:1 to 6.20:1 on dark orange. A light button whose label starts near 4.5:1 can fail once pressed. Choose the step sizes once, such as 0.05 of OKLCH lightness for hover and 0.10 for pressed, and derive each color’s states from them. If your tool only mixes with black, vary the percentage per color.

Text on a tint of the same color

Notices, badges, and selected rows often put a color’s text on a pale tint of itself, and that costs more contrast than it seems. #3366CC text keeps 4.70:1 on its 90% tint #EBF0FA but drops to 4.05:1 on the 80% tint #D6E0F5. Across the six test colors that pass on white, the 90% tint cost between 12% and 18% of the ratio.

That is enough to sink any color with a thin margin. Royal blue (4.85:1 on white), crimson (4.99:1), and teal (4.77:1) all fail on their own 90% tints, at 4.26:1, 4.25:1, and 4.17:1. A 4% to 5% shade of the text color (#3E65D8, #D3133A, #007A7A) was enough to pass again. Light colors need far more: dark orange text needed a 34% shade (#A85C00) and gold a 47% shade (#877200). For text on a tinted surface, reach for a shade of the same hue, and record which pairs you have checked. WCAG Contrast Ratios Explained covers the 4.5:1 and 3:1 thresholds; in a dark theme every pair has to be re-measured, and Dark Mode Color Palettes shows how far the numbers move.

Choose the operation by the problem

• The color covers too much area: try a tint for a light surface, or a tone when you need to keep similar lightness while reducing intensity.
• The element lacks weight on a light page: try a shade, then verify that nearby dark elements still have a clear hierarchy.
• The palette feels loud even though contrast is adequate: use tones for secondary colors rather than making everything lighter, and mix them toward a gray that matches their luminance.
• A hover state is difficult to notice: choose a step large enough to see, such as 0.05 of OKLCH lightness.
• Text fails against the background: adjust the foreground or background far enough to pass. The tint, shade, or tone label does not override the measured result.

Use the smallest change that solves the problem. A button that turns dramatically darker on hover suggests a change in hierarchy rather than a temporary state, and a disabled control made extremely pale may lose its boundary.

Tint, shade, and tone are not color harmony

These mixtures change the lightness or chroma of one hue. Color harmony changes the relationship between different hues. A monochromatic palette may use tints, shades, and tones of blue; a complementary palette adds orange, the hue opposite blue on the wheel.

The two ideas work best together: choose the hue relationship first, then expand the important hues into usable light and dark roles. Color Harmony Basics covers complementary, analogous, triadic, and monochromatic structures.

Worked example: calming a vivid brand palette

Imagine a brand with a bright blue primary color and an orange complement. Using both at full strength across a dashboard would make every chart, notice, and control demand attention. Keep the blue base for the main action. Create light blue tints for selected backgrounds and onboarding panels, and deep blue shades for headings and pressed states. Then tone the orange toward a warm gray of similar luminance for secondary chart series and informational labels. Save the vivid orange for the few highlights that require immediate notice.

This palette still expresses the original complementary relationship, but modification creates the hierarchy. Tinting lets blue occupy large areas. Shading gives it structural weight. Toning lets orange remain recognizable without competing with the primary action. If an orange value is used for warnings, add a label or icon so meaning does not depend on color alone.

Four common mistakes

• Calling every dark color a shade. Navy is a shade of blue, but a dark green is not a shade of blue — its hue changed.
• Using opacity as a substitute. A semi-transparent blue looks different over white, gray, and a photograph. A solid tint has a stable value; transparent color inherits its background. Use transparency only when the background is meant to be part of the mix, as in an overlay.
• Toning with whatever gray is at hand. Middle gray #808080 lowered the contrast of six of our nine test colors on white at a 50% mix. When the toned color has to stay readable, mix toward a gray of matching luminance.
• Using one darkening percentage for every color. The same 10% black moved gold more than twice as far in lightness as rebeccapurple. Fix the lightness step and let the percentage vary.

Caveats for paint, print, and screens

The textbook definitions are conceptual models, not promises that physical materials will mix cleanly. Real pigments absorb and reflect different wavelengths, so adding black can make some paints look duller or shift their apparent hue. White paint can cool or soften a mixture in a way that a numerical screen blend does not imitate exactly. A gray made from complementary pigments may behave differently from a premixed neutral gray. Make physical samples when the output will be paint or ink.

Print introduces paper color, ink limits, and drying behavior. A delicate screen tint may disappear on uncoated stock, while a deep shade may lose shadow detail. Ask for a proof when the distinction matters. On screens, display calibration and surrounding brightness affect perception, so inspect critical scales on more than one ordinary device rather than tuning only on a wide-gamut monitor.

How we measured

Colors were mixed as plain sRGB channel averages (the method behind this guide’s HEX examples), in linear-light sRGB, and in OKLab, then rounded to 8-bit HEX before measuring, because the HEX is what ships. Lightness, chroma, and hue are OKLCH values from Björn Ottosson’s published OKLab matrices, the same conversion our Code Converter uses. Contrast uses the WCAG 2.x relative-luminance formula. Lightness-only states that fell outside sRGB were brought back with a CSS Color 4 gamut-mapping algorithm (binary search with local MINDE, reducing OKLCH chroma at fixed lightness and hue). The test colors were #3366CC plus the CSS named colors blue, royalblue, rebeccapurple, crimson, darkorange, gold, seagreen, and teal. Chrome 155 returned the same color-mix() HEX values in every case we checked, give or take one unit in a channel where the exact value falls halfway between two 8-bit steps.

The short version

White makes a tint. Black makes a shade. Gray makes a tone. Use tints for breathing room, shades for depth, and tones when the base color needs to speak more quietly. Then check what the names leave out: make tints of vivid colors in OKLab when the hue has to hold, tone toward a gray that matches the color’s luminance, set hover and pressed states by a lightness step, and measure every text pair on the surface it will actually sit on.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. How these guides are written and checked: editorial standards.