Color & Design·4 min read

Shades, Tints and Tones Explained for UI Work

One brand color never survives contact with a real interface. The moment you build a button you need a hover, an active, a disabled wash, and a focus ring, and suddenly one hex has to become nine. This guide explains shades, tints and tones the way component authors need them: as a ramp you generate once, name properly, and stop arguing about. The Color Shades Generator builds that ramp in LAB space from a single input, which is why its steps look even where hand-picked ones drift.

Open the free Color Shades Generator All insights

Why a button system needs a shades scale

The hover problem, solved once.

Watch a team without a scale build buttons. The primary button gets the brand color. For hover, someone darkens it by eye in a picker. The secondary button's author darkens by a different amount. Six months later the codebase holds five almost-identical purples and nobody knows which is canonical.

A generated ramp ends this. Hover and active states come from fixed positions on the scale: base at the middle, hover one step darker, active two steps darker, disabled two steps lighter. Every interactive element in the system darkens by the same perceptual amount, because the steps on a LAB ramp are close to the same visual size. Consistency stops depending on anyone's eye.

Shades, tints and tones explained without the paint-class fog

Three words, three mixes.

The vocabulary is old but precise. A tint is your color mixed with white, so tints occupy the light half of the ramp and make backgrounds, hover washes, and subtle badges. A shade is the color mixed with black, covering the dark half where hover, active, and text-on-light live. A tone is the color mixed with gray, which mutes intensity without much lightness change; this ramp doesn't produce tones, which is why a scale can feel vivid top to bottom.

The generator arranges all of it symmetrically: white at one end, black at the other, your input dead center. The Steps slider runs from 5 to 21 and moves in twos, so the count stays odd and the base never drifts off-center, which matters when you later map positions to names.

A worked shades scale from #6366F1

Eleven steps, real values.

Feed the tool #6366F1 at 11 steps and the LAB ramp comes out as #FFFFFF, #E5DFFD, #C9BFFB, #ACA0F8, #8B83F5, #6366F1, #5151BC, #3F3D89, #2D2B5A, #1B192F, #000000. Drop the pure white and black bookends and nine usable values remain, with the brand color exactly in the middle.

Wire the button system straight from it: default background #6366F1, hover #5151BC, active #3F3D89, disabled surface #C9BFFB with #3F3D89 text, and a pale #E5DFFD wash for selected rows. You don't have to name the steps by hand. The export panel builds a 50 to 950 scale from the same ramp, with 500 as your base, so #E5DFFD becomes 100 and #3F3D89 becomes 700. Type a color name, such as brand, and copy it as a Tailwind v4 @theme block, a Tailwind v3 config object, or plain CSS variables.

Mistakes that wreck a shades scale

Common ramp failures.

Four patterns account for most broken scales.

Generating in HSL by hand. Dropping HSL lightness in even increments produces steps that look uneven, cramped in some hues and gappy in others.
Keeping the endpoints. Pure white and pure black belong to no hue; shipping them as brand-50 and brand-950 makes those tokens interchangeable with any other color's. The export stops at 50 and 950, just short of them.
Darkening with opacity instead of the ramp. A 20 percent black overlay shifts hue and murks saturation; the equivalent ramp step keeps the color's character.
Regenerating with a different step count mid-project. An 11-step and a 13-step ramp from the same base share almost no interior values, so pick a count and freeze it.

Tips for a shades scale that lasts

Do these before you tokenize.

Verify contrast at the positions that carry text. Each swatch is labeled with whether white or black text reads better on it, the contrast ratio, and whether it reaches AA, AAA or large text only. On the worked ramp, the base #6366F1 scores 4.47:1 with white text, just under AA for body text, while #5151BC reaches about 6.5:1. So confirm your button and hover slots pass before naming them. Checking now costs a minute; re-mapping tokens after launch costs a sprint.

Use Copy all as your source of truth for the raw ramp. The single comma-separated line pastes cleanly into a spreadsheet or a pull request description, and it preserves order, which is the whole point of a scale. For the codebase itself, prefer the 50 to 950 export so names and values travel together.

Color Shades Generator beside the other scale tools

Same neighborhood, different outputs.

The Color Shades Generator moves one color toward white and black. When the target is an existing framework rather than a fresh ramp, the Tailwind Color Palette shows the 22 default scales Tailwind ships and can find the closest stock color to your hex, useful for checking whether your generated ramp fights the defaults around it.

When you need a step between two different hues rather than within one, that's interpolation, and the Color Blender handles it. And any ramp position destined to sit under text should make a stop at the Color Contrast Checker on its way into the design system.