Tints, shades, and the third term people often confuse: tones
In color terminology, a tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with gray — three distinct operations that are frequently used interchangeably in casual speech but describe different transformations. This tool covers the first two, since they're the pair most commonly needed for interface work: tints for lighter variants (hover backgrounds, subtle highlights) and shades for darker variants (pressed states, high-contrast text), each expressed as a percentage of how far the color has moved toward its target (white or black).
The arithmetic behind each percentage step
A tint at X% moves each RGB channel X% of the way from its original value toward 255 (white); a shade at X% moves each channel X% of the way toward 0 (black). For #3B82F6 (59, 130, 246), a 50% tint moves red halfway from 59 to 255, landing at roughly 157, giving #9DC1FB — visibly lighter but still recognizably the same blue. A 50% shade instead moves red halfway from 59 toward 0, landing at roughly 30, giving #1E417B — a deep, muted version of the same hue. Both operations are applied independently to all three channels simultaneously, which is why the hue stays recognizable throughout the scale rather than shifting toward a different color entirely.
Why this differs from adjusting HSL lightness
Tinting and shading by blending toward white or black in RGB space is a different operation from simply changing the "L" value in HSL, even though both produce a lighter or darker version of a color. Blending toward white or black in RGB tends to also reduce saturation somewhat as a side effect (mixing in a neutral color always desaturates to some degree), while adjusting HSL lightness directly can preserve saturation exactly, holding hue and saturation fixed and only changing the lightness axis. Neither approach is more correct — RGB blending is simple, predictable, and matches how physically mixing paint or light actually works; HSL lightness adjustment gives more precise control when saturation needs to stay constant across the whole tint/shade scale.
Where a 9-step scale like this comes from
Generating tints and shades at 10% increments from 10% to 90% mirrors the structure of most modern design-system color scales, including Tailwind's own 50–950 numbering — a base color with a consistent set of lighter and darker steps around it, rather than one fixed color with no systematic variations. Having a full scale available makes it straightforward to pick a background, a border, a hover state, and a text color that are all visibly related to the same base brand color, rather than picking unrelated colors independently and hoping they read as a coherent palette.
Accessibility considerations when tinting text colors
Tints and shades are convenient for generating a related color scale, but a lighter tint used as text on a light background (or a darker shade used as text on a dark background) can quickly fail contrast requirements even though it's derived from a color that had adequate contrast at its original value. WCAG contrast guidelines are based on relative luminance, not on how far a color sits along a tint/shade scale, so a generated tint intended for text — as opposed to a background or decorative element — should still be checked against its actual background color rather than assumed safe purely because it came from a systematic scale.
Batch tinting an entire palette
The batch mode on this page applies a single chosen percentage (rather than the full 10%–90% scale) to every hex value in a pasted list, which is useful for generating one specific tint or shade level — a 10% lighter hover state, say — across an entire existing color palette in one pass, rather than recalculating each color's tint individually in the live tool above.