Shade & Tint Generator
Generate shades (darker), tints (lighter), and full color scales.
What are Shades and Tints?
In color theory, shades are created by adding black to a base color, making it darker. Tints are created by adding white, making the color lighter. Together, shades and tints form a complete color scale that's essential for professional design systems.
This tool generates both tints and shades from any color, plus a full numbered scale (50-950) similar to what you'd find in Tailwind CSS or Material Design. Perfect for creating consistent UI color palettes.
Understanding Color Scales
Tints (50-400)
Lighter variations of your base color. Use tints for backgrounds, hover states, and subtle accents. Lower numbers are lighter.
Base Color (500)
Your original input color. This becomes the primary brand color or main accent in your design system.
Shades (600-950)
Darker variations for text, borders, and emphasis. Higher numbers are darker. Great for contrast.
Full Scale
The complete range from near-white to near-black. Compatible with Tailwind CSS naming conventions.
How to Use This Tool
- Enter your base color using the color picker or hex code
- Click "Generate" to create the complete color scale
- Browse tints (lighter) and shades (darker) separately
- Use the full scale for Tailwind-style color systems
- Click any swatch to copy its hex code
Design System Applications
- Background Colors: Use tints (50-200) for page backgrounds and card surfaces
- Interactive States: Use adjacent values for hover/active states (e.g., 500 → 600)
- Text Colors: Use shades (700-900) for readable body and heading text
- Borders & Dividers: Use mid-range values (200-400) for subtle separators