Shade Generator
Turn one color into a full 50 to 900 scale of tints and shades - ready to copy as CSS variables for a design system.
CSS variables - paste inside :root
One color, a whole system
Real interfaces need many versions of a single color: a pale tint for a hovered row, a mid tone for a badge, a deep shade for text on a light card. Rather than eyeballing each one, a numbered scale gives you a consistent, documented set. This tool takes your base color, places it at step 500, and generates five lighter tints and four darker shades around it - the same 50 to 900 pattern used by popular design frameworks.
How the steps are built
Steps 50 through 400 mix your color progressively toward white, so 50 is almost paper-white with just a hint of the hue, while 400 is a soft version of the original. Steps 600 through 900 mix toward black, deepening the color while keeping its character. Because every step shares the same hue, the ramp reads as one family rather than ten unrelated colors.
Putting it to work
- Backgrounds - 50 and 100 for subtle surfaces and hovered states.
- Borders and dividers - 200 and 300.
- Primary actions - 500 or 600, with 700 for the pressed state.
- Text on light backgrounds - 700 to 900 for enough contrast.
Always sanity-check text combinations with the contrast checker before shipping. To sample or fine-tune the base color first, use the color picker or the HEX to RGB converter, and if you want a gradient rather than a stepped scale, the gradient generator blends the same colors smoothly.