How to use the Tints & Shades Generator
- Choose a base color.
- Set how many steps you want.
- Copy individual swatches or the full scale.
What does this tool do?
Tints mix the color with white; shades mix it with black. A consistent scale is the backbone of most design systems, giving you hover states, backgrounds and borders that all belong together.
Why use it?
- Build design-system color scales.
- Find hover and active states for buttons.
- Create backgrounds that match your brand.
Tip
Check text contrast with the Contrast Checker — light tints work as backgrounds, dark shades for text.
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
What's the difference between a tint, a shade and a tone?
A tint is the color mixed with white, a shade is the color mixed with black, and a tone is the color mixed with gray. Tints and shades together give a full light-to-dark scale.
How do I use the scale in CSS?
Copy the full scale as CSS variables and use them across your styles — for example a light tint for backgrounds, the base color for buttons and a dark shade for hover states and text.
Last reviewed by the M2Toolkit team.