Darken a Hex Color

Free, instant, copy-ready — no signup.

Enter a hex code and drag the slider to darken it by an exact percentage. The darker hex code updates live and copies in one click. Need the opposite? Use the lighten color tool.

How Darkening a Color Works

Darkening blends each RGB channel toward black. For a chosen percentage p (0–1), each channel becomes:

new = old × (1 − p)

20% darken of #2D6A4F — rgb(45, 106, 79):
 ├─ R: 45  × 0.8 =  36
 ├─ G: 106 × 0.8 =  85
 └─ B: 79  × 0.8 =  63

Result: rgb(36, 85, 63) = #24553F

This is the classic shade formula — a darkened color is a shade. Because every channel shrinks by the same factor, the hue stays stable and the result reads as a deeper version of the same color rather than a different one.

Every 10% Step of #2D6A4F, Darkened

The same ramp for any color is precomputed in the color library — for example #2D6A4F, #1E3A5F, or Tailwind's red-600.

When to Darken a Color

• Pressed and active states — darken a button color 10–20% for press feedback that stays on-brand (hover usually lightens, press darkens).
• Text colors from brand hues — a 40–60% darker version of a brand color makes headings and labels that feel on-palette; verify readability with the contrast checker.
• Dark-mode surfaces — 70–90% darkening turns a brand color into page and card backgrounds that keep a hint of the hue instead of going flat gray.
• Borders on tinted backgrounds — a 20–30% darker version of a surface tint outlines cards and inputs without falling back to generic gray.

Darken a Color in CSS

You don't always need to hard-code the darker hex — modern CSS can derive it:

/* color-mix(): 20% darker (mix 80% color with 20% black) */
background: color-mix(in srgb, #2d6a4f 80%, black);

/* Relative color syntax: lower HSL lightness by 20 points */
background: hsl(from #2d6a4f h s calc(l - 20));

/* Sass */
background: color.scale(#2d6a4f, $lightness: -20%);

Hard-coded hex values from the tool above are still the right call for design tokens, emails, and anywhere you need the exact value once. For the full CSS/JS playbook, read how to lighten or darken a color in CSS.

Frequently Asked Questions

• How do I darken a hex color?

  Multiply each RGB channel by (1 − percentage): new = old × (1 − p). A 20% darken of #2D6A4F moves rgb(45, 106, 79) to rgb(36, 85, 63), which is #24553F. The slider tool above applies that formula for any hex code and percentage.

• What percentage should I darken a color for pressed or active states?

  For pressed and active states on buttons, 10–20% darker is the sweet spot — clearly different from the hover state without turning muddy. Borders on tinted backgrounds usually want 20–30%, and text colors derived from a brand hue often need 40–60% before they pass contrast checks.

• How do I darken a color in CSS?

  Modern CSS can darken a color directly with color-mix(): background: color-mix(in srgb, #2d6a4f 80%, black) gives a 20% darker version. Relative color syntax like hsl(from #2d6a4f h s calc(l - 20)) also works in current browsers, and Sass projects can use color.scale($color, $lightness: -20%).

• Is darkening a color the same as making a shade?

  Yes — in color theory a shade is exactly a color mixed with black, and darkening by blending toward black produces shades. Lowering the HSL lightness channel instead behaves slightly differently, but for design work the mix-with-black approach is the standard.

• Does darkening a color change its hue or saturation?

  No — blending toward black scales every RGB channel by the same factor, so the hue and HSV saturation stay unchanged while lightness falls. That is why shades read as richer, deeper versions of the same color, whereas tints (mixes with white) lose saturation as they lighten.

Related tools: lighten a color · shade generator · tint and shade generator · hex to RGB converter · contrast checker