Colour shades generator
Nearest named colour: royalblue
Calculated in your browser · nothing is uploaded
Builds a nine-step scale from one colour: four tints toward white, the colour itself, and four shades toward black. That is the shape a design system wants, but not a Tailwind ladder step for step: 50 through 900 is ten values, eleven with 950, so a full one needs a stop or two more.
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 a grey of the colour’s own lightness, which lowers saturation while holding that lightness. 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. The tints are where most of the practical use is. A light tint of a brand colour makes a panel or a hover state that reads as related without competing, and it is also where accessibility quietly breaks, because a tint is lighter by definition and text that passed on the base colour will not pass on a heavy tint. Re-check the pair rather than assuming. The numbering convention is worth a note of its own. Tailwind runs 50 at the lightest to 950 at the darkest, which is inverted from a font-weight scale and catches everyone once. The payoff is that a component written against 50 and 900 works for any hue swapped into it, because the relationship between the numbers holds across every colour in the system, which is also why a custom colour needs the whole ladder defined rather than a single 500.
What people use it for
- Building a nine-step scale for a design system
- Getting the light tints of a brand colour for backgrounds and hover states
- Starting a Tailwind ladder for a custom colour and filling the ends by hand
- Seeing how a colour behaves as it moves toward white and black
- Picking a darker variant for a hover or pressed state
- Copying every step of a scale in one go
Questions
A tint is mixed with white, a shade with black, and a tone with a grey of the colour’s own lightness. Only the tone changes saturation, and only the tone leaves lightness where it was.
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.
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 its saturation pulled down, not white alone.
Tailwind’s convention, inverted from font weights. It catches everyone once and then becomes automatic.
For a custom colour, yes. Utilities assume the whole ladder exists; defining only 500 breaks the rest. The nine steps here cover roughly 100 through 900, so 50 and 950 are the two you still pick by hand.
In the middle, around the 500 mark. The lighter and darker steps are derived from it.
Same shape, not the same values. Tailwind hand-tunes its built-in colours rather than deriving them.
Not here; nine is the fixed shape, which is what most systems settle on anyway.
Set Show to Tints only. The row then runs nine steps from the base colour to near-white, rather than the four the mixed ladder has room for. Shades only does the same toward black.
On the colour tones generator. A tone mixes toward a grey of the colour’s own lightness, so saturation falls and the lightness figure holds.
Hex is what a stylesheet or a design tool wants back. OKLCH is worth switching to if you intend to hand-adjust a step, because it is the only one of the four where nudging the lightness figure moves the step by the amount you expect.
Not reliably. Every step is a different lightness, so a pair that passes at 500 can fail at 300. Take each step you will actually set text on to the contrast checker.