Sass lighten()

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

Definition and Usage

lighten($color, $amount) increases 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.lighten().

Deprecated.

Official Sass docs list lighten() under Deprecated Functions. Fixed addition often overshoots (an 85% light color lightened by 30% becomes white). Prefer color.scale($color, $lightness: $amount) for relative lightening, or color.adjust($color, $lightness: $amount, $space: hsl) to keep the old math.

Official idea.

lighten(#6b717f, 20%) → #a1a5af. But lighten(#e1d7d2, 30%) → white, while color.scale(#e1d7d2, $lightness: 30%) → #eae3e0.

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
lighten($color, $amount);

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

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

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

Reference

Migrate to scale / adjust

Official migration paths:

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

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

Code

SCSS Examples

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

Example 1 — Lightness 46% → 66% (Official Docs)

A slate gray lightens by a fixed 20% lightness.

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

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

How It Works

  1. Add 20% to HSL lightness.
  2. Mid-tone colors with room to spare look fine.
  3. Hover emits finished hex #a1a5af.
  4. Risky when the color is already pale (see Example 3).

Example 2 — Navy Lightened by 60% (Official Docs)

Lightness 20% becomes 80%.

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

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

How It Works

  1. Large fixed step turns deep navy into soft sky blue.
  2. Custom property stores the light variant.
  3. In new code, try color.scale(#036, $lightness: 60%).
  4. Compare the look before locking tokens.

Example 3 — Pale Color + Large Amount → White (Official Docs)

Lightness 85% plus 30% clamps to white.

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

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

How It Works

  1. #e1d7d2 lightness is 85%.
  2. Add 30% → above 100% → white.
  3. You asked for “a bit lighter” and wiped the tint out.
  4. Classic reason official docs discourage lighten.

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

Same seed color, relative 30% lightening keeps a soft tint.

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

How It Works

  1. Side-by-side shows the trap vs the fix.
  2. lighten collapses to white.
  3. scale keeps usable soft taupe #eae3e0.
  4. Prefer scale in new SCSS for soft hovers / surfaces.

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

Match lighten(#6b717f, 20%) exactly when migrating.

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

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 soft states.
  4. Module form documents where the helper comes from.

Edge Cases & Pitfalls

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

white

Overshoot → white

If lightness plus $amount hits 100%, you get white. Use color.scale instead.

module

No color.lighten()

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

space

Legacy colors only

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

intent

Fixed ≠ relative

lighten($c, 30%) is not “30% lighter.” That phrase maps to scale(..., $lightness: 30%).

Toolchain

Sass Support

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

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

Compile with the Dart Sass CLI.

Remember

Key Takeaways

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

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

Migrate

Migrate Notes

Conceptual flow:

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

Frequently Asked Questions

lighten($color, $amount) increases a legacy color’s HSL lightness by $amount (0%–100%). Example: lighten(#6b717f, 20%) is #a1a5af; lighten(#036, 60%) is #99ccff; lighten(#e1d7d2, 30%) is white.
Yes. Official Sass docs list it under Deprecated Functions and omit it from the sass:color module. Prefer color.scale() for relative lightening, or color.adjust($color, $lightness: $amount, $space: hsl) to keep the old math.
Because lighten() is usually not the best way to make a color lighter, it is not included in the new module system. Use color.scale or color.adjust instead.
lighten adds a fixed lightness amount (85% lightness + 30% becomes white). color.scale($c, $lightness: 30%) makes the color 30% lighter 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 addition: color.adjust($color, $lightness: $amount, $space: hsl) on Dart Sass 1.79+. For better relative lightening: color.scale($color, $lightness: $amount).

Next: Sass color.lightness()

Read HSL lightness — prefer color.channel(..., "lightness") in new SCSS.

color.lightness() →

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.hue Function Sass color.lightness Function