Colour tints generator

Generates tints — your colour mixed with increasing amounts of white — which is where the light backgrounds and hover states of a design system come from.

Tinting is the reliable way to get a background that belongs with a brand colour without being it. A 10 percent tint of your primary makes a tinted panel that reads as related; a 90 percent tint is close to white with a hint of the hue. What tinting cannot do is preserve contrast — a tint is lighter by definition, so text that worked on the base colour will not work on a heavy tint, and this is a common source of accessibility regressions when a design system grows a lighter variant without re-checking.