Darken a Color Online — Free
Runs 100% in your browser — your files never leave your device.
Shadows, pressed states, borders, and depth cues all need a darker shade of a base color — and guessing percentages in a design tool wastes time. Paste any HEX, RGB, or HSL value, drag the darken slider, and copy the result in whichever format your project needs. Everything runs in your browser.
How it works
- 1
Paste a color
Enter any HEX, RGB, or HSL value — the swatch updates instantly.
- 2
Drag the darken slider
Decrease lightness from 0 to 100 percent and watch the preview update live.
- 3
Copy the result
Copy the darkened color as HEX, RGB, or HSL with one click.
About this tool
How darkening works
The tool lowers the lightness channel of your color in HSL space by the percentage you choose. Hue and saturation stay put, so the darkened shade keeps the character of the base color — pressed states read as the same button, just deeper.
When to reach for it
Shadows, pressed and active button states, borders that need weight without changing hue, and depth cues in layered interfaces all come from darkened shades of the base palette. Deriving them keeps a design system coherent.
Tips for the best result
Pressed states usually sit 10–15 percent darker than the resting state; borders 15–25 percent. Watch pure saturated colors — darkening can push them toward muddy, and a small saturation reduction at the same time keeps them rich instead.
Frequently asked questions
How much darker should a pressed state be?
Between 10 and 15 percent is the common range — enough to feel physical without looking broken. Test with the keyboard focus state as well; both often need to read at once.
Is darkening the same as adding black?
In HSL space, darkening lowers lightness while keeping hue and saturation — closer to how shadow falls on a colored object than mixing in flat black, which desaturates as it darkens.
Can I copy the result in the same format I pasted?
Yes — paste HEX, RGB, or HSL and copy the darkened color in any of the three formats.