Color Tints Shades

This tool generates tints (lighter variants) and shades (darker variants) of a base color by stepping its HSL lightness toward 100% and toward 0% respectively. You choose how many steps (5-20) and click any swatch to copy its hex. Tints keep hue and saturation constant and raise lightness; shades lower it.

1. Pick a Base Color with the color picker or hex input. 2. Set the Steps slider between 5 and 20. 3. The Tints card shows lighter variants (each labeled with hex and step percent); the Shades card shows darker variants. 4. Click any swatch to copy its hex; a check icon confirms the copy.

The base color is converted to HSL. For step `i` of N, a tint sets `L = baseL + (100 - baseL) * (i / N)` and a shade sets `L = baseL - baseL * (i / N)`, with hue and saturation held constant. The percent label is `round((i / N) * 100)`, representing progress through the ramp rather than the lightness value. The resulting HSL is converted back to RGB and then to hex for display.