Shades & Tints Generator

Generate lighter and darker variations of any color.

#5D00FF Base Color

Shades (+ Black)

#5500E8 9% black ⧉
#4C00D1 18% black ⧉
#4400B9 27% black ⧉
#3B00A2 36% black ⧉
#33008B 45% black ⧉
#2A0074 55% black ⧉
#22005D 64% black ⧉
#190046 73% black ⧉
#11002E 82% black ⧉
#080017 91% black ⧉

Tints (+ White)

#6C17FF 9% white ⧉
#7A2EFF 18% white ⧉
#8946FF 27% white ⧉
#985DFF 36% white ⧉
#A774FF 45% white ⧉
#B58BFF 55% white ⧉
#C4A2FF 64% white ⧉
#D3B9FF 73% white ⧉
#E2D1FF 82% white ⧉
#F0E8FF 91% white ⧉

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.