Shades and Tints Generator Color
Generate a full lightness ramp from any color, perfect for design tokens.
Shades and Tints Generator is a free online tool that generate a full lightness ramp from any color, perfect for design tokens. It runs entirely in your web browser using plain JavaScript, so files are processed on your own device and never uploaded to a server. There is no sign-up, no file size limit imposed by the site, no watermark and no paid tier.
- Price
- Free: no account, no quota, no watermark
- Category
- Color
- Where it runs
- In your browser, on your device
- Files uploaded
- None
- Technology
- plain JavaScript
- Settings
- 2
- Works offline
- Yes, after the first visit
About Shades and Tints Generator
A shade is a color mixed toward black; a tint is the same color mixed toward white. Design systems need both as a full ramp, typically ten steps running from a near-white 50 to a near-black 900, so that text, borders and backgrounds all draw from one consistent hue instead of independently chosen colors that drift apart. This keeps the hue and saturation fixed and steps only the lightness, which is what Tailwind, Material and most token systems do internally.
How to use it
- Enter base color and steps.
- Results update the moment anything changes.
The 2 settings
| Setting | What it does | Default |
|---|---|---|
| Base color | A color, picked from your system color picker. | #FFD84D |
| Steps | Range 3–20. | 10 |
Under the hood
| Runs on | plain JavaScript: runs the whole thing |
| Controls | Base color, Steps |
Questions
What are the limits on steps?
It accepts 3 to 20, starting at 10.