Sass darken()

Beginner
12 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass darken decreasing HSL lightness and migrating to color.scale or color.adjust
Definition

Definition and Usage

darken($color, $amount) decreases a legacy color’s HSL lightness by a fixed percentage (0%–100%) and returns a new color. It is a global built-in — there is no color.darken().

Deprecated.

Official Sass docs list darken() under Deprecated Functions. Fixed subtraction often overshoots (a 20% light color darkened by 30% becomes black). Prefer color.scale($color, $lightness: -$amount) for relative darkening, or color.adjust($color, $lightness: -$amount, $space: hsl) to keep the old math.

Official idea.

darken(#b37399, 20%) → #7c4465. But darken(#036, 30%) → black, while color.scale(#036, $lightness: -30%) → #002447.

Legacy colors only.

$color must be in rgb, hsl, or hwb. For modern spaces, use color.scale / color.adjust with an explicit $space.

Syntax

Syntax

SCSS
// Deprecated global
darken($color, $amount);

// Preferred — relative darkening
@use "sass:color";
color.scale($color, $lightness: -$amount);

// Same fixed math as darken (Dart Sass 1.79+)
color.adjust($color, $lightness: -$amount, $space: hsl);

Pattern: recognize old darken → choose scale for design intent or adjust for pixel-matching migrations.

Reference

Migrate to scale / adjust

Official migration paths:

Old / intentPrefer
darken($c, $amount) — relative “% darker”color.scale($c, $lightness: -$amount)
Keep exact old mathcolor.adjust($c, $lightness: -$amount, $space: hsl)
lighten($c, $amount)color.scale($c, $lightness: $amount) or adjust with +$amount
No module formThere is no color.darken()

Quick mental model: darken = fixed subtract, scale = percent of remaining room, adjust = same fixed math, modern API.

Code

SCSS Examples

Examples use deprecated global darken() plus modern scale / adjust. Open View Compiled CSS for verified output (matches official Sass docs samples).

Example 1 — Lightness 92% → 72% (Official Docs)

A mauve brand darkens by a fixed 20% lightness.

SCSS
// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465

.button {
  background: #b37399;
  &:hover {
    background: darken(#b37399, 20%);
  }
}

How It Works

  1. Subtract 20% from HSL lightness.
  2. Light colors with room to spare look fine.
  3. Hover emits finished hex #7c4465.
  4. Risky when the color is already dark (see Example 3).

Example 2 — Cream Darkened by 40% (Official Docs)

Lightness 85% becomes 45%.

SCSS
// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a

.card {
  --surface: #f2ece4;
  --shadow-tone: #{darken(#f2ece4, 40%)};
}

How It Works

  1. Large fixed step turns near-white cream into muted brown.
  2. Custom property stores the shadow tone.
  3. In new code, try color.scale(#f2ece4, $lightness: -40%).
  4. Compare the look before locking tokens.

Example 3 — Dark Color + Large Amount → Black (Official Docs)

Lightness 20% minus 30% clamps to black.

SCSS
// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

.deep {
  color: darken(#036, 30%);
}

How It Works

  1. #036 lightness is 20%.
  2. Subtract 30% → below zero → black.
  3. You asked for “a bit darker” and wiped the color out.
  4. Classic reason official docs discourage darken.

Example 4 — Prefer color.scale() (Official Docs)

Same seed color, relative 30% darkening keeps a visible navy.

SCSS
@use "sass:color";

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

.deep {
  --darken: #{darken(#036, 30%)};
  --scale: #{color.scale(#036, $lightness: -30%)};
}

How It Works

  1. Side-by-side shows the trap vs the fix.
  2. darken collapses to black.
  3. scale keeps usable dark blue #002447.
  4. Prefer scale in new SCSS for hover / shadow tones.

Example 5 — Preserve Old Math with color.adjust()

Match darken(#b37399, 20%) exactly when migrating.

SCSS
@use "sass:color";

// Prefer on Dart Sass 1.79+:
// color.adjust($c, $lightness: -20%, $space: hsl)

.tokens {
  --legacy: #{darken(#b37399, 20%)};
  --adjust: #{color.adjust(#b37399, $lightness: -20%)};
  --brand: #{darken(#336699, 10%)};
}

How It Works

  1. --legacy and --adjust match — safe visual swap.
  2. Pass $space: hsl on Dart Sass 1.79+ when you can.
  3. Still consider scale when redesigning hover states.
  4. Module form documents where the helper comes from.

Edge Cases & Pitfalls

Most darken bugs are fixed math on already-dark colors, or expecting a module API.

black

Overshoot → black

If lightness minus $amount hits 0%, you get black. Use color.scale instead.

module

No color.darken()

After @use "sass:color", call scale or adjust — not color.darken.

space

Legacy colors only

oklch / lab colors need modern writers with an explicit $space.

intent

Fixed ≠ relative

darken($c, 30%) is not “30% darker.” That phrase maps to scale(..., $lightness: -30%).

Toolchain

Sass Support

Global darken still compiles, but new work should use the module writers.

FeatureStatus
Global darken()Deprecated — still available for legacy SCSS
color.scale(..., $lightness: -…)Preferred relative darkening
color.adjust(..., $space: hsl)Same fixed math (Dart Sass 1.79+ for $space)
color.darken()Does not exist

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Deprecated: fixed HSL lightness subtraction on legacy colors.
  • Prefer color.scale for “percent darker.”
  • Use color.adjust when you must match old pixels.
  • No module form — there is no color.darken().

One line: learn darken to read legacy SCSS; write scale (or adjust) in new code.

Migrate

Migrate Notes

Conceptual flow:

flow.txt
1. Find darken($color, $amount)
2. Want "% darker"? → color.scale($color, $lightness: -$amount)
3. Need same pixels? → color.adjust($color, $lightness: -$amount, $space: hsl)
4. @use "sass:color"
5. Delete the global darken() call

Frequently Asked Questions

darken($color, $amount) decreases a legacy color’s HSL lightness by $amount (0%–100%). Example: darken(#b37399, 20%) is #7c4465.
Yes. Official Sass docs list it under Deprecated Functions and omit it from the sass:color module. Prefer color.scale() for relative darkening, or color.adjust($color, $lightness: -$amount, $space: hsl) to keep the old math.
Because darken() is usually not the best way to darken a color, it is not included in the new module system. Use color.scale or color.adjust instead.
darken subtracts a fixed lightness amount (20% lightness → 0% can become black). color.scale($c, $lightness: -30%) makes the color 30% darker than it was, which is usually what designers want.
No for modern spaces. Official docs require a legacy color space (rgb, hsl, or hwb). Convert first, or use color.scale / color.adjust with an explicit $space.
For the same fixed subtraction: color.adjust($color, $lightness: -$amount, $space: hsl) on Dart Sass 1.79+. For better relative darkening: color.scale($color, $lightness: -$amount).

Next: Sass desaturate()

Another deprecated fixed-amount helper — migrate to color.scale.

desaturate() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass color.blue Function Sass desaturate Function