Tint & Shade Generator

Generate 10 tints (lighter) and 10 shades (darker) from any base color.

Processed on your device — never uploaded
9%

#4D8DF7

18%

#5F99F8

27%

#70A4F8

36%

#82AFF9

45%

#94BBFA

55%

#A6C6FB

64%

#B8D2FC

73%

#CADDFD

82%

#DBE8FD

91%

#EDF4FE

9%

#050C16

18%

#0B182D

27%

#102343

36%

#152F59

45%

#1B3B70

55%

#204786

64%

#26539D

73%

#2B5FB3

82%

#306AC9

91%

#3676E0

Frequently Asked Questions

What is the difference between a tint and a shade?
A tint is created by adding white to a base color to make it lighter, while a shade is created by adding black to make it darker.
How many tints and shades does this tool generate?
This tool generates 10 tints (progressively lighter) and 10 shades (progressively darker) from any base hex color you provide.
Can I use the generated tints and shades in my design system?
Yes, each generated color includes its hex code which you can copy and use directly in CSS, Figma, Sketch, or any design tool.
How are tints and shades calculated?
Tints are calculated by linearly interpolating each RGB channel toward 255 (white), and shades by interpolating toward 0 (black), at evenly spaced intervals.