Shades Generator

How to generate shades of a color

1. Pick or paste a base color, or hit Random to start from a surprise.
2. Choose a mode: tints and shades, tints only, shades only, tones, saturation or hue shift.
3. Set the number of steps with the slider, from 5 up to 15.
4. Click any step to inspect it on the right, then copy its HEX, RGB, HSL, HSV or CMYK.

Difference between tints, shades and tones

These three words get mixed up constantly, and the mode tabs map straight onto them. The base color stays the same; only what you add to it changes:

Why color shades use a 50 to 950 scale

At 11 steps the generator labels each shade 50, 100, 200 and so on up to 950, the same numbering popularised by Tailwind and Material Design. The reason it caught on is practical: 500 is the base, lower numbers are lighter, higher numbers are darker, so naming a token --blue-700 tells everyone exactly how dark it is. It makes a color scale predictable across a whole design system.

What is the hue shift mode for?

A plain lightness ramp can look flat and slightly muddy at the dark end. Hue shift fixes that by nudging the hue as it goes, warmer in the lights and cooler in the shadows, which is how hand-built designer ramps and tools like the Material palette keep their darks lively. It is the mode to reach for when a flat tint-and-shade scale feels lifeless.

How do I use a shade scale in a design system?

• Map the steps to roles: 50 to 100 for backgrounds, 200 to 400 for borders and muted text, 600 to 950 for text and pressed states.
• Keep body text and its background well past the WCAG contrast minimum of 4.5 to 1.
• Hit Copy CSS vars to export the whole ramp as --shade-50 through --shade-950.
• Build one scale per brand color, then combine them with a color scheme.

Tints, shades or tones: which should I use?

For light and dark variants of a UI color, tints and shades is the default. Choose tones when a color feels too loud and you want to calm it without changing how light it is, and saturation mode when you specifically want to compare the same color from dull to vivid. To fine-tune the base itself before generating, open it in the HSL picker.