Tints, shades, and tones in color theory
What separates a tint from a shade from a tone, why linear RGB ramps can look uneven, and how to turn one color into a usable UI scale.
Three ways to modify a hue
Color theory names three moves from a starting hue. A tint adds white and lifts the color toward pastel, a shade adds black and pushes it toward darkness, and a tone adds gray to mute it without shifting lightness as far in either direction. This tool covers the first two, giving you a light-to-dark axis through your base color. Knowing the vocabulary helps when a design brief asks for a lighter tint of the brand color rather than a different color entirely.
Why equal steps can look uneven
The generator spaces steps evenly in RGB, so a five-step ramp moves an equal numeric distance each time. Human vision, however, is more sensitive to changes in dark tones than bright ones, so those mathematically equal steps do not read as equally spaced. The jump from a mid tone to a light tint can feel larger than the jump between two dark shades. This is a known tradeoff of linear RGB blending, and it is why perceptual spaces like OKLCH exist, but linear steps remain a solid, transparent starting point.
From one color to a UI scale
Design systems rarely use a single color; they use a numbered ramp, such as 50 through 900, where the base sits somewhere in the middle. You can build that here by picking your brand hex, setting the step count, and reading the Full scale strip from lightest to darkest. The pale tints work for backgrounds and hover states, the base carries buttons and links, and the deep shades suit text or borders on light surfaces. Copying the whole scale at once gives you every rung of that ladder in one paste.
Dropping the palette into CSS
Once you have the hex values, the cleanest way to use them is as custom properties. Declare each swatch as a variable, for example --blue-100 through --blue-900, then reference those names throughout your stylesheet instead of raw hex codes. That keeps the palette in one place, so retuning the brand later means editing a handful of variables rather than hunting through every rule. Pair the light and dark ends thoughtfully to keep text and background contrast readable.