🌗 Darken and Lighten Color Tool
By ToolNimba Color Team · Updated 2026-06-19
Original
Adjusted
Scale (darker to lighter)
Pick a color and drag the slider. Click the adjusted swatch or any scale swatch to copy its hex.
Need a darker version of a button color for its hover state, or a lighter tint of a brand color for a background? Pick any color, then drag one slider from -100% (darker) to +100% (lighter). The tool adjusts the lightness in HSL while keeping the same hue and saturation, shows the original next to the adjusted swatch, gives you the resulting hex code, and lays out a small scale of even steps you can copy with a click.
What is the Darken or Lighten Color?
Darkening or lightening a color is easiest in the HSL model. HSL describes a color by hue (the angle on the color wheel, 0 to 360 degrees), saturation (how vivid it is, 0 to 100 percent) and lightness (how bright it is, 0 percent is black, 50 percent is the pure color and 100 percent is white). To shift a color toward black or white while keeping it recognisably the same color, you change only the lightness and leave hue and saturation alone. That is exactly what this tool does, so the adjusted color stays in the same family rather than drifting to a different shade.
The slider runs from -100 percent to +100 percent. At 0 percent you get the original color back. A positive value moves lightness toward 100 percent (white): the new lightness is L + (100 - L) x amount, so +50 percent closes half the remaining gap to white. A negative value moves lightness toward 0 percent (black): the new lightness is L x (1 + amount), so -50 percent halves the lightness. Because the steps are proportional rather than fixed, the same percentage feels consistent whether you start from a dark or a light color.
Working in HSL is why this gives cleaner results than simply scaling the raw red, green and blue numbers. Multiplying RGB channels can desaturate or skew the hue, especially near white. Converting to HSL, nudging only the lightness, then converting back keeps the hue locked, which is what you want when generating hover, active and disabled states or a tidy tint-and-shade palette from a single brand color.
When to use it
- Creating a darker hover or active state for a button from its base brand color.
- Making a light tint of a color for a card background, badge or subtle section fill.
- Building a consistent set of shades and tints for a UI palette from one starting color.
- Adjusting a color that is slightly too bright or too dark without changing its hue.
How to use the Darken or Lighten Color
- Pick a color with the swatch picker, or type a hex code (with or without the #) into the HEX field.
- Drag the slider left to darken (toward -100%) or right to lighten (toward +100%).
- Read the resulting hex on the adjusted swatch and compare it with the original beside it.
- Use the step scale to see evenly spaced darker and lighter versions at once.
- Click the adjusted swatch or any scale swatch to copy its hex code to the clipboard.
Formula & method
Worked examples
You want a darker version of #3B82F6 (a blue) at -40% for a button hover state.
- Convert #3B82F6 to HSL: hue 217, saturation 91%, lightness 59.8%.
- Amount = -40% = -0.4, which is negative, so use new L = L x (1 + a).
- New L = 59.8 x (1 + (-0.4)) = 59.8 x 0.6 = 35.9%.
- Keep hue 217 and saturation 91%, set lightness to 35.9%.
- Convert HSL(217, 91%, 35.9%) back to RGB and then to hex.
Result: #3B82F6 darkened 40% becomes #0847AF.
You want a lighter tint of #E11D48 (a pink-red) at +30% for a badge background.
- Convert #E11D48 to HSL: hue 347, saturation 77%, lightness 49.8%.
- Amount = +30% = 0.3, which is positive, so use new L = L + (100 - L) x a.
- New L = 49.8 + (100 - 49.8) x 0.3 = 49.8 + 50.2 x 0.3 = 49.8 + 15.1 = 64.9%.
- Keep hue 347 and saturation 77%, set lightness to 64.9%.
- Convert HSL(347, 77%, 64.9%) back to RGB and then to hex.
Result: #E11D48 lightened 30% becomes #EB607F.
Step scale for #3B82F6 (hue 217, saturation 91%, lightness 59.8%) across the slider
| Adjustment | Effect | Resulting hex |
|---|---|---|
| -100% | Black | #000000 |
| -75% | Much darker | #031E49 |
| -50% | Darker | #073C92 |
| -25% | Slightly darker | #0A59DB |
| 0% | Original | #3B82F6 |
| +25% | Slightly lighter | #6CA1F8 |
| +50% | Lighter | #9DC1FB |
| +75% | Much lighter | #CEE0FD |
| +100% | White | #FFFFFF |
How the lightness formula maps a few amounts (starting from lightness L = 50%)
| Amount | Formula used | New lightness |
|---|---|---|
| -100% | 50 x (1 + (-1)) | 0% (black) |
| -50% | 50 x (1 + (-0.5)) | 25% |
| 0% | unchanged | 50% |
| +50% | 50 + (100 - 50) x 0.5 | 75% |
| +100% | 50 + (100 - 50) x 1 | 100% (white) |
Common mistakes to avoid
- Scaling the RGB numbers directly instead of the lightness. Multiplying each of red, green and blue by the same factor can shift the hue and wash out saturation, especially near white. Adjusting only the lightness in HSL keeps the color in the same family, which is why this tool converts to HSL first.
- Expecting -100% and +100% to be subtle. The extremes are absolute: -100% always gives pure black and +100% always gives pure white, whatever color you start from. For usable hover and tint states, smaller steps like 10% to 40% are usually what you want.
- Assuming the same percentage looks identical on every color. Because the change is proportional to the current lightness, a -30% step on an already dark color moves fewer points than the same step on a bright one. Compare colors by their resulting lightness, not just the slider value.
- Darkening a fully saturated color and expecting it to stay vivid. Lowering lightness toward black naturally mutes a color, and raising it toward white fades it. If you need to keep vividness while changing brightness, adjust saturation separately rather than relying on lightness alone.
Glossary
- HSL
- A color model describing a color by hue, saturation and lightness, which makes lightness easy to adjust on its own.
- Hue
- The position of a color on the color wheel, measured in degrees from 0 to 360 (0 red, 120 green, 240 blue).
- Saturation
- How vivid or gray a color is, from 0 percent (gray) to 100 percent (fully colorful).
- Lightness
- How bright a color is in HSL, from 0 percent (black) through the pure color at 50 percent to 100 percent (white).
- Tint
- A lighter version of a color, produced by moving its lightness toward white.
- Shade
- A darker version of a color, produced by moving its lightness toward black.
- Hex code
- A six-character string like #3B82F6 that encodes the red, green and blue channels of a color in base 16.
Frequently asked questions
How does this tool darken or lighten a color?
It converts your color to HSL, then changes only the lightness value while keeping the hue and saturation fixed. A negative slider amount moves the lightness toward black and a positive amount moves it toward white, so the color stays in the same family rather than shifting to a different hue.
What do -100% and +100% mean on the slider?
At 0% you get your original color. -100% pushes the lightness all the way to 0%, which is pure black, and +100% pushes it to 100%, which is pure white. Values in between blend proportionally, so most real use cases sit in the -40% to +40% range.
Why adjust lightness in HSL instead of scaling RGB?
Scaling the raw red, green and blue numbers can change the hue and reduce saturation, giving muddy or washed-out results. Adjusting lightness in HSL changes only how bright the color is, so the underlying color stays recognisable, which is what you want for hover states and tints.
Can I type a hex code instead of using the picker?
Yes. Type any 6-digit or 3-digit hex code into the HEX field, with or without the leading #. The swatch picker and all the swatches update as you type, and an invalid value shows a short hint instead of breaking.
How do I copy the adjusted color?
Click the adjusted swatch to copy its hex code to your clipboard, or click any swatch in the step scale to copy that specific shade or tint. A short confirmation message appears once the value is copied.
Does my color data leave my device?
No. The tool runs entirely in your browser using plain JavaScript. Nothing you enter is uploaded or stored on a server, and it works offline once the page has loaded.