Tints & Shades Generator
Generate a full range of tints (lighter) and shades (darker) for any base color.
100% client-side · no upload
How to use
- Type or paste a hex color code (e.g. #6366f1) into the input.
- Click Generate Tints & Shades to produce 10 tints (lighter, mixed with white) and 10 shades (darker, mixed with black).
- Copy any hex code from the output to use in your design system or palette.
Related tools
More ways to use this tool
Frequently Asked Questions
- What is the difference between tints and shades?
- Tints are created by mixing a color with white — lightening it. Shades are created by mixing with black — darkening it. Together they form the complete lightness range of a hue.
- Does my color data leave my device?
- No. All calculations run in JavaScript inside your browser. Nothing is sent to any server.
- Does it work on mobile?
- Yes. The tool is mobile-first and works on iPhone Safari and Android Chrome.
Last updated: By jarvisbox