Color Shades Generator
Generate lighter tints and darker shades of any color.
Keep or share the finished result
Copy or share after running the tool. Saved tools and settings stay in this browser.
What would you like to do next?
Generate color shades
Pick a base color above and a row of variations appears, stepping from light tints down to dark shades while keeping the same hue. Click any swatch to copy its hex code. This is perfect for building a consistent set of UI colors, like hover and active states, from a single brand color. It runs in your browser.
Tints and shades
Tints are lighter versions made by adding white, and shades are darker ones made by adding black, all derived from your chosen color.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a lighter version of a color and a shade is a darker version. This tool generates a range of both.
How do I copy a shade?
Click any swatch and its hex code is copied to your clipboard, ready to paste.