Tool
Shade & tint generator
Enter a base color to generate a smooth ramp of tints (lighter) and shades (darker). Click any swatch to copy its HEX.
Tints (lighter)
Shades (darker)
Tints, shades, and tones
A tint mixes a color with white (lighter), a shade mixes it with black (darker), and a tone mixes it with grey (more muted). Ramps like these are the backbone of UI color scales (think Tailwind’s 50–900) and dark-mode variants.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a color mixed with white (lighter); a shade is a color mixed with black (darker). A tone is mixed with grey.
How do I build a color scale for UI?
Generate evenly spaced tints and shades of your base color, then map them to steps like 50, 100 … 900 for backgrounds, borders, and text.