Color Shades & Tints Generator
Generate lighter tints and darker shades of any color as a swatch strip — copy any hex.
#726bea#9590ef#b9b5f5#dcdafa#4f46e5#100e2e#201c5c#2f2a89#3f38b7About Color Shades & Tints Generator
Enter a base color and get a strip of lighter tints (mixed toward white) and darker shades (mixed toward black) around it — perfect for building a consistent set of hover, active and background variants from a single brand color. Each swatch shows its hex code with a copy button, and clicking a swatch makes it the new base.
Tints and shades are generated by mixing the color with white or black at even steps. Everything runs locally in your browser; nothing is uploaded.
From one color
#4f46e5
4 tints → base → 4 shades, e.g. #dcdbfa … #4f46e5 … #100e2e
Click any swatch to make it the new base color.
Frequently asked questions
What's the difference between a tint and a shade?
A tint is the color mixed with white (lighter); a shade is the color mixed with black (darker). Together they give you a range around your base color.
How are the variants calculated?
By blending the base color toward white (tints) or black (shades) at even percentage steps, which keeps the hue consistent.
Can I copy the hex codes?
Yes. Every swatch shows its hex with a copy button, and clicking a swatch sets it as the new base color.
Is anything uploaded?
No. All colors are generated locally in your browser.