Colour shades generator
Nearest named colour: royalblue
Calculated in your browser · nothing is uploaded
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.
How to use the colour shades generator
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.
Questions
A tint is mixed with white, a shade with black, and a tone with grey. Only the tone changes saturation.
Because sRGB is not perceptually uniform. A scale built in OKLCH has visually even steps; this one is even numerically.
Nine to eleven is the common choice — enough for backgrounds, borders, text and hover states without being unmanageable.
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.
Not necessarily. A palette generator arranges hues; it says nothing about contrast. Check any text-on-background pair against the contrast checker before shipping it.