What it does
Tint & Shade Generator turns hex colours into lighter and darker palettes. It accepts several base colours and offers 5%, 10% or 20% increments, with code and value exports.
Enter hex values separated by spaces or use the colour picker. Choose the increment, then export hex, RGB, CSS or JSON values. The hashtag control changes how hex values are presented.
Tints move each RGB channel toward white; shades scale the channels toward black. Results are rounded to whole channel values before returning to hex. This makes the calculation method explicit when matching a palette across tools.
Related-colour options add complementary, split-complementary, analogous or triadic palettes. Sharing is available through a link or image, and the companion Figma plugin can create local colour styles.
The implementation is published under the MIT licence.
Strengths
- Multiple base colours can be handled in one input.
Watch out for
- The step-size choices are fixed at 5%, 10% and 20%.
Best for
- Designers expanding a few base colours into repeatable shade sets
Sources
- Tint & Shade Generator interface (Oct 27, 2026)
- Tint & Shade Generator method and features (Oct 27, 2026)
- Tint & Shade Generator MIT licence (Oct 27, 2026)