Sass color.lightness()

Definition and Usage

color.lightness($color) returns the HSL lightness of a legacy color as a number between 0% and 100%. Global alias: lightness($color).

Official Sass docs mark it deprecated — prefer color.channel($color, "lightness") on Dart Sass 1.79+. Pair with color.hue() and color.saturation() when auditing a full HSL triple.

Syntax

@use "sass:color";

// Deprecated reader
color.lightness(#e1d7d2); // 85.2941176471%
color.lightness(#f2ece4); // 92.1568627451%
color.lightness(#dadbdf); // 86.4705882353%

// Prefer today (Dart Sass 1.79+)
color.channel(#e1d7d2, "lightness");
color.channel($c, "lightness", $space: hsl);

Pattern: recognize color.lightness in old files → rewrite with color.channel($c, "lightness").

Migrate to color.channel

Side-by-side mapping:

To change lightness, use writers like color.scale($c, $lightness: …) or color.adjust($c, $lightness: …, $space: hsl) — not the reader. Avoid new lighten() / darken() calls.

Related Functions

Prefer color.channel(). Sibling readers: color.hue() / color.saturation(). Change with color.scale() or color.adjust(). Previous: lighten(). Next: opacify(). Load via @use "sass:color".

SCSS Examples

Examples use color.lightness(). Open View Compiled CSS for verified output (matches official Sass docs samples where noted).

@use "sass:color";

@debug color.lightness(#e1d7d2); // 85.2941176471%

.swatch {
  --lightness: #{color.lightness(#e1d7d2)};
}

.swatch {
  --lightness: 85.2941176471%;
}

@use "sass:color";

@debug color.lightness(#f2ece4); // 92.1568627451%
@debug color.lightness(#dadbdf); // 86.4705882353%

.palette {
  --cream: #{color.lightness(#f2ece4)};
  --cool: #{color.lightness(#dadbdf)};
}

.palette {
  --cream: 92.1568627451%;
  --cool: 86.4705882353%;
}

@use "sass:color";

.extremes {
  --white: #{color.lightness(white)};
  --black: #{color.lightness(black)};
}

.extremes {
  --white: 100%;
  --black: 0%;
}

@use "sass:color";

.compare {
  --soft: #{color.lightness(#e1d7d2)};
  --mid: #{color.lightness(#6b717f)};
  --deep: #{color.lightness(#036)};
  --brand: #{color.lightness(#336699)};
}

.compare {
  --soft: 85.2941176471%;
  --mid: 45.8823529412%;
  --deep: 20%;
  --brand: 40%;
}

@use "sass:color" as *;

.panel {
  --lightness: #{lightness(#e1d7d2)};
}

.panel {
  --lightness: 85.2941176471%;
}

Sass Support

color.lightness() remains for compatibility. New readers should use color.channel on Dart Sass 1.79+.

Compile with the Dart Sass CLI.

Key Takeaways

Migrate Notes

Practical checklist:

1. Find color.lightness($c) / lightness($c) in legacy SCSS
2. Require Dart Sass 1.79+ for color.channel
3. Replace with color.channel($c, "lightness")
4. Add $space: hsl when reading non-legacy colors
5. Use scale / adjust when you need to change lightness