How many shades are generated?

The default output is 10 steps from lightest to darkest, following a pattern similar to design system scales like Tailwind or Material Design.

What is the difference between shades and tints?

Tints are the base color mixed with white (lighter), while shades are the base color mixed with black (darker). This tool generates both above and below the input color.

Can I control the number of steps?

Yes. You can adjust the step count from 5 to 20 using the slider before copying.

Are the output values suitable for Tailwind CSS?

Yes. The 10-step output maps directly to the 100-900 Tailwind scale. You can paste the HEX values into a Tailwind config as a custom color.

Monochromatic Shades Generator

Enter a base color and get 10 shades ranging from near-white to near-black.

Color

Last updated: 2026-06-10 · Reviewed by Nham Vu