Tint & Shade Generator
Generate a full range of lighter tints and darker shades from any base color. Copy HEX, RGB or CSS variable for each step. Free, browser-based.
🎨 Design & Color Tools
Free
Browser-based
Tints (lighter)
Base Color
Shades (darker)
What Are Tints and Shades?
A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. Together, tints and shades form a complete lightness scale from a single base color — essential for creating consistent design systems and UI component states.
Common Uses in Design
| Use Case | Typical Step |
|---|---|
| Background / surface | 90–95% tint |
| Hover state | 10–20% lighter or darker |
| Active / pressed state | 20–30% shade |
| Disabled text | 60–70% tint |
| Body text on colored bg | 80–90% shade |
Design System Naming
Many design systems (Material, Tailwind, Ant Design) name tint/shade scales numerically: 50 (lightest) → 100 → 200 → … → 900 (darkest). This tool generates the same type of palette you can drop directly into CSS custom properties.