Tints and shades generator
Enter a base color and a step size. You get ten tints toward white and ten shades toward black, each with a HEX code, plus CSS variables to paste.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Enter a HEX code or pick a color.
- Set the step with the slider, from 1 to 10 percent.
- Copy a list of HEX codes for tints or shades, or the whole CSS variables block.
How it works
For a tint, each channel becomes c + (255 − c) × p. For a shade, it becomes c × (1 − p), where p is the step multiplied by 1…10 as a fraction. Values are rounded to whole numbers.
Example
Red #ff0000 with a step of 10 percent: the first tint is #ff1a1a (255 × 0.1 = 25.5, rounded to 26) and the first shade is #e60000 (255 × 0.9 = 229.5, rounded to 230).
Tips
- A step of 10 is a good start for a ten-stop scale such as 100 to 1000 in a design system.
- Check text on every swatch with the contrast checker; light tints rarely work for white text.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a color mixed with white, so it gets lighter. A shade is a color mixed with black, so it gets darker. Here each one moves every RGB channel a set percentage of the way to 255 or to 0.
What does the step do?
It is the percentage added at each of the ten swatches. With a step of 10 the swatches are 10, 20 … 100 percent of the way to white or black, so the last one is pure white or black. With a step of 5 they stop at 50 percent.
Why does the base color not appear in the list?
The lists start at one step away from the base, so the base is the 0 percent point between the tints and the shades. Use the base HEX itself for that position.
Is this the same as changing lightness in HSL?
No. Mixing with white or black keeps the straight-line path in RGB, and it reaches exactly white or black. HSL lightness changes are close but not identical, especially for saturated colors.