Darken Color
Make any color darker by an exact percentage and copy the resulting shade as a HEX or RGB code. Free and instant — every shade is calculated locally in your browser.
Shade scale (10% steps)
| Shade | Darken | HEX | RGB |
|---|
How to darken a color online
- Enter your base color. Use the color picker or type a HEX code (3 or 6 digits, with or without the #).
- Choose the amount and method. Drag the slider to set how much darker the color should get. "Mix with black" blends black into the color; "HSL lightness" lowers the lightness channel instead.
- Copy your shade. Copy the result as HEX or RGB, or pick any row from the 10-step shade scale below the result.
About this tool
This free color darkener creates shades — darker versions of a color made by moving it toward black. Shades are everywhere in interface design: pressed and active button states, borders that match a fill color, text colors derived from a brand hue, dark-mode surface colors, and the deep end of a design-system color ramp. The default "mix with black" method matches CSS color-mix(in srgb, yourcolor, black 20%), while the "HSL lightness" method scales the lightness channel toward 0% the way Sass-style darken() workflows do.
Everything is computed locally in your browser — your colors are never sent to a server and there are no limits. Need to go the other way? Use the Lighten Color tool, or build a full ramp in both directions with the Color Shades Generator.
Frequently asked questions
What is the difference between the two darkening methods?
"Mix with black" scales every RGB channel toward 0, so a 20% darken multiplies each channel by 0.8 — hue stays stable and the result feels like adding black paint. "HSL lightness" converts the color to HSL and reduces only the lightness value, which can keep mid-tones more saturated. Both methods reach pure black at 100%.
What is a shade?
In color theory, a shade is a color mixed with black (a tint is a color mixed with white, and a tone is a color mixed with gray). Darkening a color by a percentage produces the shade at that mixing ratio.
How do I darken a color directly in CSS?
Modern browsers support color-mix(): for example color-mix(in srgb, #3b82f6, black 20%) matches this tool's default method at 20%. Use this tool when you need the final HEX value for design apps, emails, charts or older browsers.
How much should I darken a color for a hover or pressed state?
A common convention is roughly 8–12% darker for hover and 15–25% darker for pressed/active states. Check the result against your text color with a contrast checker to keep buttons accessible.