Adjust a color’s HSL lightness
The Lighten & Darken tool produces controlled variations by increasing or decreasing the lightness component of a selected color. It is useful when you want to explore lighter and darker values through a color-space adjustment.
Lightening and darkening a color
The tool converts the selected color to HSL, changes its lightness value and converts each result back to a HEX color. Hue and saturation are retained where the HSL model permits, while lightness moves toward its lighter or darker limit.
Enter a HEX color or use the picker, then choose the interval between variations. The two result rows show progressive lightness increases and decreases, and each HEX value can be copied or exported.
Lighten and darken versus tints and shades
Changing HSL lightness is not the same calculation as blending RGB channels with white or black. The results may look related, especially near the endpoints, but intermediate colors can differ because the two methods operate in different color representations.
Use Tints & Shades when you specifically want white and black color mixes.
Uses for lightness adjustments
A controlled lightness range makes it easier to compare candidates without manually editing each color.
- Explore lighter or darker candidates for hover, active and selected states.
- Compare values for surfaces, borders and visual hierarchy.
- Test how far a base color can move in lightness before choosing a smaller working range.