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.

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.

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.

Mixture amount also changes which roles remain available. A slight tint can retain enough presence for an active control. A strong tint becomes a surface behind dark text. A slight shade may be useful for a hover or pressed state, while a deep shade can become a heading or page background. Tones typically create several useful supporting strengths because they can lose vividness without rushing toward either lightness extreme.

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 — the same move keeps supporting series quiet in a chart, as Data Visualization Color Palettes explains. 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 why that shift changes the mood more than the lightness does.

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.

A basic RGB mixer blends channel numbers directly. HSL changes can look intuitive but equal jumps in HSL lightness do not always look equally bright to the eye. Perceptual spaces such as OKLCH are designed so that changes in lightness are more visually even. For a practical explanation of those models, see HEX, RGB, HSL, and OKLCH Explained.

This is why two apps can produce slightly different “20% tints” from the same HEX code. Both are moving toward white, but they may be taking different mathematical paths. The label describes the destination; the color space determines the route.

How tints, shades, and tones work in a UI

A useful interface rarely uses one brand color at one strength. It needs a family of related values:

• Very light tints for page backgrounds, selected rows, notices, and subtle hover states.
• Mid tints and tones for borders, disabled controls, secondary charts, and quiet decoration.
• The base hue for primary buttons, links, active states, and key data.
• Dark shades for pressed states, headings, icons, and text on light surfaces.

Organizing those values as 50–900 steps turns an assortment of HEX codes into a system. A teammate can ask for “blue-700” instead of guessing which dark blue the design intended, and the roles survive even if the brand hue changes later.

Build a scale from real interface needs

Start with roles, not a demand for ten evenly numbered swatches. For a simple product, you might need only a pale selected background, a quiet border, the brand-colored action, a darker pressed state, and a deep text color. Generate candidates around those needs, place them into actual components, and add intermediate steps only when a new role requires one.

For example, begin with blue #3366CC as a primary button. A very light tint can mark the selected navigation row without competing with its label. A medium tint can define a border on white. A deeper shade can show the button’s pressed state, provided its label still has sufficient contrast. An even deeper shade may work as a heading, but it should not be assumed to pass merely because it carries the name “900.” Measure the exact pair.

Tones are useful when the scale also needs quiet secondary information. Rather than using a pale tint for every supporting mark, a muted blue-gray can distinguish an inactive icon, secondary data series, or informational border. It keeps the blue family visible without making the whole screen look washed out. In a larger system, document whether toned values belong inside the numbered blue scale or in a separate muted family; either can work, but mixing conventions makes tokens difficult to predict.

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.
• A hover state is difficult to notice: choose a neighboring tint or shade with an observable change, not a nearly identical mathematical step.
• 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. Making a button dramatically darker on hover can suggest a hierarchy change rather than a temporary state. Making a disabled control extremely pale may erase its boundary. A scale works when related states are visibly connected but still distinguishable under ordinary viewing conditions.

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 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. If blue text sits on a blue tint, test that pair rather than assuming shared hue creates legibility.

The same reasoning works outside interfaces. An interior palette can use wall-sized tints, deep shades on smaller furniture, and toned textiles that bridge vivid accents to neutral materials. An illustration can reserve the base hue for the focal object, use tints for atmosphere, shades for depth, and tones for receding objects. The medium changes, but area, hierarchy, and contrast still decide which mixture is useful.

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.
• Assuming the same numbered step has the same contrast. Blue-700 and yellow-700 can have very different luminance. Step names organize a scale; they do not certify readability.
• Generating too many nearly identical values. Ten named steps are useful only when each has a role. If 400, 500, and 600 are indistinguishable in the interface, remove one or increase the spacing.

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.

Opacity remains a separate technique. Transparent blue over white may resemble a tint, but the same layer over beige or a photograph produces a different result. Transparency is appropriate when the background is intentionally part of the mixture, such as an overlay. Use an opaque, specified color when the role must remain stable across surfaces. That distinction is especially important for reusable components whose backgrounds can change.

Name tokens for purpose as well as appearance

Numeric families make relationships easy to scan, but semantic names make usage clear. A system can map blue-500 to “action background” and blue-700 to “action pressed.” Components then depend on the semantic role rather than a particular shade number. If testing later requires a darker action color, the role can change without rewriting every component.

Document the base color, mixing method, final values, and approved uses. This prevents teammates from generating a slightly different “20% tint” in another tool and treating it as interchangeable. Also record pairings that have been checked for contrast. A palette file is more useful when it says what a swatch does and what it can sit on, not merely how it was produced.

Check contrast after choosing the scale

Darkening a color usually increases its contrast against white, and tinting usually increases contrast against black, but “usually” is not a pass result. Contrast depends on the exact foreground and background values. Test the pair you will actually ship, especially for body text and interactive controls. WCAG Contrast Ratios Explained covers the 4.5:1 and 3:1 thresholds and when each applies. If the scale is headed for a dark theme, note that tints do most of the work there and every pair has to be re-measured against the dark surface — Dark Mode Color Palettes shows how far the numbers move.

Gray itself is more than a modifier — it can be the foundation of your entire palette. For guidance on warm vs cool grays, undertone matching, and building a complete neutral scale, see how to choose a neutral and gray color palette.

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 organize the useful results into named steps and test the combinations for contrast — because a coherent color family is only finished when it works in the design.

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.