What is the difference between a shade and a tint?

A tint is a color mixed with white, which increases lightness. A shade is a color mixed with black, which decreases lightness.

How do I generate a color scale for Tailwind CSS?

Set the steps to 5 to generate a perfect 11-step scale ranging from 50 to 950. The tool automatically maps your base color to the 500 weight.

Can I copy all the generated colors at once?

Yes, you can select your preferred format (HEX, RGB, or HSL) and click 'Copy All to Clipboard' to copy the entire scale in one go.

How are the colors calculated?

The colors are generated using RGB interpolation. The base color is mixed with pure white for tints and pure black for shades in equal steps.

Tool

Shades & Tints Generator

Generate proportional shades and tints from a single base color. Create balanced, multi-step scales for your design system.

Generator Controls

Base Color

Steps (each way)

Copy Format

About the Shades & Tints Generator

This tool helps you quickly build a monochromatic scale around a single primary color. By algorithmically mixing your base color with pure white and pure black, it guarantees a mathematically balanced spectrum of tints and shades.

When to use it

Design Systems: Generating 100-900 range palettes for a cohesive design language.
UI States: Finding slightly lighter (hover) or darker (active) variations of a button color.
Tailwind CSS: Creating custom color configuration scales that map perfectly to standard Tailwind weights.

Shades & Tints Generator

Generator Controls

About the Shades & Tints Generator

When to use it

Frequently Asked Questions

Related Tools