Shades, Tints and Tones Explained

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with grey. Pick a base color in the shades and tints generator, choose which ramp you want, and it builds an even scale you can copy step by step.

The three terms, kept simple

It helps to think of each one as the base color plus an ingredient:

• Tint is base plus white. The hue stays, but it reads lighter and softer.
• Shade is base plus black. The hue stays, but it reads darker and deeper.
• Tone is base plus grey. The hue stays, but it loses some intensity and feels calmer.

You can describe any variation of a color with these three. A pastel is a tint, a deep navy is a shade of blue, and a dusty rose is a tone of pink.

Why an even scale matters for interfaces

A single button is rarely one flat color. It has a base, a darker hover, a lighter background and maybe a faint border. If you eyeball each of those, the steps end up uneven and the component looks slightly off.

An even scale fixes that. The generator spaces its steps in a perceptual color space, so the jump from one step to the next looks consistent to the eye instead of bunching up at the light or dark end.

Building a full color set

Start with the hues from a scheme, then expand each into a ramp. The color harmony generator gives you the hues, and this tool turns each hue into the light-to-dark steps your design system needs. If you want a custom in-between color rather than a fixed step, the color mixer blends any two colors at the ratio you choose.

Set the number of steps you want, pick tints, shades or tones, and click any swatch to copy its hex.