Color Shades & Tints Generator
Generate a full range of shades and tints from a single base color.
Last updated August 26, 2026
About this tool
Design systems typically need a full range of shades (darker variants) and tints (lighter variants) of each brand color — for hover states, disabled states, borders, and backgrounds. This tool takes one base color and generates a 10-step scale from very light to very dark by holding hue and saturation constant and varying only lightness.
Frequently asked questions
How is this different from just adjusting opacity?
Opacity blends a color with whatever is behind it, which changes depending on the background. These shades are solid, self-contained colors generated by varying lightness in HSL space, so they look consistent on any background.
Why do some steps look similar near the ends of the scale?
At very high or very low lightness, colors naturally converge toward white or black regardless of hue, so the most visually distinct steps tend to be in the middle of the range.