How to use lighten / darken
- Enter the Colour you want to change.
- Choose the Direction: Lighten or Darken.
- Set the Amount from 0% to 100%.
- Pick a Method: HSL lightness, OKLCH lightness or mix with white / black.
- Read the Result and its RGB, HSL and OKLCH values, and look at the 0–50% ladder for nearby steps.
What it does and when to use it
A hover state, a pressed button, a light background for an alert, a dark border for a card: all of them need “the same colour, a bit lighter or darker”. This tool does that one job, with the three methods people usually mean, so you can match an existing codebase or pick the method that looks best.
The three methods give clearly different results for the same amount, as the examples show. For many evenly spaced steps at once, use the tints and shades generator. To change hue or saturation as well, try the HSL adjuster. If you write modern CSS, the CSS color-mix() generator produces a line that does the mix method in the browser.
How it works
- HSL lightness. Convert to HSL, add the amount to L in percentage points (subtract to darken), cap at 0–100%, convert back. Hue and saturation stay the same.
- OKLCH lightness. Convert to OKLCH, add amount ÷ 100 to L on its 0–1 scale, keep chroma and hue, then gamut-map to sRGB if needed.
- Mix with white / black. Interpolate in sRGB: result = colour + (white or black − colour) × amount ÷ 100.
Worked examples
All results are from the tool, starting from blue #3b82f6.
| Change | Method | Result |
|---|---|---|
| Lighten 20% | HSL lightness | #9dc0fa |
| Lighten 20% | OKLCH lightness | #9bc6ff |
| Lighten 20% | Mix with white | #629bf8 |
| Darken 50% | Mix with black | #1e417b |
HSL and OKLCH give similar light blues, while the mix gives a much smaller change, because 20% of the way to white is a gentle step. The HSL ladder for lightening is #3b82f6, #6ca1f8, #9dc0fa, #cddffd, #fefeff and #ffffff: by 40% it is already nearly white.
Limits and tips
- HSL steps are not visually even across hues, so compare the same step on a yellow and a blue before relying on it.
- Very light colours cannot lighten much, and very dark ones cannot darken much.
- Recheck text contrast after any change with the contrast checker.
- All calculations run in your browser.
Frequently asked questions
Does the HSL method match Sass lighten() and darken()?
Why does lightening by 50% give pure white?
Which method should I choose?
Is darkening with mix the same as adding a black overlay?
Can I make a colour lighter without it turning pale and grey?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.