Tint & Shade Generator

The painter's definitions: a tint is the base colour mixed with white, a shade the base mixed with black, and a tone the base mixed with grey. Each row here mixes the base toward that target in n equal steps, the last step reaching the “max mix” you set (90 % keeps the ends short of pure white and black; 100 % reaches them). The mixing amount is the same as CSS color-mix() would use, so a step can be reproduced in a stylesheet directly.

Mixing the raw sRGB channel values — what most older palette tools do — produces steps that look uneven: the first tints jump in brightness and the middle shades bunch up, and saturated colours pass through muddy greys. OKLab is a perceptual space defined in CSS Color Module Level 4 in which equal numeric steps look like equal visual steps, so OKLab mixing is the default here. The sRGB option is kept for matching an existing palette that was built that way. Results are rounded to whole 8-bit channels after mixing.

Each swatch shows its hex code, its OKLCH lightness L (0 black to 1 white) and its WCAG 2 contrast ratio against white; body text on a white page needs 4.5 : 1, so the ratio tells you at a glance which shades can carry text. The CSS variables block names the steps --tint-1, --shade-1, --tone-1 and so on in order of increasing mix. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.