Shades & Tints Generator
Build a range of shades and tints from any base color.
Tints (lighter)
Shades (darker)
Build Shades and Tints
A shade is a color mixed with black; a tint is a color mixed with white. Generating a consistent range of shades and tints from one base color is the foundation of a cohesive UI palette â for hover states, borders, backgrounds, and depth.
The terms
- Tint â base color + white (lighter)
- Shade â base color + black (darker)
- Tone â base color + grey (muted)
Where to use them
Use lighter tints for backgrounds and subtle fills, the base for primary actions, and darker shades for text, borders, and hover/pressed states.
Private & Processed Locally
Every shade and tint is computed in your browser. Click any swatch to copy its HEX value.
Frequently Asked Questions
Common questions about the Shades & Tints.
What is the difference between a shade and a tint?
A shade is a color mixed with black; a tint is a color mixed with white.
What are they used for?
Backgrounds, borders, hover states, and adding depth to a UI from a single base color.
Is it private?
Yes, all variations are computed in your browser.