Color Shades Generator
Start from one HEX color and get a strip of lighter tints and darker shades, each with a copyable hex code for your palette.
How it works
A tint is your color blended toward white; a shade is the same color blended toward black. Give the generator one base hex and it builds a ladder of both, so a single brand color turns into a full working palette.
Each step mixes a fixed amount of white or black into the base RGB values, then converts the result back to hex. That's why the tints get progressively paler and the shades progressively deeper while the underlying color stays recognizable.
Use the lighter tints for backgrounds and hover states and the darker shades for text or borders. Every swatch has a copy button, so you can drop the exact hex straight into your CSS or design tool.
Frequently asked questions
What's the difference between a tint and a shade?
A tint adds white to lighten a color, so #4F46E5 drifts toward a soft lavender. A shade adds black to darken it, pushing the same color toward a deep navy. This tool shows both from one starting hex.
How many variants does it generate?
You get four tints and four shades flanking your base color, giving nine swatches in total. That's usually enough to cover backgrounds, borders, and text without the palette feeling cramped.
Can I copy the hex codes?
Yes. Every swatch has its own copy button that puts the hex on your clipboard, so you can build the palette in your stylesheet or design file without retyping anything.