Tint and Shades Generator

Generate 5 tints (progressively lighter) and 5 shades (progressively darker) of any colour. Each step shows the HEX code and a live swatch — useful for building colour scales and palette systems.

Last updated: May 29, 2026

Base colour

Enter a HEX code to generate 5 tints (lighter, +10–50% lightness) and 5 shades (darker, −10–50% lightness) using HSL.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Tint and Shades Generator?

Tints are created by increasing the lightness (L) in the HSL model — mixing the colour with white. Shades are created by decreasing lightness — mixing with black. Together, a tint-to-shade scale gives you a full lightness range from a single base colour.

This is the foundational technique behind colour scale systems like Tailwind CSS (50 through 950) and Material Design colour palettes. This tool generates 5 tints and 5 shades in equal lightness steps.

How to Use Tint and Shades Generator

Enter a HEX code or use the colour picker

5 tints and 5 shades appear instantly

Copy any HEX code for use in your design system or CSS

Common Use Cases

Design system authors building a full colour scale from a single brand colour.
Frontend developers creating hover, active, and focus state variants of a primary colour.
Designers exploring the full lightness range of a hue before committing to a palette.
Developers generating CSS custom property colour tokens for a component library.

Example Input and Output

Generating a lightness scale from the Tailwind blue-500.

Base colour

#3B82F6

Tints and shades

Tints: #5F97F8, #82ABF9... | Shades: #2E6BD4, #2256B2...

For full scales

For a complete 10-step scale like Tailwind, combine the shades on the left with the base in the middle and tints on the right.

Browser-side only

All generation runs locally in your browser.

Frequently Asked Questions

How are tints and shades calculated?

Tints increase the HSL lightness channel in steps of 10 percentage points (up to 100%). Shades decrease lightness in steps of 10 percentage points (down to 0%).

Does saturation change?

No — only lightness changes. Hue and saturation are held constant, so the steps feel like the same colour at different brightness levels.

Is my data sent to a server?

No. All generation runs in your browser.