Does darkening change the hue?

No. Lightness is reduced in OKLCH while hue and chroma are preserved, so the darker colour is recognisably the same hue rather than drifting toward another.

How much should I darken for a hover state?

Ten to twenty percent is typical for a subtle state and twenty to thirty for a distinctly pressed one. Judge it on the live swatch rather than a fixed rule.

Why not just reduce the RGB values?

Independent channel reduction shifts hue as values approach zero, so colours can go purple or brown. Adjusting perceptual lightness keeps the colour stable.

Does a darker colour always have more contrast?

Only against lighter backgrounds. On dark surfaces a darkened colour loses contrast, so check legibility with a contrast checker before using it for text.

Color Darken Tool

Q: Is darkening the same as reducing saturation?

No. The step is applied to lightness in OKLCH, so chroma and hue are untouched — darkening reduces the colour's lightness but not its saturation, and contrast against dark backgrounds falls as the value drops.

Color

Darken: 20%

Result

#0043b2

You Might Also Need

Color Lighten Tool

Lighten any color by a percentage

Color Picker

Pick any color visually

Exposure Adjuster

Adjust the exposure of any color

Eyedropper Tool

Sample a color from anywhere on screen

The color darken tool reduces any color's lightness by a percentage you choose, returning a darker version that keeps the original hue and saturation intact.

What is Color Darken Tool?

The color darken tool takes a color and a percentage and returns a darker version of it. Move the slider and the tool lowers the color's perceptual lightness by that fraction, leaving hue and chroma untouched, and shows the result as a large swatch next to your input. It is the direct way to answer a question that comes up constantly in interface work: what is the pressed, deeper or shaded version of this exact colour.

The darkening is applied in OKLCH rather than by subtracting from the red, green and blue channels.
That choice is what keeps the result clean.
Reducing RGB channels independently tends to shift hue as the channels approach zero, so a blue darkened enough starts to look purple and a saturated orange can go brown.
Working on the lightness axis alone means the darker color is recognisably the same color, just deeper, which is what a hover or active state should be.
Hue and chroma are preserved by construction.

The slider runs from zero to one hundred percent, so the range covers everything from no change to very nearly black.
In practice most useful darkening sits in a much narrower band: ten to twenty percent for a subtle interactive state, twenty to thirty for a distinct pressed shade, and more than that only when you want a genuinely different tone rather than a state.
Because the swatch updates live, you can find that band by eye instead of guessing a numeric value and checking it afterwards.

Building state colours is the primary use. A design system typically needs a base, a hover and an active value for every interactive color, and deriving them by darkening keeps the relationships consistent across the whole palette. When the base color later changes, the derived states change with it rather than drifting apart, which is the maintenance benefit of deriving rather than hand-picking. The same logic applies to borders, dividers and any element that should read as a deeper sibling of a surface colour.

Two things to watch. First, darkening reduces the colour's lightness but not its saturation, so a highly saturated colour darkened far enough can start to look vivid even though it is darker; if you want a muted deep tone, pair darkening with a reduction in chroma using the saturation tools. Second, darkening lowers contrast against dark backgrounds, so a darkened state that sits on a dark surface may lose legibility; verify pairings with a contrast checker. Used for states and shaded variants, though, deriving a darker tone this way is faster and more reliable than nudging channels by hand.

When you need to darken a color for a state and want the value to be reproducible, this is quicker than editing channels by hand: pick the base, choose how far to darken hex color by percentage, and copy the result. It is also a convenient way to darken color online while inspecting a palette, because the live swatch updates as you drag and you can stop the moment the tone looks right.

How to use Color Darken Tool

Set the colour in the field.
Drag the slider to the percentage of darkening you want, from zero to one hundred.
Read the result swatch and copy its hex.
Check the contrast if the darker value will carry text.

When to use Color Darken Tool vs related tools

Use this tool to derive hover, pressed and shaded variants from a base colour. Use the lighten tool for the opposite direction, and adjust saturation as well when you want a muted deep tone rather than a vivid one. The shade generator shows ten darker steps side by side, and the lighten tool covers the opposite direction.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.