Tints & Shades
Generate lighter and darker variants of any color
Tints (lighter)
Base
Shades (darker)
About Tints & Shades
A tint is a color mixed with white (lighter), and a shade is a color mixed with black (darker). Generating tints and shades from a brand or accent color is a fast way to build a usable palette of background, surface, hover, and pressed states for a UI.
Click any swatch to copy its hex code. Use these as a starting point — you may want to fine-tune luminance and saturation in HSL for a more designer-friendly result.
Frequently asked questions
What's the difference between a tint, a tone, and a shade?
A tint is the color mixed with white. A shade is the color mixed with black. A tone is the color mixed with gray (which desaturates it). This generator handles tints and shades.
Are these RGB or HSL based?
RGB linear interpolation between the base color and pure white/black. This is fast and intuitive but doesn't always look perceptually uniform — for high-end design work, HSL or OKLCH-based stepping may produce smoother results.