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.
Part of: Pull a colour palette out of an image
Dominant colours give you the brand; the harmony tools give you the rest of the set.
- 1 Dominant colors The colours actually in the image, by area
- 2 Average color The single colour it reads as from far away
- 3 Color shades Tints and shades of one of them
- 4 Complementary What to pair it with
- 5 WCAG contrast Whether text on it passes WCAG