Tints, Shades, and Tones: What They Are and How to Use Each

Most designers know that a tint is lighter and a shade is darker, but those loose definitions stop helping the moment you need ten usable steps of a brand color for buttons, backgrounds, borders, and text. Tints, shades, and tones are three specific ways of changing a color, and each behaves differently in HSL, in CSS, and on a real screen. This guide defines each one precisely, shows how they map to lightness and saturation, and walks through building a UI scale without the muddy dark steps that make palettes look cheap.

Tints, Shades, and Tones Defined

The three terms come from paint mixing, and the definitions are short:

• Tint: a color mixed with white. It gets lighter and softer. Every pastel is a tint.
• Shade: a color mixed with black. It gets darker and heavier.
• Tone: a color mixed with gray. It gets quieter and less intense, while its lightness stays closer to where it started.

In casual conversation people often say "tone" to mean any variation of a color, or "shade" to mean any version of a hue ("a nice shade of green"). In color theory and in most design tools, the strict meanings above apply. Sticking to them pays off when you write tokens and specs, because "use a 30% tint" and "use a 30% shade" describe two completely different colors.

Tint vs Shade vs Tone in HSL Terms

If you think in HSL (hue, saturation, lightness), the three operations line up with the sliders in a predictable way. Here is a single base blue, #2563eb, mixed with white, mid-gray (#808080), and black:

The pattern is clear. The hue never moves. Tints push lightness up, shades push lightness down, and tones drain saturation while lightness stays near the middle, because mid-gray itself sits at 50% lightness. The saturation figure on the shades drops a little at first because HSL calculates saturation differently above and below 50% lightness, so treat the mapping as a reliable rule of thumb rather than an exact identity. If the HSL model itself is fuzzy, our guide to HEX, RGB, and HSL color codes covers it from the ground up.

Modern CSS can produce all three directly with color-mix(), which is handy for prototyping:

:root {
  --brand: #2563eb;
  --brand-tint-30: color-mix(in srgb, var(--brand) 70%, white);
  --brand-tone-30: color-mix(in srgb, var(--brand) 70%, #808080);
  --brand-shade-30: color-mix(in srgb, var(--brand) 70%, black);
}

If you would rather see every option at once, the tint, tone and shade generator takes one base color and returns three labeled rows (tints mixed with white, tones mixed with #808080, shades mixed with black) at 15, 30, 45, 60, and 75 percent, along with CSS custom properties. For a one-off mix between any two colors, the color mixer outputs the blended color and the equivalent color-mix() line.

When to Use Each in an Interface

Tints: surfaces and quiet emphasis

Light tints are the workhorses of brand-colored backgrounds: selected table rows, info banners, badge fills, hover backgrounds on ghost buttons, and highlighted cards. They signal "this belongs to the brand" without competing with text. Pair them with dark text, never with white text, because a light tint has very little contrast against white.

Shades: states, text, and weight

Shades handle hover and pressed states for solid buttons, text and icons placed on tinted backgrounds, and borders that need to read clearly. In the table above, the 30% shade #1a45a4 on the 75% tint #c8d8fa reaches about 6:1 contrast, which passes WCAG AA for normal text (4.5:1). The 60% shade #0f285e on the same tint reaches roughly 9.9:1, which also clears AAA (7:1).

Tones: neutrals and calm secondary color

Tones are underrated. A heavily toned version of your brand color makes a better neutral than flat gray, because it carries a faint trace of the brand hue. Tones also work well for disabled states, secondary chart series, and any area that should recede. Keep them away from primary actions, which need a clean, saturated color to stand out.

Building a UI Color Scale From Tints and Shades

A production color scale is simply tints on one side, the base color in the middle, and shades on the other. A practical process:

1. Place the base. Decide which step your brand color occupies. If it passes 4.5:1 against white (our example blue measures about 5.2:1), it can be the default button color; if not, a slightly darker step should be.
2. Generate the light half with tints. Reserve the two lightest steps for backgrounds and fills.
3. Generate the dark half with shades, then correct them using the hue-shift technique below.
4. Check spacing. Equal mix percentages rarely look like equal visual steps, so view the scale side by side and nudge any pair that looks too close or too far apart.
5. Test real text pairs. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. Run your intended pairs through a color contrast checker.

Two tools speed this up. The color shades generator builds a 10-step lightness scale around your base hue and badges each swatch with its best text color for WCAG. The Tailwind CSS color generator outputs an 11-step 50 to 950 scale as a config object or v4 @theme variables. For naming and step conventions, see mastering Tailwind CSS color scales.

Why Shades Mixed With Pure Black Look Muddy

Mixing with black multiplies every RGB channel by the same factor. That keeps the hue angle intact, but it also shrinks the gap between the strongest and weakest channel, and that gap is what your eye reads as colorfulness. The darker you go, the less color is left.

Yellow shows the problem most clearly. Take #f5c518, a bright golden yellow, and mix in 50% black: you get #7a620c. HSL still reports hue 47° and saturation 82%, yet on screen it reads as olive khaki, not dark gold. The saturation number stays high because HSL measures saturation relative to the maximum possible at that lightness, so it cannot warn you that the color has gone dull. You have to look at it.

Hue Shifting: The Fix for Dull Dark Steps

The standard fix is to rotate the hue a few degrees as each step gets darker, usually toward a hue that is naturally dark, such as red, blue, or violet, and away from naturally light hues like yellow and cyan. For yellow, that means sliding toward orange and amber:

The shifted column reads as amber, bronze, and deep brown, colors that still feel related to the bright yellow, while the straight mixes drift toward olive. The same idea applies elsewhere: dark blues stay rich when nudged slightly toward indigo, and dark greens hold up better leaning a little toward blue-green. Start with the generated shades, then adjust hue and saturation by eye until the dark end feels as intentional as the light end.

Common Mistakes With Color Tones, Tints, and Shades

• Stopping at the raw black mix. Generated shades are a starting point. Always review the bottom of the scale for olive yellows and gray-looking blues.
• Toning everything. A palette made entirely of gray-mixed colors looks dusty. Keep tones for neutrals and secondary elements and leave at least one clean color for actions.
• Too many near-white tints. Several steps packed close to white are hard to tell apart on many displays, especially in bright rooms. Two light background steps are usually enough.
• Using tints as text. A light tint on white fails contrast badly. Put dark text on tints, not tinted text on white.
• Ignoring temperature in tones. Mixing with pure #808080 gives neutral tones. If your neutrals lean warm or cool, mix toward a slightly warm or cool gray instead.

Many of these issues are also behind the problems described in why your website colors look cheap.

Putting It Together

Tints add white and raise lightness, shades add black and lower it, and tones add gray and lower saturation. Use tints for surfaces, shades for states and text, and tones for neutrals and quiet support. Generate all three from your base color with the tint and tone generator, hue-shift the darkest steps so they stay rich, and verify every text pair before shipping. For the wider theory these variations sit inside, read the complete guide to color theory.