Shade & Tint Generator
Generate lighter tints and darker shades of any color.
Tints (lighter)
Shades (darker)
Examples
| Input | Result |
|---|---|
| Base: #E8792D, Steps: 5 (tints) | #E8792D, #EC9457, #F1AF81, #F5CAAB, #FAE4D5 |
| Base: #E8792D, Steps: 5 (shades) | #E8792D, #BA6124, #8B491B, #5D3012, #2E1809 |
| Base: #3498DB, Steps: 10 | 10 tints from #3498DB toward white, 10 shades from #3498DB toward black |
| Base: #2ECC71, Steps: 3 (shades) | #2ECC71, #1F884B, #0F4426 |
About this tool
The shade and tint generator takes a base color and produces a range of lighter tints and darker shades. You control how many steps to generate (from 3 to 20), and the tool creates an evenly spaced ramp in each direction. This is useful for building design systems where you need a full color scale from a single brand color.
Every generated color is displayed as a swatch with its HEX code, and each value can be copied individually. The shades move the base color toward black by reducing each RGB channel proportionally, while the tints move it toward white by increasing each channel. This produces a natural-looking gradient that keeps the hue consistent across the entire range.
Frequently asked questions
What is the difference between a shade and a tint?
A shade is a color mixed with black, making it darker. A tint is a color mixed with white, making it lighter. The original color sits between its tints and shades.
How many steps can I generate?
You can generate between 3 and 20 steps for both tints and shades. More steps give you finer gradations between the base color and the endpoint.
How are the shades and tints calculated?
Shades are generated by interpolating each RGB channel from the base color toward 0 (black). Tints interpolate each RGB channel from the base color toward 255 (white). The steps are evenly spaced.