Skip to content
M2TOOLKIT

Popular tools

Menu

Tints & Shades Generator

Generate evenly spaced lighter and darker versions of any color.

  • Free
  • No sign-up
  • Runs in your browser
9

Tints (mixed with white)

#415ADA
10%
#566DDE
20%
#6B7FE2
30%
#8091E6
40%
#96A4EB
50%
#ABB6EF
60%
#C0C8F3
70%
#D5DAF7
80%
#EAEDFB
90%

Shades (mixed with black)

#2841C1
10%
#233AAB
20%
#1F3296
30%
#1A2B80
40%
#16246B
50%
#121D56
60%
#0D1640
70%
#090E2B
80%
#040715
90%

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the Tints & Shades Generator

  1. Choose a base color.
  2. Set how many steps you want.
  3. Copy individual swatches or the full scale.

What does this tool do?

Tints mix the color with white; shades mix it with black. A consistent scale is the backbone of most design systems, giving you hover states, backgrounds and borders that all belong together.

Why use it?

  • Build design-system color scales.
  • Find hover and active states for buttons.
  • Create backgrounds that match your brand.

Tip

Check text contrast with the Contrast Checker — light tints work as backgrounds, dark shades for text.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Helpful guides

Other tools people use alongside the tints & shades generator.