🌗 Darken and Lighten Color Tool

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, where 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, and you rarely need to touch the extremes for real UI work.

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, because a fixed factor drags each channel by a different visible amount. 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 palette from one brand color.

There is an important distinction in the terminology. A tint is a color mixed toward white (a lighter version), and a shade is a color mixed toward black (a darker version). Designers often build a 9-step or 10-step ramp, for example 50, 100, 200 up to 900, from a single base color so that text, borders, backgrounds and hover states all come from one consistent scale. This tool makes that ramp visible at a glance: the step scale shows -100%, -75%, -50%, -25%, 0%, +25%, +50%, +75% and +100% side by side, so you can pick the two or three steps that read as a coherent set.

One caveat worth understanding is that sRGB, the color space hex codes live in, is not perceptually uniform. A change of, say, 20 lightness points near the middle of the range looks like a bigger jump than the same 20 points near black or white, and equal HSL steps can look slightly uneven to the eye. For pixel-accurate UI states this is close enough and universally supported. If you need perceptually even steps, newer CSS color spaces such as OKLCH space their lightness more evenly, but HSL remains the simplest, most compatible way to generate shades and tints.

Modern CSS also offers native ways to do the same job. The function color-mix(in srgb, #3B82F6, black 40%) produces a shade and color-mix(in srgb, #3B82F6, white 30%) produces a tint, and relative color syntax like hsl(from #3B82F6 h s calc(l - 15%)) lets you subtract lightness directly. These are handy when you want the browser to compute the variant live, but a static hex from this tool is still the most portable option, working in email, older browsers, design files and any place color-mix is not available.

When to use it

• Creating a darker hover or active state for a button from its base brand color, for example -20% for hover and -35% for the pressed state.
• Making a light tint of a color for a card background, badge, table stripe or subtle section fill without changing the hue.
• Building a consistent set of shades and tints (a 50 to 900 ramp) for a UI palette from one starting color.
• Deriving a lighter disabled state and a darker focus ring from a single accent color so the whole control set matches.
• Adjusting a color that is slightly too bright or too dark for a background without shifting it to a different color.
• Generating a darker border or drop-shadow tone that clearly reads as related to the fill it sits against.

How to use the Darken or Lighten Color

1. Pick a color with the swatch picker, or type a hex code (with or without the #) into the HEX field.
2. Drag the slider left to darken (toward -100%) or right to lighten (toward +100%).
3. Read the resulting hex on the adjusted swatch and compare it with the original beside it.
4. Use the step scale to see evenly spaced darker and lighter versions at once and choose a coherent pair or trio.
5. Click the adjusted swatch or any scale swatch to copy its hex code to the clipboard.

Formula & method

Worked examples

Step scale for #3B82F6 (hue 217, saturation 91%, lightness 59.8%) across the slider

How the lightness formula maps a few amounts (starting from lightness L = 50%)

Ways to darken or lighten a color, and when to reach for each

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.
• Confusing a tint with a shade. A tint is lighter (mixed toward white) and a shade is darker (mixed toward black). If a hover state looks wrong, check the sign of your slider: buttons usually want a shade (negative) on hover, not a tint.
• Ignoring contrast when lightening text or dark buttons. Lightening a text color or darkening a light button can quietly break readability. After adjusting, check the pair against a contrast target such as WCAG 4.5:1 for normal text, because HSL lightness is not the same as measured contrast.

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.

color-mix()

A CSS function that blends two colors by a percentage, for example mixing a color with black to make a shade.

Frequently asked questions

Sources

• HSL color values (CSS color) , MDN Web Docs
• color-mix() CSS function , MDN Web Docs