Colormapped
Color tool

Lighten or Darken a Color

Adjust a HEX color by changing HSL lightness in percentage points.

Positive values raise HSL lightness; negative values lower it. This changes HSL lightness by percentage points, not perceived luminance uniformly.

What this tool does

This tool changes the HSL lightness component by a requested number of percentage points, then converts the adjusted HSL value back to RGB/HEX.

Enter the values in the calculator above and choose Calculate. The calculation runs in your browser; the inputs are not intentionally sent to a Colormapped application server.

How it works

  1. Convert the base HEX color to HSL.
  2. Add the requested value to HSL lightness and clamp the result to 0–100%.
  3. Keep hue and saturation at their converted values.
  4. Convert the adjusted HSL value back to RGB and HEX.

Worked example

Input#5B5CF0 with +10 lightness points
Output#8A8AF4

The rounded starting HSL is approximately 240° 83% 65%; raising lightness to 75% produces the displayed result.

When to use it

  • Explore a lighter or darker HSL variant while keeping the same nominal hue/saturation.
  • Create quick state-color candidates from a known base.
  • Compare HSL lightness adjustment with the RGB-based Tints & Shades Generator.

Accuracy and limits

  • HSL lightness is not perceptually uniform.
  • Because the converter rounds HSL values, a transformed color can differ slightly from a high-precision color-management result.

Useful next steps

Tints & Shades Compare HSL lightness changes with RGB blends toward white or black. Contrast Checker Measure the adjusted color against the actual surface it will use. Color Reference Check nearby curated colors, CSS values, and related variants.