Tints & shades generator
Generate lighter tints and darker shades of any color as a ready-to-use strip. Click a swatch to copy.
Click any swatch to copy its hex.
About this tints & shades generator
Enter a base color and get a strip of tints (mixed toward white) and shades (mixed toward black), arranged dark → base → light. Pick how many steps you want, and click any swatch to copy its hex.
Where to use them
Tints and shades give you the lighter and darker variants every UI needs — hover and active button states, borders, backgrounds, disabled states and elevation. Generating them from one base keeps a component visually consistent without hand-picking each value.
FAQ
What's the difference between a tint and a shade?
A tint is the color mixed toward white (lighter); a shade is the color mixed toward black (darker). A tone mixes toward grey.
How is this different from the palette generator?
This mixes straight toward white and black for the classic lighten/darken strip. The palette generator builds a perceptually-even OKLCH scale plus colour harmonies — use it for a full design-token ramp.