What is the difference between a tint and a shade?

A tint is a color mixed with white (lighter), while a shade is a color mixed with black (darker). This tool generates both from a single base color.

How are the intermediate steps calculated?

Each step linearly interpolates the red, green, and blue channels between the base color and white (for tints) or black (for shades). A 5-step tint scale at step 3 is a 60% mix of white with the base color.

Can I generate more than 10 steps?

Yes. The slider allows 2 to 20 steps. More steps give a finer-grained gradient; fewer steps give bolder contrast between each level.

What hex formats are accepted?

Both 3-digit shorthand (#RGB) and 6-digit full (#RRGGBB) hex codes are supported, with or without the leading #.

Does the base color appear in the output?

Yes. The base color is always shown in the center of the swatch grid, between the tints and shades.

Shade Generator

Name: Shade Generator
Availability: InStock
Author: Nham Vu

Enter any hex color to generate a range of lighter tints and darker shades, with copy buttons for every swatch.

Settings

Base Color

Steps per side: 5

220

Quick Presets

Copied!

Tints (mixed with white)

Base Color

Shades (mixed with black)

Summary

Enter any hex color to generate a range of lighter tints and darker shades, with copy buttons for every swatch.

How it works

Enter or paste any valid hex color (e.g. #3B82F6).
Use the slider to choose how many tint/shade steps to generate (2–20).
The tool calculates each step by linearly interpolating the RGB channels toward white (tints) or black (shades).
Swatches appear instantly — hover to reveal the hex and RGB values.
Click any swatch or its copy button to copy the hex value to your clipboard.

Use cases

Build a consistent color scale for a design system or component library.
Generate Tailwind-style 100–900 shades for a brand color.
Preview how a color lightens and darkens before committing to a palette.
Copy hex values directly into CSS custom properties or SCSS variables.
Find accessible lighter or darker variants that pass contrast checks.
Quickly explore the tonal range of a client brand color.

Frequently Asked Questions

Related tools

Color Contrast Checker Gradient Generator Pastel Palette Generator

Last updated: 2026-05-28 · Reviewed by Nham Vu