Sass lighten() Function

What You’ll Learn

lighten() is a global Sass helper documented in the sass:color module page (Deprecated Functions). It makes a legacy color lighter by increasing 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 lighten()?

Lighten means “push this color toward white by raising lightness.” Official docs: it increases the HSL lightness of $color by $amount (0%–100%). Hue and saturation stay related; only lightness moves up by a fixed chunk.

• lighten(#6b717f, 20%) → #a1a5af (lightness 46% → 66%)
• lighten(#036, 60%) → #99ccff (lightness 20% → 80%)
• lighten(#e1d7d2, 30%) → white (lightness 85% → 100%)

📝 Syntax

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

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

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

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

Parameters

Return value

📦 Why There Is No color.lighten()

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

// Old (deprecated global)
$soft: lighten(#6b717f, 20%);

@use "sass:color";

// Same fixed addition as lighten
$soft: color.adjust(#6b717f, $lightness: 20%); // works on older Dart Sass too
// Official form (Dart Sass 1.79+):
// color.adjust(#6b717f, $lightness: 20%, $space: hsl)

// Usually better — 20% lighter relative to the original
$soft: color.scale(#6b717f, $lightness: 20%);

📋 lighten vs color.scale vs color.adjust

Official docs call out this trap with #e1d7d2 (already 85% lightness):

🛠 Compatibility

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

Examples Gallery

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

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af

.button {
  background: #6b717f;
  &:hover {
    background: lighten(#6b717f, 20%);
  }
}

.button {
  background: #6b717f;
}
.button:hover {
  background: #a1a5af;
}

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff

.banner {
  --ink: #036;
  --sky: #{lighten(#036, 60%)};
}

.banner {
  --ink: #036;
  --sky: #99ccff;
}

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%); // white

.pale {
  color: lighten(#e1d7d2, 30%);
}

.pale {
  color: white;
}

@use "sass:color";

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

.pale {
  --lighten: #{lighten(#e1d7d2, 30%)};
  --scale: #{color.scale(#e1d7d2, $lightness: 30%)};
}

.pale {
  --lighten: white;
  --scale: #eae3e0;
}

@use "sass:color";

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

.tokens {
  --legacy: #{lighten(#6b717f, 20%)};
  --adjust: #{color.adjust(#6b717f, $lightness: 20%)};
  --brand: #{lighten(#336699, 15%)};
}

.tokens {
  --legacy: #a1a5af;
  --adjust: #a1a5af;
  --brand: #538cc6;
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize lighten() in older soft-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 lighten on already-pale brands that collapse to white.
• Pairing with darken — both globals are deprecated twins; migrate together.

⚠️ Common Pitfalls

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

💡 Best Practices