Tint and Shades Generator - Color Scale from Base Hex

What Is Tint and Shades Generator?

Tint and Shades Generator builds a visual scale around one base hex color. Tints mix the base toward white, while shades mix it toward black, which matches common UI and brand palette workflows.

How It Works

For each step count, the tool linearly blends your RGB base with white or black at evenly spaced ratios. The base swatch sits in the middle, lighter tints appear above it in the grid order, and darker shades appear below. You can copy the tab-separated list for spreadsheets or design tokens.

How to Use It

Enter a hex color (three- or six-digit form, with or without a leading hash).
Adjust the step slider to control how many tints and shades appear on each side.
Copy hex codes from the cards or export the full list from the text panel.

Frequently Asked Questions

What is the difference between a tint and a shade?

Here, tints move the color toward white for lighter UI states, while shades move it toward black for pressed or high-contrast variants.

Does this replace perceptual color spaces like HSL?

RGB mixing is simple and predictable, but not perceptually uniform. For accessibility-critical contrast, pair these ramps with a contrast checker against your background colors.

Can I export to CSS variables?

Use the tab-separated export as a starting point, then map each row to your preferred naming scheme in your stylesheet or design token file.

Why does invalid hex show an error instead of output?

The generator only runs when it can parse a full six-channel hex value (after expanding three-digit shorthand), so you get immediate feedback instead of misleading swatches.