Tints & Shades Generator
Generate lighter tints and darker shades of any color for a full ramp.
A single brand color is never enough for a real interface: you need a lighter version for hover states, darker ones for pressed and active, and a muted tone for disabled controls. Tints (the color mixed toward white) and shades (mixed toward black) give you that whole ramp from one starting point.
Enter a base color and this tool produces six progressively lighter tints and six progressively darker shades, each with a copyable hex code — the foundation of a design-system color scale you can drop into CSS variables or a Tailwind config.
How to use Tints & Shades Generator
- 1
Choose a base color
Pick or type your brand or accent color.
- 2
Review the ramp
Tints lighten toward white; shades darken toward black.
- 3
Copy the hex codes
Click any swatch to copy it for your design tokens.
Features
- Six tints and six shades per color
- Click-to-copy hex values
- Ideal for hover/active/disabled UI states
Frequently asked questions
Common mistakes to avoid
- Using a very light tint for text — check contrast against the background before shipping.
- Generating shades from an already-dark base, which quickly bottoms out near black; start from a mid-tone.
Get new tools in your inbox
One email a month with new tools, guides, and updates. No spam, unsubscribe anytime.