Shades & Tints Generator

Generate lighter and darker variations of any color.

#5D00FF Base Color
Full Palette Preview
Export All:

Shades (+ Black)

#5500E8 rgb(85, 0, 232) 9% black Copy
#4C00D1 rgb(76, 0, 209) 18% black Copy
#4400B9 rgb(68, 0, 185) 27% black Copy
#3B00A2 rgb(59, 0, 162) 36% black Copy
#33008B rgb(51, 0, 139) 45% black Copy
#2A0074 rgb(42, 0, 116) 55% black Copy
#22005D rgb(34, 0, 93) 64% black Copy
#190046 rgb(25, 0, 70) 73% black Copy
#11002E rgb(17, 0, 46) 82% black Copy
#080017 rgb(8, 0, 23) 91% black Copy

Tints (+ White)

#6C17FF rgb(108, 23, 255) 9% white Copy
#7A2EFF rgb(122, 46, 255) 18% white Copy
#8946FF rgb(137, 70, 255) 27% white Copy
#985DFF rgb(152, 93, 255) 36% white Copy
#A774FF rgb(167, 116, 255) 45% white Copy
#B58BFF rgb(181, 139, 255) 55% white Copy
#C4A2FF rgb(196, 162, 255) 64% white Copy
#D3B9FF rgb(211, 185, 255) 73% white Copy
#E2D1FF rgb(226, 209, 255) 82% white Copy
#F0E8FF rgb(240, 232, 255) 91% white Copy

Frequently Asked Questions

What is the difference between shades and tints?

Shades are created by mixing a color with black, making it darker. Tints are created by mixing a color with white, making it lighter. Tones are created by mixing with gray. Together, shades and tints give you the full range of a color from nearly black to nearly white, essential for building cohesive color systems.

How many steps are generated?

By default, the tool generates 10 shades (progressively darker) and 10 tints (progressively lighter) with even spacing. You can adjust the number of steps from 5 to 20 for finer or coarser gradations. More steps give you subtler differences between adjacent colors.

Why are shades and tints important for design?

Design systems need multiple values of each brand color for hover states, disabled states, backgrounds, borders, and text. A single blue might need 8-12 variations. Generating shades and tints from a base color ensures consistency and visual harmony across your interface.

How is this different from adjusting opacity?

Opacity makes a color transparent, letting the background show through. Shades and tints create new solid colors. A 50% opacity blue on a white background looks similar to a blue tint, but on a red background they look completely different. Use shades/tints when you need consistent solid colors.

Can I use these values in Tailwind CSS or design tokens?

Yes — copy the entire scale as a Tailwind color config object or as CSS custom properties (--color-50 through --color-900). The output follows the common 50-900 scale convention used by Tailwind CSS, Material Design, and most design token systems.