Color Shades Generator
Generate a run of shades from a base colour — the same hue stepped from your colour down toward black. Shades are what you reach for on hover and pressed states, drop shadows, and depth in a UI. Pick a colour and a count; click any swatch to copy its hex.
Shades, tints and tones
Strictly, a shade mixes a colour with black (darker), a tint mixes it with white (lighter), and a tone mixes it with gray (less saturated). This tool produces shades — darker steps — which are the ones you most often need for interactive states and shadows. For the full light-to-dark range, use the monochromatic generator.
FAQ
How do I get a darker version of a color?
Enter your colour above and the generator produces several progressively darker shades of it. Click any swatch to copy the hex.
I want lighter versions too.
The monochromatic generator spans both lighter tints and darker shades of one hue.