Colour shades generator

Builds a nine-step scale from your colour, four tints toward white and four shades toward black, which is the shape a design system needs.

Tints, shades and tones are three different operations and the words get used interchangeably. A tint is the colour mixed with white, a shade is mixed with black, and a tone is mixed with grey — which lowers saturation without necessarily changing lightness much. This produces tints and shades. One thing worth knowing about scales built this way: mixing toward white and black in sRGB does not give perceptually even steps, so the middle of the scale looks like it moves faster than the ends. Building a scale in OKLCH gives even steps, which is why design systems increasingly do.