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 Online

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

Color

Summary

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

How it works

Enter a HEX color
The tool generates a scale of shades and tints
Copy individual swatches or export all HEX codes as a list

Use cases

Build a Tailwind-style color scale for a design system
Create depth in a single-hue UI
Generate consistent hover and active state colors

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu