How to Make a Hex Color Darker

Last updated: March 2026

Darkening a hex color is something every web developer and designer runs into — whether you're creating a pressed button state, building a dark mode palette, or just need a richer version of a brand color. If you've got a hex code like #6db3f2 and need it darker, you're in the right place.

The concept is the mirror image of lightening: instead of blending toward white, you blend toward black (#000000). Every RGB channel gets pulled closer to zero, producing a shade — a deeper, more saturated version of the original color.

Here are three methods, ranked from "I want to understand it" to "just give me the result."

Method 1 — Proportional Blending Toward Black

This is the mathematically correct way to darken a hex color while preserving its hue and character.

The Formula

For each RGB channel:

Worked Example

Starting with #6db3f2:

Here's what that looks like:

Why Multiply Instead of Subtract?

Subtracting a flat value (like 40 from each channel) can push low channels below zero and distort the color balance. Multiplying by a factor scales proportionally — channels that are already dark don't go negative, and the relative balance between R, G, and B stays intact. This is how professional color systems (Sass darken(), Figma's "Shade" feature) work under the hood.

Method 2 — HSL Lightness Reduction

Just like lightening, the HSL model gives you a single dial to turn.

Steps

1. Convert hex to HSL. #6db3f2 → H ≈ 210°, S ≈ 84%, L ≈ 69%.
2. Decrease the L (Lightness) value. Drop from 69% to 45% or 30%.
3. Convert back to hex.

This is especially convenient in CSS where you can write colors in hsl() notation directly and tweak the lightness with custom properties or calc().

A CSS Custom Properties Trick

:root {
  --brand-h: 210;
  --brand-s: 84%;
  --brand-l: 69%;

  --brand:      hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-dark: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 20%));
}

.btn        { background: var(--brand); }
.btn:hover  { background: var(--brand-dark); }
.btn:active { background: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 35%)); }

This pattern lets you derive all shades from a single set of HSL tokens — change the base lightness, and every variant updates automatically.

Method 3 — Use a Free Shade Generator

When you need multiple darkness levels at once — say for a full design token scale from 50 to 950 — manually computing each step is impractical.

Design systems like Tailwind ship pre-built scales with 11 steps per hue. HexTints lets you generate the same kind of scale for any custom brand color in seconds.

When You Need Darker Hex Colors (Real-World Scenarios)

Dark mode palettes: Don't just invert your light theme. Take your brand colors and generate 3–4 darker shades that work against dark backgrounds. This preserves brand identity while ensuring readability in dark UI contexts.

Button pressed/active states: The convention is: default → lighter on hover → darker on press. A 15–20% darker shade of your button color creates the "pressed in" affordance users expect.

Text on colored backgrounds: When your background is a medium-brightness color, you need dark variants of that same hue for text. This creates contrast while maintaining a monochromatic, cohesive palette.

Borders and shadows: Subtle 5–10% darker shades of a surface color make excellent border colors. They add depth and definition without introducing new hues.

Gradient endpoints: A gradient from your base color to a 30–40% darker shade creates a natural depth effect — commonly used in hero sections, cards, and navigation bars.

Common Mistakes When Darkening Hex Colors

Subtracting a flat number: #6db3f2 minus #404040 does not produce a good result. The channels subtract unevenly, and some may clip at zero. Always multiply by a factor instead.

Over-darkening and losing hue: Below about 10% lightness in HSL, most colors start looking indistinguishable from black. If you need very dark colors that retain a visible hue, consider capping your darkening at 80–85% of the original value.

Darkening in sRGB vs. perceptual spaces: sRGB (what hex codes use) isn't perceptually linear. A 20% mathematical darkening doesn't always look like 20% darker to human eyes. For high-fidelity work, consider using OKLCH or Lab* color spaces. For everyday web work, sRGB is fine.

Frequently Asked Questions

• What's the simplest way to darken a hex color?

  Multiply each RGB channel value by a factor less than 1. For example, multiplying by 0.8 darkens the color by 20%. Or use a free tool like HexTints to generate darker shades instantly.

• What's the difference between a shade and a tint?

  A shade is a color mixed with black (darker). A tint is a color mixed with white (lighter). Both preserve the original hue — they just change how light or dark the color appears.

• Can I darken colors in CSS without changing the hex code?

  Yes. Use color-mix(in srgb, #6db3f2, black 25%) to mix 25% black into your color. Or use hsl() and reduce the lightness value.

  CSS filter: brightness(0.8) also works but affects the entire element, not just the color value — use it with care.

• How dark can I make a hex color before it just looks black?

  Below about 5–8% HSL lightness, most colors are visually indistinguishable from black on typical displays. For the darkest usable shade, stay above L: 10% in HSL — you'll still perceive the hue, especially on well-calibrated monitors.

• How many shades should a design system have?

  Most modern design systems (Tailwind, Material, IBM Carbon) use 9–11 steps per hue, typically labeled 50 through 950 in increments of 100. HexTints generates all of these tints and shades from a single base color.