Color & Design·3 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 is shades tints and tones explained the way component authors actually need it: as a ramp you generate once, name properly, and stop arguing about. The Shades & Tints tool builds that ramp in LAB space from a single input, which is why its steps look even where hand-picked ones drift.

Open the tool 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. Shades for hover 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 every step on a LAB ramp is 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; ramps don'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. Because the step slider moves in twos, 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. Building a 50 to 900 scale is the same exercise with names attached: call #E5DFFD your 100, #6366F1 your 500, #3F3D89 your 700, and the ramp becomes a token set any developer can consume.

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.
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. On the worked ramp above, white text needs the #5151BC step or darker for body sizes, so confirm your hover and active 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. The single comma-separated line pastes cleanly into a tokens file, a spreadsheet, or a pull request description, and it preserves order, which is the whole point of a scale. If a teammate asks for the values in a message, paste the line, not a screenshot.

Shades & Tints beside the other scale tools

Same neighborhood, different outputs.

Shades & Tints moves one color toward white and black. When the target is an existing framework rather than a fresh ramp, the Tailwind Color Picker shows the 22 prebuilt scales Tailwind ships, 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 every ramp position destined to sit under text should make a stop at the Color Contrast Checker on its way into the design system.