How is HSL darkening different from mixing with black?

Mixing with black (shading) changes all three RGB channels proportionally and can shift the perceived hue. Decreasing HSL lightness keeps the hue and saturation constant, so the color stays vivid and on-hue — just darker.

What happens when lightness reaches 0%?

The result is clamped at 0%, which produces pure black (#000000). Any percentage that would go below 0% is silently capped.

Can I enter a hex color without the # sign?

Yes. Both 3-digit shorthand (e.g. F0F) and 6-digit (e.g. FF00FF) are accepted with or without the leading #.

Does the tool preserve saturation?

Yes. Only the L (Lightness) channel changes. Hue and Saturation remain exactly as they are in the original color.

Why does a very saturated color look muddy at very low lightness?

In HSL, very low lightness values (below ~10%) naturally push colors toward black regardless of saturation, because the model blends toward the black point as L approaches 0.

Darken Color Tool

Name: Darken Color Tool
Availability: InStock
Author: Nham Vu

Enter a hex color and a percentage to reduce its HSL lightness. See the result swatch, hex code, and a 5-step strip at -10% through -50%.

Settings

Base Color

Darken by: 20%

1%99%

Quick Presets

Copied!

Result

Original

#3B82F6 hsl(217, 91%, 60%)

-20%

Darkened

#1A56CC hsl(217, 91%, 40%)

Preview Strip (-10% to -50%)

Summary

Enter a hex color and a percentage to reduce its HSL lightness. See the result swatch, hex code, and a 5-step strip at -10% through -50%.

How it works

Enter or paste a valid hex color (e.g. #3B82F6) into the input field or use the color picker.
Use the percentage slider or type a value (1-99) to choose how much to decrease the lightness.
The tool converts the hex color to HSL, subtracts the chosen percentage from the L channel (clamped at 0%), then converts back to hex.
The result swatch, original swatch, and hex code update instantly.
A 5-step preview strip shows the color darkened by -10%, -20%, -30%, -40%, and -50% from the original.

Use cases

Generate hover or active state variants for UI buttons and links.
Create darker background tones that complement a brand color.
Build accessible darker alternatives that maintain the original hue.
Quickly explore how a color looks at lower lightness values before committing to a palette.
Produce consistent darker variants for CSS custom properties or design tokens.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu