Shades and tints generator
Enter a color to get lighter and darker versions of it. Click any swatch to copy its hex code.
Tints (lighter)
Shades (darker)
Tints vs. shades
A tint is a color mixed with white, so it gets lighter. A shade is a color mixed with black, so it gets darker. Each step here adds 10% more white or black.
They're useful for hover states, backgrounds, borders and charts that need several related colors from one brand color. Check that text stays readable with the contrast checker.