Tint & Shade Generator
Generate a complete scale of tints (lighter) and shades (darker) from any base color. Perfect for creating design systems, UI components, and consistent color palettes.
Generate Variations
Tints (Adding White)
Base Color
#3B82F6
Shades (Adding Black)
What Are Tints & Shades?
- Tints
- Created by adding white to a base color, making it progressively lighter while maintaining hue.
- Shades
- Created by adding black to a base color, making it progressively darker while maintaining hue.
- Use Cases
- Hover states, focus rings, backgrounds, borders, disabled states, and more.