Colour tints generator
Nearest named colour: hotpink
Calculated in your browser · nothing is uploaded
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.
How to use the colour tints generator
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.
Questions
A colour mixed with white. It raises lightness and reduces apparent saturation.
Light backgrounds, hover and selected states, and anything that should read as related to a brand colour without competing with it.
No. A tint is lighter, so text that passed on the base colour may fail on the tint. Re-check the pair.
Close but not identical; a pastel also has reduced saturation, not just added white.
Hex for anything going into a design tool, HSL when you want to adjust lightness by hand, and OKLCH when you need two colours to look equally light; it is the only one of the four where that number means what you expect.