About the Lighten and Darken Color
Interactive states need a colour a little lighter or darker than the base: a button that darkens on hover, a border a shade off the background. This tool adjusts a colour's lightness by the percentage you set, in either direction, and shows the result as HEX, RGB and HSL with a swatch. Because it works in HSL, the hue and saturation stay put while only the lightness changes.
The clamping at either end is worth planning around. A colour already sitting at 92 percent lightness cannot be lightened by another 10 percent in any visible sense, so a rule that says "hover is always ten percent lighter" quietly does nothing on your palest button while working fine on the rest. Design systems usually answer this by darkening light colours on hover and lightening dark ones, instead of committing to a single direction.
A fixed percentage also reads differently depending on where you start: the same step is far more noticeable on a mid-tone than near white or near black, so a row of buttons in different colours will not feel consistent even though the numbers are. Where consistency across a set matters, decide the steps once and verify the pairs you will actually ship with the Contrast Checker.
It is the quick single-step version of what the Shades Generator does across a whole scale. To blend toward another colour rather than toward white or black, use the Color Mixer.
How to use
- Enter a colour.
- Choose lighten or darken and the amount.
- Copy the adjusted colour.
Common questions
- Does the hue change?
- No. Only the lightness is adjusted, so the colour stays recognisably the same.
- How much should I adjust for a hover state?
- Around 8 to 12 percent is typical for a subtle but noticeable change.
- What if I go past pure white or black?
- The lightness is clamped, so you cannot go beyond white or black.