What is the difference between a tint, a shade and a tone?

A tint is the colour mixed with white so it is lighter, a shade is mixed with black so it is darker, and a tone is mixed with grey so it loses saturation without much change in brightness. This tool produces tints and shades, the two an interface needs most.

Why is the scale numbered 50 to 900?

That numbering became a design-system convention because it gives each step a stable name, so a usage rule can be written once and hold for every colour. Smaller numbers are lighter, and 500 is always the base colour.

Why do the lightest steps look washed out?

Because mixing towards white also drains saturation, so the lightest steps lose some of the colour's character. Nudging saturation up at steps 50 and 100 usually restores the sense of the colour without making them look darker.

Color

Color Shades Generator

Pick one colour to get a full light-to-dark scale, with the CSS gradient to match.

Base colour (step 500)

LINEAR GRADIENT

CSS VARIABLES

What this is

A colour shades generator builds a run of lighter and darker variants from one base colour. Tints come from mixing towards white, shades from mixing towards black. The run is laid out as a numbered 50-to-900 scale — the convention design systems use — so you have enough steps for backgrounds, borders, text and hover states without inventing a new colour each time.

How it works

A numbered scale works because it gives every step a name, and the name is what keeps application consistent. Page backgrounds take 50, borders take 200, text takes 700 — and the same rule repeats for every colour in the system without a fresh decision each time.

Worth knowing: mixing towards white lowers saturation and can leave the lightest steps looking washed out and grey. For the very lightest steps, nudging saturation up usually gives a more alive colour than a straight mix towards white.

How to use it

Pick your base colour The colour you enter becomes step 500, the middle of the scale.
Take the steps you need Click any step to copy its hex code.
Copy the CSS gradient Linear and radial gradient snippets sit below the scale, ready to paste.

Common questions

What is the difference between a tint, a shade and a tone?: A tint is the colour mixed with white so it is lighter, a shade is mixed with black so it is darker, and a tone is mixed with grey so it loses saturation without much change in brightness. This tool produces tints and shades, the two an interface needs most.
Why is the scale numbered 50 to 900?: That numbering became a design-system convention because it gives each step a stable name, so a usage rule can be written once and hold for every colour. Smaller numbers are lighter, and 500 is always the base colour.
Why do the lightest steps look washed out?: Because mixing towards white also drains saturation, so the lightest steps lose some of the colour's character. Nudging saturation up at steps 50 and 100 usually restores the sense of the colour without making them look darker.

Notes

The calculation runs in your browser. Nothing is sent to a server.