Tint and Shade Generator

A tint is a color mixed with white, a shade is mixed with black and a tone is mixed with gray. Ramps of them are how design systems get hover states, borders and backgrounds that belong to one brand color. This generator makes all three in as many steps as you need, either with the classic sRGB mix used by Sass and most websites or with a perceptually even OKLCH ramp, and exports CSS custom properties.

How to use this tool

1. Enter the base color.
2. Choose the number of steps and which ramps to make.
3. Pick the mixing method: sRGB mix for familiar results, OKLCH for even-looking steps.
4. Copy the HEX lists or the CSS variables, or download the swatches.

Formula

sRGB mix: c = c₀ + (t − c₀) × p for each channel, with t = 255 (tint), 0 (shade) or 128 (tone) and p = step ÷ steps. OKLCH: L moves toward 1, 0 or 0.6 by p while chroma × (1 − p).

Step 0 is always the base color; the last step stops short of pure white, black or gray. Channel values are rounded to whole numbers.

Example

Pure red #FF0000 in 2 steps gives the base and a 50% step: the shade is 255 × 0.5 = 127.5 → #800000 (maroon), the tint is 0 + 255 × 0.5 → #FF8080, and the tone is (255 + 128) ÷ 2 = 191.5 → #C04040.