Darken / Lighten Color
Adjust any color's lightness with a slider and preview darker or lighter shades instantly, with a full step strip.
Result
#3c83f6
Steps
Pick a base color and drag the slider to darken or lighten it by adjusting HSL lightness while keeping the hue and saturation intact. A strip of preset steps shows the full range at a glance, all computed instantly in your browser.
How to use
- Pick or type a base color.
- Drag the slider left to darken or right to lighten.
- Copy the resulting hex code or pick a step from the strip below.
Frequently asked questions
- How is the color adjusted?
- The tool converts your color to HSL and shifts the lightness value up or down by the chosen percentage, then converts it back to hex.
- Why does the hue stay the same?
- Only lightness is changed, so the underlying color family (hue) and vividness (saturation) are preserved for a natural-looking shade or tint.
- Can I get several shades at once?
- Yes, the steps strip below the slider shows nine preset adjustments from -80% to +80% that you can click to apply.