Sass darken() Function

What You’ll Learn

darken() is a global Sass helper documented in the sass:color module page (Deprecated Functions). It makes a legacy color darker by decreasing HSL lightness by $amount at compile time. This page covers the fixed-amount trap, why the module system skipped it, how it differs from color.scale(), migration to color.adjust(), and five compiled examples.

What Is darken()?

Darken means “push this color toward black by lowering lightness.” Official docs: it decreases the HSL lightness of $color by $amount (0%–100%). Hue and saturation stay related; only lightness moves down by a fixed chunk.

• darken(#b37399, 20%) → #7c4465 (lightness 92% → 72%)
• darken(#f2ece4, 40%) → #b08b5a (lightness 85% → 45%)
• darken(#036, 30%) → black (lightness 20% → 0%)

📝 Syntax

Call the global function with a legacy color and a percentage:

// Deprecated global (legacy colors only)
darken($color, $amount)

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

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

Parameters

Return value

📦 Why There Is No color.darken()

Official docs: because darken() is usually not the best way to make a color darker, it is not included in the new module system. You will not find color.darken after @use "sass:color".

// Old (deprecated global)
$hover: darken(#b37399, 20%);

@use "sass:color";

// Same fixed subtraction as darken
$hover: color.adjust(#b37399, $lightness: -20%); // works on older Dart Sass too
// Official form (Dart Sass 1.79+):
// color.adjust(#b37399, $lightness: -20%, $space: hsl)

// Usually better — 20% darker relative to the original
$hover: color.scale(#b37399, $lightness: -20%);

📋 darken vs color.scale vs color.adjust

Official docs call out this trap with #036 (already only 20% lightness):

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a finished color—no darken() call remains at runtime.

Examples Gallery

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

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

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

.button {
  background: #b37399;
}
.button:hover {
  background: #7c4465;
}

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

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

.card {
  --surface: #f2ece4;
  --shadow-tone: #b08b5a;
}

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

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

.deep {
  color: black;
}

@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%)};
}

.deep {
  --darken: black;
  --scale: #002447;
}

@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%)};
}

.tokens {
  --legacy: #7c4465;
  --adjust: #7c4465;
  --brand: #264d73;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize darken() in older button/hover themes.
• Safe migrations — swap to color.adjust for identical output, or scale for better UX.
• Teaching HSL — show fixed lightness steps vs relative scaling.
• Audit traps — find darken on already-dark brands that collapse to black.
• Pairing with lighten — both globals are deprecated twins; migrate together.

⚠️ Common Pitfalls

• Using it in new code — prefer color.scale (or adjust for same math).
• Expecting color.darken() — that name does not exist in sass:color.
• Dark colors + large amounts — easy to clamp to black unexpectedly.
• Modern color spaces — $color must be legacy for global darken.
• Assuming “30% darker” means scale — darken is fixed subtraction, not relative.

💡 Best Practices