Color Tints & Shades Generator
Generate a series of lighter (tints) or darker (shades) variants of a color.
Base Color
#3B82F6
Steps10
#3B82F6
Tints
0%#3B82F6
10%#5A8EF7
20%#7299F9
30%#87A5FA
40%#9AB2FB
50%#ACBEFC
60%#BECBFD
70%#CFD7FE
80%#DFE4FE
90%#EFF2FF
100%#FFFFFF
Shades
0%#3B82F6
10%#3874DA
20%#3567C0
30%#3159A5
40%#2D4D8C
50%#284073
60%#23345C
70%#1D2845
80%#171D2F
90%#10121B
100%#000000
Usage Guide
- Select a base color.
- Tints are generated by mixing the base color with white.
- Shades are generated by mixing the base color with black.
- Click on any color box to quickly copy its code.
Tints vs. Shades
Tints
Adding white to a pure color to increase its lightness.
Shades
Adding black to a pure color to decrease its lightness.